内联样式的 svg 内容安全策略

Posted 2023-05-09

【中文标题】内联样式的 svg 内容安全策略

【英文标题】：content security policy for svg with inline style

【发布时间】：2019-01-19 06:57:16

【问题描述】：

我有以下 svg 图片：

<svg viewBox="0 0 679.26666 170.12"><title id="title">Disclosure Scotland</title>
  <desc id="descA">Main Image</desc><defs id="defs6"></defs><g transform="matrix(1.3333333,0,0,-1.3333333,0,170.12)" id="g10">
     <g transform="scale(0.1)" id="g12">
         <path id="path14" style="fill:#354a8e;fill-opacity:1;fill-rule:nonzero;stroke:none" d="L 4424.6,237.121">
         </path>
     </g>

 </svg>

它具有内联样式，内容安全策略抱怨以下警告：

拒绝应用内联样式，因为它违反了以下内容 内容安全策略指令：“style-src 'self'”。无论是 'unsafe-inline' 关键字，一个哈希 ('sha256-n9prShQTue5kpNbWK2Rpxv1agUjurIm2Wkpn0y7gOvU=')，或随机数 ('nonce-...') 是启用内联执行所必需的。

10localhost/:13 拒绝应用内联样式，因为它违反了 遵循内容安全策略指令：“style-src 'self'”。 'unsafe-inline' 关键字，哈希 ('sha256-hyCd2mGzJH6FFMa/YKxkUO5p7ntTtWZ4+813FvHVP5w=')，或随机数 ('nonce-...') 是启用内联执行所必需的。

我可以通过像这样配置styleSrc 来消除该错误：

app.use(
  helmet.contentSecurityPolicy(
    directives: 
      defaultSrc: ["'self'"],
      styleSrc: ["'self'", "'unsafe-inline'"]
    
  )
);

我可以为 svg 配置内联样式吗？

【参考方案1】：

不只是针对 SVG，不。 CSP 不允许这种类型的精细控制。你可以做的是：

1) 使用 CSP 随机数

2) 使用类或 ID（以及样式表中的相应 CSS）

3) 使用 javascript 直接修改 CSS https://***.com/a/29089970/339440

【讨论】：

第三个选项在 Firefox 中失败并出现 CSP 错误。可能的原因可能是 svg 元素具有不同的命名空间。这是预期的行为还是实现错误？

有什么原因不能将 svg 的样式添加到样式表中？

我相信它应该可以工作。我个人倾向于使用 jQuery，但 jQuery 本身会按照链接答案中的描述操作 CSSOM

在我的情况下，确切的步骤顺序有点不同。我创建了一个问题 - ***.com/questions/51939184/…

一些 SVG 来自出版商，并且包含其中的样式。因此，每次更新时不断编辑和重新编辑第 3 方 SVG，以将其样式移动到 CSS 表，这是浪费时间和大满贯。必须开发一个完整的系统只是为了让 SVG 快乐，这是一种痛苦。 Shame CSP 没有“允许自托管 svg”设置。