1

我有一个 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.shandillia.com/browserconfig.xml时，控制台中会出现以下内容：

拒绝加载图像 'data:image/svg+xml,http://www.w3.org/2000/svg' fill='%23909090' width='10' height='10'>' 因为它违反了遵循内容安全策略指令：“img-src 'self' *.google-analytics.com”。

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

PS：有没有办法在我的指令中只允许这个特定的 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'"]
    }
  }));

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

4

1 回答 1

1

这似乎是 Chrome 中的一个错误。它会发生在您在 Chrome 中导航到（打开）且没有与之关联的样式表的任何 XML 文件中。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>在这种情况下，Chrome（出于其自身内部目的）从或尝试加载一个显示三角形图像。

如果您没有 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 提供的，也不意味着它一定是安全的。

于 2019-04-04T17:28:44.883 回答