内容安全策略阻止 Vue.js

Question

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

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

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

Chrome 给了我一个内容安全策略。

我在我的 Node 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会覆盖此内容，并专门针对脚本表示将请求限制为仅您的域和该网址。

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