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

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 */

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

Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

和

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-AklvVxShqs4WBi3vUz7qSiPkes2rSVGoNyoZXYVnSA8='), or a nonce ('nonce-...') is required to enable inline execution.

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

Answer 1

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

app.use(helmet());

Helmet 是一个非常简洁的模块，旨在让您保护您的服务器免受最常见的攻击媒介的侵害，而无需担心太多细节。 las，作为任何好的安全工具，它默认在 'paranoid mode' 中运行。这是这条小线实际上相当于：

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 header values 发送的默认值：

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: { ... }
    },
  })
);

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

Content Security Policy error while loading a script

javascript

node.js

pug

content-security-policy