文件预览违反内容安全策略

Question

这很奇怪，我已经检查并尝试了很多无济于事的事情。

我有一个简单的文件上传，它在上传之前显示图像。这在我的本地开发环境中运行良好，在登台服务器上也运行良好。

在生产服务器上，它不起作用。这是我的控制台中显示的内容：

拒绝加载图像“blob：https : //example.com/a7ced718-483b-4bc2-9db0-f012c8c6af5a ”，因为它违反了以下内容安全策略指令：“img-src‘self’数据：

但是，我没有定义 CSP，它在用于分段测试错误的精确副本服务器上运行良好。

此外，我尝试在文档头部的元标记中添加一个 CSP，但它也没有解决问题。这是我尝试实施的 CSP：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">

任何人都可以解释为什么这可能不起作用？

Answer 1

检查服务器发送的响应头（使用浏览器开发工具curl或其他）。

生产服务器必须发送Content-Security-Policy响应标头。

如果是这样，那么您的meta元素无效的原因是，无论在何处指定，浏览器都使用限制性最强的 CSP 策略，并且Content-Security-Policy您的生产服务器发送的标头比您使用该meta元素指定的标头更具限制性。

在https://w3c.github.io/webappsec-csp/#multiple-policies上查看有关多个策略的详细信息，meta在https://w3c.github.io/webappsec-csp/#meta-element上查看有关元素的详细信息—

通过meta元素指定的策略将与针对受保护资源的任何其他活动策略一起实施，无论它们在何处指定。§8.1 多项政策的影响中描述了实施多项政策的一般影响。

8.1. 多重政策的影响

其影响是，向要强制执行的策略列表中添加其他策略只会进一步限制受保护资源的功能。

因此，Content-Security-Policy您的生产服务器发送的标头似乎具有，img-src 'self' data:但为了允许您的图像 URL 并避免您看到的错误，Content-Security-Policy您的生产服务器发送的标头至少还需要包含blob:在其源列表中：img-src 'self' data: blob:.