头盔 CSP 无法正常工作？

Posted 2023-02-19

【中文标题】头盔 CSP 无法正常工作？

【英文标题】：Helmet CSP not working correctly?

【发布时间】：2018-12-30 09:11:27

【问题描述】：

使用 Express 分发的 Vue SPA。

这是我在快递中的头盔代码

app.use(helmet.contentSecurityPolicy(
  directives: 
   defaultSrc: ["'self'"],
   styleSrc: ["'self'","'unsafe-inline'" ,'unpkg.com', 'cdn.jsdelivr.net', 
   'fonts.googleapis.com', 'use.fontawesome.com'],
   scriptSrc: ["'self'","'unsafe-inline'",'js.stripe.com'],
   frameSrc: ["'self'",'js.stripe.com'],
   fontSrc:["'self'",'fonts.googleapis.com','fonts.gstatic.com','use.fontawesome.com','cdn. joinhoney.com']
 
));

这样做不会在浏览器控制台中产生错误，但我的页面加载为空白，我是否遗漏了什么？

这是我试图在我的 index.html 中导入的东西

<script src="https://js.stripe.com/v3/"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700%7CMaterial+Icons' rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

【问题讨论】：

很难准确诊断这里发生了什么。您可能遇到了Vue + CSP issues。无论如何，请尝试删除 helmet.contentSecurityPolicy 并查看是否可以修复它。然后尝试逐个添加它的一部分，直到重现问题。

【参考方案1】：

通过将“'unsafe-eval'”添加到我的 scriptSrc 解决了我的问题

【讨论】：

您应该查看开发人员工具中的网络和控制台选项卡，看看哪些请求被阻止了，然后只将您需要的那些来源添加到script-src。虽然它并没有完全否定这些好处，但添加“unsafe-eval”确实会减少 CSP 的许多好处。