带有外部 <use> 的 Content-Security-Policy 和 SVG

Question

我已经为 style-src 设置了以下定义的 Content-Security-Policy (CSP)：

style-src 'self' 'nonce-somenonce'

然后，在我的标记中，我包含这样的 SVG：

<svg role="img" title="Clock">
    <use xlink:href="/Content/Styles/svg/sprite.symbol.svg#icon-clock" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

外部 SVG 包含多个带路径的符号：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol viewBox="0 0 40 40" id="arrow-right" xmlns="http://www.w3.org/2000/svg">
        <path d="M29 20l-5-5v4H11v2h13v4l5-5z"/>
    </symbol>
    <symbol viewBox="0 0 22 22" id="icon-clock" xmlns="http://www.w3.org/2000/svg">
        <path fill="#c20418" class="atcls-1" d="M17.727 9.777h-5.5v-5.5a1.222 ..."/>
    </symbol>
</svg>

Chrome 拒绝允许此代码，如果没有'unsafe-inline'，我不确定如何允许它。根据这两个测试，SVG 不是一个不可替代的元素：

1. Test of CSP: 'nonce-value' - is element nonceable?
2. Test of CSP: How to make CSP compliant

我查看了 this 线程，它建议将 SVG 分组为 <style> 并对其进行随机化处理，但我不知道如何执行此操作，以及它是否适用于外部定义。

还有 this 线程建议使用 JS 设置样式，但我再次找不到这将如何与 SVG 和 <use> 一起使用。

浏览器生成的报告如下所示：

{
  "csp-report": {
    "document-uri": "https://mypage.xyz/content/styles/svg/sprite.symbol.svg",
    "referrer": "",
    "violated-directive": "style-src-elem",
    "effective-directive": "style-src-elem",
    "original-policy": "default-src 'self';script-src 'strict-dynamic' 'nonce-LwpcXyjstsjZdWhOBquhhaxTEe+TFHbaAKYGal+sV3I=' 'unsafe-inline' 'unsafe-eval' http: https:;style-src 'self' 'nonce-LwpcXyjstsjZdWhOBquhhaxTEe+TFHbaAKYGal+sV3I=' 'unsafe-inline' fonts.googleapis.com;child-src 'self';connect-src 'self';img-src 'self';frame-src 'self';object-src 'none';font-src 'self';media-src 'self';manifest-src 'self';prefetch-src 'self';worker-src 'none';base-uri 'self';form-action 'self'; frame-ancestors 'self';upgrade-insecure-requests;report-uri /api/csp-reports",
    "disposition": "report",
    "blocked-uri": "inline",
    "line-number": 1,
    "source-file": "https://mypage.xyz/content/styles/svg/sprite.symbol.svg",
    "status-code": 0,
    "script-sample": ""
  }
} 

将style-src-elem 添加到标头也不能解决问题，即使报告指出违反了该指令。这也是not implemented in Firefox。在 Chrome 中，我收到以下自相矛盾的错误，因为 nonce 已明确定义，即使在错误消息中也是如此：

拒绝应用内联样式，因为它违反了以下内容安全策略指令：“style-src-elem 'self' 'nonce-Ma4zjvbuXdD3iwOLjAXsiJ2Qqk2TvVEQlT1efIY+qgE='”。启用内联执行需要“unsafe-inline”关键字、哈希（“sha256-Ptir/SKEXaGsdPsQ11Srj5YgYg3GDQ1ZV8flKlU21lI=”）或随机数（“nonce-...”）。

Answer 1

代码如下：

<svg>
  <symbol viewBox="0 0 40 40" id="arrow-right" xmlns="http://www.w3.org/2000/svg">
    <path d="M29 20l-5-5v4H11v2h13v4l5-5z"/>
  </symbol>
</svg>

当它通过 <use> 从外部 SVG 嵌入时，not require 'unsafe-inline' 在 style-src 中肯定会这样做。
您在这个外部 SVG 的某处使用了一个 style= 属性。

由于您使用的是 CSP 报告，只需将 'report-sample' 令牌添加到 style-src 指令中，您就会看到导致违规的代码示例。

请注意，当通过 <use> 嵌入外部 SVG 时，Chrome 和 Firefox 浏览器的行为存在重大不一致。
external 嵌入的 style= 属性中的内联样式<use> 在 Firefox 中不违反 CSP，但在 Chrome 中违反它。同时，尽管 CSP 违规，Crome 仍应用内联 style=。
Inline 事件处理程序 外部 SVG 中的内置标签导致 Firefox 中的 CSP 违规并被阻止，而在 Chrome 中，这些不会导致 CSP 违规，但根本不会执行。