当我使用 nonce 时，为什么我不能绕过我的 CSP 在 nunjucks 中阻止我的 javascript 代码答案

【问题标题】：Why can't I get around my CSP blocking my javascript code in nunjucks when I use a nonce当我使用 nonce 时，为什么我不能绕过我的 CSP 在 nunjucks 中阻止我的 javascript 代码
【发布时间】：2020-12-29 03:00:00
【问题描述】：

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

使用 nonce 似乎是解决问题的方法，但我无法让幸运的事情发挥作用。

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

这就是我在helmet-csp中设置nonce的方式：

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-...”）。

任何想法我哪里出错了？

【问题讨论】：

你有一个类型。您需要在属性名称与其值之间使用=，而不是-。
嗨昆汀。相应地更新了html，但它仍然无法正常工作，
您正在为您的 JS 代码使用 style 标签而不是 script 标签...

标签： javascript content-security-policy nonce

【解决方案1】：

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

你只有一种方法——从标签中删除处理程序：

<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 和 inline styles 的“不安全哈希”令牌。

【讨论】：