简单 XML 文件在不存在的图像上触发 CSP 错误？

Question

我有一个具有以下 helmet-csp（处理内容安全策略以防止 XSS 和框架注入等漏洞的中间件）配置的 Express 服务器：

server.use(csp({
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", '*.google-analytics.com'],
      imgSrc: ["'self'", '*.google-analytics.com'],
      connectSrc: ["'none'"],
      styleSrc: ["'self'", "'unsafe-inline'", 'maxcdn.bootstrapcdn.com'], // Remove unsafe-inline for better security
      fontSrc: ["'self'"],
      objectSrc: ["'self'"],
      mediaSrc: ["'self'"],
      frameSrc: ["'self'"]
    }
  }));

我的根目录中还有一个 browserconfig.xml 文件，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/mstile-70x70.png"/>
            <square150x150logo src="/mstile-150x150.png"/>
            <square310x310logo src="/mstile-310x310.png"/>
            <wide310x150logo src="/mstile-310x150.png"/>
            <TileColor>#da532c</TileColor>
        </tile>
    </msapplication>
</browserconfig>

如您所见，这是一个简单的 XML 文件，没有图像数据，更不用说 SVG 了。然而，当我尝试点击 https://www.schandillia.com/browserconfig.xml 时，控制台中会抛出以下内容：

Refused to load the image 'data:image/svg+xml,http://www.w3.org/2000/svg' fill='%23909090' width='10' height='10'>' because it violates the following Content Security Policy directive: "img-src 'self' *.google-analytics.com".

请注意，XML 文件的内容也显示在浏览器屏幕中。只是控制台错误让我感到困惑。我的服务器抱怨的图像文件在哪里？

P.S.: 有什么方法可以 allow 只是这个特定的 SVG（不管它是什么，假设它是安全的并且不是恶意的，来自像 www.w3.org) 这样合法的来源在我的 imgSrc 指令中？我尝试修改我的 server.csp() 但没有成功：

server.use(csp({
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", '*.google-analytics.com'],
      imgSrc: ["'self'", 'data:', '*.google-analytics.com'],
      connectSrc: ["'none'"],
      styleSrc: ["'self'", "'unsafe-inline'", 'maxcdn.bootstrapcdn.com'], // Remove unsafe-inline for better security
      fontSrc: ["'self'"],
      objectSrc: ["'self'"],
      mediaSrc: ["'self'"],
      frameSrc: ["'self'"]
    }
  }));

这个神秘物体是什么，如何让它不再干扰浏览器？

Answer 1

这似乎是 Chrome 中的错误。您在 Chrome 中导航到（打开）的任何 XML 文件都会发生这种情况，该文件没有关联的样式表。在这种情况下，Chrome（出于其自身的内部目的）从 data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23909090' width='10' height='10'><path d='M0 0 L8 0 L4 7 Z'/></svg> 加载一个披露三角形图像 — 或尝试这样做。

如果您没有适当的 CSP 策略，Chrome 可以正常加载 data: URL 图像，不会出现错误。但是，如果您有 CSP 策略并且它不允许 data: 来源，那么浏览器将阻止加载它。

有一种方法可以让您的 CSP 允许该图像，但这种方法并不比在您的策略中指定 'unsafe-inline' 更安全。方法是将 data: 作为 img-src 指令的来源。但这会产生允许来自任何 data: URL.

图像的效果

另请注意：问题中引用的特定 data: URL 并非来自 www.w3.org。任何地方的任何 SVG 图像都会有 xmlns='http://www.w3.org/2000/svg' 部分。那只是 SVG 命名空间标识符。因此，这并不表示它是由 www.w3.org 提供的，也不表示它一定是安全的。

简单 XML 文件在不存在的图像上触发 CSP 错误？

Simple XML file triggering CSP error over a non-existent image?

xml

express

content-security-policy

helmet.js