CSP问题:SVG的使用被阻止，因为无法识别

Question

我在.htaccess中设置了一个严格的CSP，只允许来自域列表的内容。

示例：

Header set Content-Security-Policy "default-src 'self' 'unsafe-inline' 
https://*.mydomain.com

我想使用SVG技术来防止图像回流，它包括使用这样的东西：

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 
viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="//picsum.photos/900/600" 
alt="Lazy loading test image" />

src被CSP阻止了，我不知道如何修改CSP才能允许这样做。我尝试过使用类似data的东西：image/svg+xml*，但它被忽略了。

你知道我该怎么做吗？

感谢

Laurent

Answer 1

src被CSP阻止，我不知道如何修改CSP，以便允许这样做。

只需将data:方案添加到您的CSP

你知道我该怎么做吗？

您在构造中有一个错误的src=：

<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E"
data-src="//picsum.photos/900/600"
alt="Lazy loading test image" />

对不起，结构是正确的，这是我的错误。我很困惑src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'看起来不像真实的数据：-URL
无论如何，您需要有img-src data:(或default-src data:(才能允许数据：-图像的URL。

但是default-src 'self' 'unsafe-inline' data: https://*.mydomain.com也允许data:用于脚本——这是不安全的。因此

default-src 'self' 'unsafe-inline' https://*.mydomain.com;
img-src 'self' data: https://*.mydomain.com;

更安全一点。