时间戳

首页 > 解决方案 > 如何在 ExpressJS 中添加内容安全策略以从 CDN 加载外部 JS 文件？

javascript - 如何在 ExpressJS 中添加内容安全策略以从 CDN 加载外部 JS 文件？

问题描述

在 ExpressJS 中，HTML 文件按如下方式加载，

app.use(express.static(__dirname + '/src/templates/'));

在 HTML 中，这是我的带有内容安全策略的元标记，

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://cdnjs.cloudflare.com 'unsafe-inline' 'unsafe-eval' fonts.gstatic.com fonts.googleapis.com kit.fontawesome.com; img-src 'self' data:; object-src 'none'; require-trusted-types-for 'script'; script-src 'self' cdnjs.cloudflare.com">

我正在尝试从外部源加载以下 JS 文件，

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a4ff515084.js" crossorigin="anonymous"></script>

但是我已经在 CSP 元标记中指定了它们，但是仍然出现以下错误，并且外部 JS 文件没有被加载。

控制台错误

我可以看到一些问题，

控制台问题

对此的任何帮助将不胜感激。

标签： javascriptexpresscontent-security-policy

解决方案

您同时拥有 2 个内容安全策略：

  1. 第一个通过<meta http-equiv="Content-Security-Policy" content="...">
  2. 第二个由 Helmet 4 发布（它启用了默认 CSP）。

来自多个 CSP 的指令规则与逻辑“AND”相结合，因此更具限制性的 CSP 是行为。

使用 Helmet 配置 CSP HTTP 标头（首选方式），或使用元标记，bot 不能同时使用。

推荐阅读