content-security-policy - 具有内联样式的 svg 的内容安全策略

Question

我有以下 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>

它有内联样式，内容安全策略提示以下警告:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-n9prShQTue5kpNbWK2Rpxv1agUjurIm2Wkpn0y7gOvU='), or a nonce ('nonce-...') is required to enable inline execution.

10localhost/:13 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-hyCd2mGzJH6FFMa/YKxkUO5p7ntTtWZ4+813FvHVP5w='), or a nonce ('nonce-...') is required to enable inline execution.

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

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

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

Answer 1

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

1) 使用 CSP 随机数

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

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