javascript - Content-Security-Policy 阻止 Vue.js

Question

我正在使用 express.public() 函数在我的 node.js 服务器中提供 HTML 页面。
我将其添加到我的 html 页面中:

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

Chrome 给了我一个 Content-Security-Policy 给我。
我在我的 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 的情况下添加此脚本
已解决
我从我的项目中删除了“ Helm ”。 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