页面无法通过 iframe 加载？

Question

我有一个从批量调整照片大小中获得的图像调整大小工具。我需要将其添加到我的 CMS 功能（称为“参与者中心”）中。

由于某种原因，代码本身无法在参与者中心运行（它显示为空白），但它可以在参与者中心之外的 HTML 页面中运行。所以我想也许iframe会起作用。

现在框架显示了iframe，但内容没有。

HTML：

<div id="BulkResizePhotosEmbed"></div>
<script type="text/javascript" src="https://bulkresizephotos.com/js/integration.js">
</script>
<script>
bulkresizephotos.load({ "resize_type": "exact", "resize_value": "300", "secondary_resize_value": "400", "quality_level": "0.5", "extension": "jpg", "preserve_aspect_ratio": true, "transparent_background": true, "background_color": "ffffff" });
</script>

我将上述代码放在一个单独的 html 文档中，该文档与参与者中心托管在同一服务器上。

HTML：

<iframe src="http://www.supportcbcf.com/site/PageNavigator/reus_image_resize.html"></iframe>

我还尝试将上述链接设置为安全链接 ( https)，但它仍然无法加载。我在 js 小提琴中尝试过，但它在那里也不起作用。现在我不认为参与者中心正在阻止任何 JavaScript 代码，因为它有一个温度计和动态更新的筹款资金。我查看了控制台日志，没有收到任何错误。

任何帮助将不胜感激！

谢谢

Answer 1

为了使他们的网站更安全，并避免显示在另一个网站内（这可能会降低用户体验，甚至使用户认为内容来自另一个网站），其中一些有内容安全策略，定义允许的frame-ancestors.

这允许他们通知浏览器他们只想嵌入到某些站点中。

如果您打开浏览器控制台，您将看到以下错误：

拒绝在框架中显示“https://...”，因为祖先违反了以下内容安全策略指令：“frame-ancestors 'self' *.facebook.com *.salesforce.com *.concio.net *。 google.com *.force.com facebook.com salesforce.com convio.net google.com Force.com”。

如果您网站的域名与规则不匹配，您的浏览器将阻止该页面。

以下示例说明了此功能的优点：

Imagineevilwebsite.com想要获得更多 Facebook 点赞。他们可以在自己的网站上嵌入 Facebook 页面的 iframe，制作它opacity: 0，并将其放在内容前面，并在不可见的“喜欢”按钮后面放置一个按钮。点击它的人实际上会点击“喜欢”按钮。免费点赞！这就是为什么您无法在您的网站上嵌入常规 Facebook 页面的原因。