nodejs / reactjs SPA中的内容安全策略实现？

Question

大家好，

我刚刚开始在我的网站开发中实施 CSP。 我有 Nodejs/express 服务器，它为 react js 和 redux 和 react router 4 提供服务 我已经为前端使用了创建反应应用程序

我发现在 nodejs 中有一个名为 helmet 和 csp 的模块，我已经实现了它们 我设法得到了响应头，如下图所示

但除非我添加元标记，否则前端应用程序中没有发生任何事情

<meta http-equiv="Content-Security-Policy" content=" frame-src 'none'">

通过这个元标记，我能够成功地不在页面中加载任何 iframe，但没有标记就无法做到这一点

这是我的问题

1. 我的应用中是否需要 nodejs 头盔模块？

2. 如果是这样，那么如何将 nodejs 头盔模块与我的 react 应用程序集成

3. 在 index.html 中使用 CSP 的元标记是首选方式

   感谢任何帮助

Answer 1

在您的示例中，头盔设置的标头：x-frame-options 的值为 'SAMEORIGIN'，在您的元标记中为 'none'。他们只是有不同的价值观，这就是不同的行为。

只需更改配置：

// ... code to create your express instance here

app.use(helmet({
   frameguard: {
   action: 'deny'
 }
 // other helmet settings...
}));

// other app middleware and starting express here...

始终使用 HTTP 标头而不是元标记。元标记只是 DOM 元素，因此可以被篡改。使用标头并不那么容易，通过使用标头您要求浏览器遵守您的 CSP。

RFC 7034:

此外，X-Frame-Options 必须作为 HTTP 标头字段发送，并且 当使用 meta
声明时，用户代理会显式忽略 http-equiv 标记。