使用随机数时，为什么我无法绕开CSP阻止nunjucks中的javascript代码 [英] Why can't I get around my CSP blocking my javascript code in nunjucks when I use a nonce

问题描述

我试图让用户在找不到404时返回到先前的屏幕，但我的CSP正在阻止我.

I’m trying to allow the user to return to their previous screen when they get a 404 not found, but my CSP is stopping me.

使用随机数似乎是解决问题的办法，但我无法让事情顺利.

Using nonce seems to be the way around it, but I can’t get the blessed thing to work.

理想情况下，我想将现时添加到我的href中，但是我不确定这是否可行.另外，我想从404文件中运行一些javascript，但似乎并没有提高我的现时价值.

Ideally, I’d like to add the nonce to my href, but I’m not sure that’s do-able. Alternatively, I’d like to run some javascript from the 404 file, but it doesn’t seem to be picking up the value of my nonce.

这是我在头盔csp中设置随机数的方法:

This is how I set up the nonce in helmet-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页面中，我试图返回上一页:

In the nunjucks 404 page, I’m trying to go back to previous page:

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

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

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

And at the bottom, I have my script tags set up thusly:

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

在进入404页面时，Chrome出现以下错误:eligibilixxxty-sf-debt:38拒绝执行内联脚本，因为它违反了以下内容安全策略指令:"script-src'self''nonce-a8ff45c6cc9b12df8111202f13d1c000'".要启用内联执行，要么使用哈希('sha256- + 6WnXIl4mbFTCARd8N3COQmT3bJJmo32N8q8ZSQAIcU =')，要么使用随机数(nonce)('nonce -...').

On landing on my 404 page, Chrome spews up the following error: eligibilixxxty-sf-debt:38 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-a8ff45c6cc9b12df8111202f13d1c000'". Either the 'unsafe-inline' keyword, a hash ('sha256-+6WnXIl4mbFTCARd8N3COQmT3bJJmo32N8q8ZSQAIcU='), or a nonce ('nonce-...') is required to enable inline execution.

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

And clicking the href link gets this response: Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-a8ff45c6cc9b12df8111202f13d1c000'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

有什么想法我要去哪里吗?

Any ideas where I’m going wrong?

推荐答案

< a href =" javascript:history.go(-1);"> 这是一个javascript导航，它(以及标记中的内联事件处理程序)需要强制性的'unsafe-inline'，并且不能通过'nonce-value'令牌被允许.为此目的提供了'unsafe-hashhes'令牌，但它尚未在浏览器中实现，现在已实现！请参阅下面的更新.

<a href="javascript:history.go(-1);"> it's an javascript-naviagtion, it (as well as inline event handlers in the tags) requires mandatory 'unsafe-inline' and cannot be allowed via 'nonce-value' token. 'unsafe-hashes' token provided for such purposes, but it's not implemented into browsers yet it's implemented now! Pls see update below.

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

You have only one way - remove the handler from the tag:

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

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

根据您的喜好，您可以将addEventListener()与箭头功能结合使用:

To your taste you can use addEventListener() with arrow funct:

<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 都为都支持'unsafe-hashhes'令牌内联事件处理程序和内联样式.

Chrome 85 and Firefox 81 do support 'unsafe-hashes' token both for inline event handlers and for inline styles.

这篇关于使用随机数时，为什么我无法绕开CSP阻止nunjucks中的javascript代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！