javascript - 当我使用随机数时，为什么我无法绕过 CSP 阻止 nunjucks 中的 javascript 代码

Question

我试图让用户在收到 404 未找到错误时返回到之前的屏幕，但我的 CSP 阻止了我。

使用随机数似乎是解决这个问题的方法，但我无法让这个幸运的东西发挥作用。

理想情况下，我想将随机数添加到我的 href 中，但我不确定这是否可行。或者，我想从 404 文件运行一些 javascript，但它似乎没有获取我的随机数的值。

这就是我在 Helm csp中设置随机数的方式:

app.locals.nonce = crypto.randomBytes(16).toString("hex");

app.use(csp({
  directives: {
    defaultSrc: ["'self'"],
    styleSrc: ["'self'"],
    scriptSrc: ["'self'", `'nonce-${app.locals.nonce}'`],
    imgSrc: ["'self'"],
    fontSrc: ["'self'"]
  }
}));

在 nunjucks 404 页面中，我正在尝试返回上一页:

{% set n = "nonce-"+nonce %}

<a nonce={{n}} href="javascript:history.go(-1);">{{ t('404:goBack')</a>

在底部，我这样设置了脚本标签:

<style nonce=app.locals.nonce>
    console.log('inside 404')
  </style>

在登陆我的 404 页面时，Chrome 会出现以下错误: eligibilixxxty-sf-debt:38 拒绝执行内联脚本，因为它违反了以下内容安全策略指令:“script-src 'self' 'nonce-a8ff45c6cc9b12df8111202f13d1c000'”。启用内联执行需要“unsafe-inline”关键字、哈希值(“sha256-+6WnXIl4mbFTCARd8N3COQmT3bJJmo32N8q8ZSQAIcU=”)或随机数(“nonce-...”)。

单击 href 链接会得到以下响应: 拒绝运行 JavaScript URL，因为它违反了以下内容安全策略指令:“script-src 'self' 'nonce-a8ff45c6cc9b12df8111202f13d1c000'”。启用内联执行需要“unsafe-inline”关键字、哈希值(“sha256-...”)或随机数(“nonce-...”)。

有什么想法我哪里出错了吗？

Answer 1

<a href="javascript:history.go(-1);">它是一个 javascript-naviagtion，它(以及标签中的内联事件处理程序)需要强制 'unsafe-inline' 并且不能通过 'nonce-value' token 来允许。 'unsafe-hashes' token 就是为了此类目的而提供的，但它尚未在浏览器中实现，现在已经实现了!请参阅下面的更新。

您只有一种方法 - 从标记中删除处理程序:

<a id="elem" href='#'>go back</a>

<script nonce=app.locals.nonce>  // place 'nonce' here
  elem.onclick = function() {
    history.go(-1);
    };
<script>

根据您的喜好，您可以将 addEventListener() 与箭头函数一起使用:

<script nonce=app.locals.nonce>
 elem.addEventListener( "click" , () => history.go(-1));
</script>

或匿名:

<script nonce=app.locals.nonce>
 elem.addEventListener("click", function() { history.go(-1); });
</script>

已更新

Chrome 85 和 Firefox 81 支持 inline event handlers 的“不安全哈希” token 和 inline styles .