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>

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

拒绝应用内联样式，因为它违反了以下规定   内容安全策略指令：“ 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配置内联样式吗？

Answer 1

不只限于SVG，不是。 CSP不允许这种精细控制。您可以做的是：

1）使用CSP随机数

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

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

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

1 个答案: