React 应用嵌入 Iframe 时被阻止

Question

我正在嵌入一个使用 .NET 6 React 模板构建的 React-.NET 6 webapp。当我运行该应用程序时，React UI 呈现良好。但是，当我将指向部署的 webapp 的链接放在 iframe 中时，例如

<iframe src="https://myapp.com" title="My app embedded"></iframe>

，我得到一个空白屏幕和如下消息：

在 Edge/Chrome 中：

Refused to frame 'https://myapp.com' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

附留言：

This content is blocked. Contact the site owner to fix the issue.

在 Firefox 中：

Content Security Policy: The page’s settings blocked the loading of a resource at https://myapp.com (“default-src”).

Firefox 在浏览器中也只是空白。

我正在使用

http-proxy-middleware

来允许 React 和 .NET 之间的通信，但不知道为什么我会遇到这个问题或者我能做些什么来解决它。

我确实尝试在我的

"homepage": "."

中添加

package.json

，但是没有效果。

我确实尝试将我的

setupProxy.js

文件更改为以下内容，但是没有效果。

module.exports = function (app) {
  const appProxy = createProxyMiddleware(context, {
    target: target,
    secure: false,
    changeOrigin: true,
    onProxyRes: function (proxyRes, req, res) {
      proxyRes.headers["Access-Control-Allow-Origin"] = "*";
    },
  });

  app.use(appProxy);
};

我不知道我在配置中哪里出错了，认为这是前端配置问题，但不确定这不是.NET配置问题。

谢谢！

Answer 1

您的站点上设置了内容安全策略，可能是默认策略，可防止您嵌入其他来源的内容。您将需要找到内容安全策略的设置方式并对其进行修改以允许框架。现在的政策好像是

Content-Security-Policy default-src 'self'

您需要将其更改为

Content-Security-Policy default-src 'self'; frame-src myapp.com;