SvelteKit异步加载风格的严格CSP (无不安全内联) %sveltekit.nonce%？

Question

当使用没有SvelteKit app.html的严格内容安全策略时，可以在unsafe-inline中异步加载样式吗？

假设我使用了一个script-src: 'self'指令，并且我想用该模式异步加载一些样式

<link rel="preload" as="style" href="/styles.css" onload="this.rel='stylesheet'" />

这将产生一个错误。

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令："script-src 'self‘sha256-.’

我的第一个想法是以某种方式抓住它，然后注入它，但是：

• %sveltekit.nonce%是无文件
• nonce是一个脚本标记属性

似乎我应该在没有onload的情况下重写onload标记，然后分别设置事件侦听器。但当我用一个

<script nonce="%sveltekit.nonce%">console.log("hello")</script>

生成时出现以下错误

如果页面模板包含%sveltekit.nonce%，则无法使用预录制

这是可能的，还是因为我在app.html，这是一种边缘情况？

Answer 1

在我的例子中，由于脚本不会改变，我可以使用散列来白名单它。

所以最后我可以让它像这样工作：

• 从onload标记中删除link属性：

<link id="styles" rel="preload" as="style" href="/styles.css" />

• 将load侦听器放在app.html中的script标记中

<script>
const styles = document.getElementById('styles');
window.addEventListener('load', (e) => {
    styles.setAttribute('rel', 'stylesheet');
});
</script>

• 生成上述脚本的散列，例如使用这个工具，并将其添加到白名单中：

kit: {
    ...,
    csp: {
      mode: "auto",
      directives: {
        "script-src": [
          "self",
          "sha256-...",
        ],
      },
    },
  },

这样我就可以获得异步加载的速度和csp的安全性的好处。

Answer 2

您有一个内联事件处理程序

onload="this.rel='stylesheet'"

您应该在一个单独的.js文件中用事件侦听器重写它。否则，您将不得不在script-src中添加“不安全-内联”。您也可能允许使用“不安全散列”和散列，但还不是所有浏览器都支持“不安全散列”。