如何在 express 中配置 Helmet 包的 Content-Security-Policy 以允许跨站点 iframe 和跨站点脚本？答案

【问题标题】：How to configure Content-Security-Policy of Helmet package in express to allow cross site iframe and cross site scripting?如何在 express 中配置 Helmet 包的 Content-Security-Policy 以允许跨站点 iframe 和跨站点脚本？
【发布时间】：2021-09-04 20:33:51
【问题描述】：

更新细节以了解更多： *在我的项目中，用户上传 html 主题。对于每个用户，如果他们进行身份验证，我将在他们请求的同一主题文件夹中为经过身份验证的用户创建一个公共静态文件夹。然后在前端有一个编辑器，他们可以在其中编辑 html 主题内容。我正在尝试使用来自后端的静态链接的 iframe 在编辑器中显示 html 主题。但问题是我无法将脚本添加到 iframe 中的 html 主题。就是说权限被拒绝。我该如何解决这个问题？

我在后端使用 express，在前端使用 nextjs。我已经在头盔中间件中添加了这段代码。

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        'connect-src': ["'self'", 'http://localhost:3000'],
        'default-src': "'self'",
        'frame-ancestors': ["'self'", 'http://localhost:3000'],
        sandbox: ['allow-forms', 'allow-scripts'],
        'script-src': ["'self'", 'http://localhost:3000'],
 
      },
    },
  })
);

对于跨站脚本，

app.use(xss())

但 iframe 中仍然出现错误。

从后端我试图允许在前端的 iframe 中使用路由。由于两台服务器在 localhost 中具有不同的端口，因此违反了跨站点嵌入和脚本编写。所以，我正在使用头盔和 xss 包。我需要帮助来配置它。

我正在使用 iframe 的 onload 属性来检查它是否已加载，然后从前端向 iframe 注入另一个脚本。

【问题讨论】：

跨站点 iframe 访问受 Same Origin Policy 监管，而非内容安全策略 (CSP)。 CSP 可以防止 XSS，但不能故意允许它。
如何让某些域能够在我的快速服务器中执行跨站点脚本
“跨站点脚本”是指“跨域脚本”。对同一域的访问不计为跨站点脚本。域子域之间的访问也可以绕过CORS。
在我的项目中，用户上传了 html 主题。对于每个用户，如果他们进行身份验证，我将在他们请求的同一主题文件夹中为经过身份验证的用户创建一个公共静态文件夹。然后在前端有一个编辑器，他们可以在其中编辑 html 主题内容。我正在尝试使用来自后端的静态链接的 iframe 在编辑器中显示 html 主题。但问题是我无法将脚本添加到 iframe 中的 html 主题。就是说权限被拒绝。我怎么解决这个问题？现在清楚了吗？这是我遇到的问题

标签： express iframe xss content-security-policy same-origin-policy

【解决方案1】：

您遇到的是同源政策问题，而不是内容安全政策问题。头盔包帮不了你。

在 iframe 和主页中设置值 document.domain = 'example.com';（在您的情况下为 example.com = 'localhost'）。它将端口号重置为 null 并将子域 any.example.com 重置为域 example.com，请参阅 test。

如果 iframe 和主页在同一个域中，您可以设置 document.domain = document.domain;。

两种变体都领先resetting port number to null。因此，您将能够使用不同的端口号访问 iframe。

【讨论】：