内容安全策略：“img-src 'self' data:”

内容安全策略（CSP）是一种通过添加特定的HTTP头来帮助网站防御各种攻击的技术。其中一个CSP指令是“img-src 'self' data:”，它的作用是控制网站的图像资源。

img-src指令

img-src指令用于控制网站加载什么样的图像资源。可以使用下列值来指定可接受的来源：

• '*'：允许加载所有来源的图像资源。
• 'none'：禁止加载所有图像资源。
• 'self'：允许加载同源的图像资源。
• 一条或多条URL：在引号中指定的URL地址，如'https://www.example.com'。

除了上述指定来源的方式，我们还可以使用关键字'data:'来允许使用data: URI方案。

作用

img-src 'self' data:指令控制网站只加载同源的图像资源和data: URI方案的图像资源。这可以避免加载来自不安全的外部域的图像。

考虑以下示例：

<img src="https://unsafedomain.com/image.png" alt="unsafe image">

如果没有正确地配置CSP，将无法避免加载上述例子中的来源不安全的图像。但是，如果使用img-src 'self' data:指令，那么只有加载来自同源和data: URI方案的图像才被允许。

配置

要启用img-src 'self' data:指令，可以在HTTP响应头中包括以下内容：

Content-Security-Policy: img-src 'self' data:

在上述示例中，我们指示浏览器使用img-src 'self' data:指令控制图像来源。这样可以确保只有来自同源和data: URI方案的图像才能被加载。

参考资料

• MDN Web Docs: Content Security Policy (CSP)