内容安全策略块 Vue.js

Question

我正在使用 express.public() function 在我的 node.js 服务器中提供 HTML 页面。

我将此添加到我的 html 页面中：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

Chrome 给了我一个 Content-Security-Policy 给我。

我在我的节点 index.js 中使用了这个中间件

app.use(morgan('tiny'));
app.use(helmet());
app.use(cors());
app.use(express.json());
app.use(express.static("./public"));

我的应用程序标题：

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

如何在没有任何 SecurityPolicy 的情况下添加此脚本

解决了

我从我的项目中删除了“头盔”。 Helmet 阻止了除绝对域之外的所有 cdn 和脚本。

Answer 1

内容安全策略在 html 文件中设置，或者由服务于 html 的软件（例如 Nginx，Apache）设置。

目前你有：default-src 'self'，这意味着你告诉浏览器它只能向自己的域发出请求。

您需要将https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js添加到它可以访问的域列表中。

那将是这样的：

Content-Security-Policy: default-src 'self';script-src 'self' https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js; base-uri 'self';block-all-mixed-content;font-src 'self' https: data:;frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests

所以 default-src: self 将默认设置为将请求限制在您自己的域中。

script-src 'self' https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js覆盖了这一点，并专门针对脚本将请求限制在您的域和 url 中。

这有很多细节和例子： https://content-security-policy.com

Answer 2

除了silent-tiger说的，我觉得你应该先搞清楚是哪个中间件负责添加这个内容策略。 为此，请禁用所有中间件（除了 express static），然后逐个添加其他中间件，直到您再次看到内容安全策略标头。

如果您找到了哪个中间件负责，那么您就知道应该配置哪个中间件。