如何允许网页嵌入 iframe？（iframe 显示空白屏幕）答案

【问题标题】：How to allow iframe embed for a web page? (The iframe shows blank screen)如何允许网页嵌入 iframe？（iframe 显示空白屏幕）
【发布时间】：2018-07-22 22:56:50
【问题描述】：

我正在尝试将我的网络应用程序中的网址放在 iframe 中以显示在另一个网站上。

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://mywebsite.com/a-page"></iframe>

但是现在页面没有显示在 iframe 中。它完全是空白的。一些互联网研究表明，这意味着我的网络应用程序未设置为允许 iframe。我应该怎么做（例如更改我服务器上的某些设置）以允许 iframe 嵌入？

我只想允许嵌入我的网络应用程序中的某些 url 模式，即https://mywebsite/embeds/page-number。该站点使用 react.js 构建，并使用 Nginx 服务器。

【问题讨论】：

标签： javascript html nginx iframe

【解决方案1】：

客户端（本例中为浏览器）阻止了网站的呈现。您必须将尝试访问要在 iframe 中加载的内容的来源列入白名单

如果你打开开发工具，你应该会看到类似这样的东西

本文应提供您正在寻找的解决问题的解决方案： Google Content Security Policy

【讨论】：

谢谢。但这似乎不是一个实际的解决方案。其他网站需要能够嵌入我的网页，而不必每次都将我的网站列入白名单。每个人都可以嵌入来自 Youtube 和 Spotify 等网站的 iframe，而无需额外的白名单。我希望人们对我的网站也这样做。