加载脚本时出现内容安全策略错误

Question

我正试图使用Pug在我的应用程序中呈现一个图表，如下所示：

block content
h2 Question statistics
.col-lg-12 
script(src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js")
.chart-container
canvas#myChart2      
script.
var ctx = document.getElementById("myChart2").getContext('2d');
ctx.canvas.parentNode.style.width = '50%'
var idata = [1]    
var ilabel = [2] 
var myChart = new Chart(ctx, { /* ... etc */

这在一周左右之前加载得很好，但今天当我试图访问此功能时，图表无法呈现。我控制台中的错误是：

拒绝加载脚本'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'因为它违反了以下内容安全策略指令：CCD_ 2。请注意，"script src-elem"不是显式的设置，因此使用"script src"作为回退。

和

拒绝执行内联脚本，因为它违反了以下内容内容安全策略指令：；script src"self"；。或者"unsafe inline"关键字，哈希('sa256-AklvVxShqs4WBi3vUz7qSiPkes2rSVGoNyoZXYVnSA8='(，或nonce('none-…'(是启用内联执行所必需的。

这是我第一次看到这个错误，我不知道如何解决。有什么想法吗？

Answer 1

正如评论中所说，这是一行破坏一切的代码：

app.use(helmet());

Helmet是一个非常巧妙的模块，旨在保护您的服务器免受最常见的攻击，而无需担心太多细节。遗憾的是，作为任何一个好的安全工具，它默认在"偏执模式"下运行。这条细线实际上相当于：

app.use(helmet.contentSecurityPolicy());
app.use(helmet.dnsPrefetchControl());
app.use(helmet.expectCt());
app.use(helmet.frameguard());
app.use(helmet.hidePoweredBy());
app.use(helmet.hsts());
app.use(helmet.ieNoOpen());
app.use(helmet.noSniff());
app.use(helmet.permittedCrossDomainPolicies());
app.use(helmet.referrerPolicy());
app.use(helmet.xssFilter());

是的，很多东西。把你的设置搞砸的是这个列表的第一项。以下是通过以下行作为内容安全策略头值发送的默认值：

default-src 'self';
base-uri 'self';
block-all-mixed-content;
font-src 'self' https: data:;
frame-ancestors 'self';
img-src 'self' data:;
object-src 'none';
script-src 'self';
script-src-attr 'none';
style-src 'self' https: 'unsafe-inline';
upgrade-insecure-requests

同样，这是有道理的，因为Helmet对你使用的外部实体一无所知，也不知道你对这些实体的信任程度。您负责通过添加哈希信息或在配置中列出受信任的源来提供这些数据。例如：

helmet.contentSecurityPolicy({
useDefaults: false,
directives: {
defaultSrc: ["'self'"],
scriptSrc: ["'self'", "example.com"], // scripts from example.com are now trusted
objectSrc: ["'none'"],
upgradeInsecureRequests: [],
},
})

您可以单独配置每个模块，也可以直接将此配置添加到头盔中：

app.use(
helmet({
contentSecurityPolicy: {
useDefaults: false,
directives: { ... }
},
})
);