使用从 vimeo/youtube 复制的 iframe 代码时出现同源错误答案

【问题标题】：Same-Origin error when using iframe code copied from vimeo/youtube使用从 vimeo/youtube 复制的 iframe 代码时出现同源错误
【发布时间】：2013-08-11 10:56:31
【问题描述】：

我为网站创建了幻灯片，用户可以将来自 vimeo 或 youtube 的视频放入其中。它工作得很好。由于当前浏览器的一些限制，我在幻灯片中显示了视频的缩略图，单击图片会打开一个带有实际视频的灯箱。我从 youtube 和 vimeo 网站完全复制了 iframe 代码，但我的控制台显示页面上每个 iframe 的错误。这是我页面上的一个示例 iframe 元素：

<iframe
    class="hide_me"
    src="http://player.vimeo.com/video/7339803"
    width="100%"
    height="100%"
    frameborder="0"
    webkitallowfullscreen=""
    mozallowfullscreen=""
    allowfullscreen="">
</iframe>

这是我在控制台中遇到的错误：

Blocked a frame with origin "http://player.vimeo.com" from accessing a frame with origin "http://my-machine-name". Protocols, domains, and ports must match.

我是不是做错了什么？

【问题讨论】：

对我来说似乎工作正常，如果您尝试 ajax url jsfiddle.net/Z7Hap，您只会收到该消息

标签： javascript html iframe same-origin-policy

【解决方案1】：

页面可以防止自己被加载到第三方网站的 iframe 中（同源策略）。

完整的概要可以在这里找到：https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

通常允许嵌入的页面通常具有不受这些限制的特定 URL，但即使是 YouTube 最近也已将它们添加到其当前的嵌入 URL，而旧的 /embed/ 方案仍然有效。也许 Vimeo 也有一个可行的替代方案？

【讨论】：