javascript - 加载脚本时出现内容安全策略错误
问题描述
我正在尝试使用 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'
,因为它违反了以下内容安全策略指令:"script-src 'self'"
。请注意,'script-src-elem' 没有明确设置,因此 'script-src' 用作后备。
和
拒绝执行内联脚本,因为它违反了以下内容安全策略指令:“script-src 'self'”。启用内联执行需要“unsafe-inline”关键字、哈希(“sha256-AklvVxShqs4WBi3vUz7qSiPkes2rSVGoNyoZXYVnSA8=”)或随机数(“nonce-...”)。
这是我第一次看到这个错误,我不知道如何解决它。有任何想法吗?
解决方案
正如评论中所证明的,这是打破这一切的代码行:
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());
是的,很多东西。弄乱您的设置的是此列表的第一项。这是该行作为Content-Security-Policy 标头 值发送的默认值:
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: { ... }
},
})
);
推荐阅读
- python - 正则表达式代码以捕获包含日期的 whatsapp 消息
- typescript - 如何遍历在 NestJs Bull 中注册的所有队列?
- r - Shiny:renderPrint 一个不带 [1] 且不带转义字符的字符串
- javascript - 两个浮点数之和返回错误值
- c# - 通过按钮单击C#减少变量
- wpf - WPF 绑定到用户控件失败
- jsf - WebLogic 12.2.1.4 JSF 1.2 ELContext 在文字表达式上引发空指针
- python - 使用共享值在 Windows 上进行 python 多处理
- r - How to use a loop in a summarise in dplyr
- python-3.x - Django ORM 使用游标对 QuerySets 进行内存优化