Youtube 嵌入：不安全的 JavaScript 尝试访问框架
Posted
技术标签:
【中文标题】Youtube 嵌入：不安全的 JavaScript 尝试访问框架【英文标题】：Youtube embed: Unsafe JavaScript attempt to access frame 【发布时间】：2011-09-14 19:51:45 【问题描述】：我们有一个 Wicket 应用，其页面包含嵌入的 Youtube 视频。视频嵌入并播放良好，但显然它会导致页面的其余部分无法呈现 - 似乎嵌入后 的 DOM 元素根本不会显示在页面上，尽管在标记。
查看 Chrome 中的错误控制台会发现：
不安全的 javascript 尝试访问 带有 URL 的框架 http://example.com/detail/COMMUNICATION/search/com-sonyericsson-hanashi 从带有 URL 的框架 http://www.youtube.com/embed/eJY7_De5opI?enablejsapi=1&autohide=1&showinfo=1。 域、协议和端口必须 匹配。
我已经用谷歌搜索了很多，人们似乎在说it's innocuous 并忽略它。这似乎是错误的，在我们的例子中它实际上破坏了页面。
如果我们更改我们的应用程序，以便通过 ajax 回调（用户单击 Wicket AjaxLink）动态嵌入视频，我们仍然会在控制台中收到错误，但至少页面可以完全呈现。不幸的是，这对我们不起作用，因为我们需要在用户第一次点击页面时默认加载视频。
编辑：我应该补充一点，虽然错误消息来自 Chrome 控制台，但该错误似乎影响了我尝试过的所有浏览器：Chrome、Safari 和 Firefox。
【问题讨论】：
我知道这是一个旧项目，但你检查过 Facebook 是如何做到的吗？他们不会每次都出错。他们使用旧的<embed> 标签，但他们在 facebook iFrame 中执行此操作（我相信我完全正确）。
对我来说似乎不是无害的。在我从 <iframe> 切换到 <embed> 代码之前，我的 JavaScript API 调用不起作用。
【参考方案1】：
对我来说，它通过使用这里的代码来工作： https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
我修复的行用 2 asterix ** code：
由此而来：
var tag = document.createElement('script');
tag.src = "**http://www.youtube.com/player_api**";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = new Array();
function **onYouTubePlayerAPIReady()**
var ids = $('div.video div');
for(var i=0; i < ids.length; i++)
players.push(new YT.Player('**yt**'+i,
height: '400',
width: '596',
videoId: $(ids[i]).attr('rel'),
events:
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
));
对此：
var tag = document.createElement('script');
tag.src = "**https://www.youtube.com/iframe_api**";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = new Array();
function **onYouTubeIframeAPIReady()**
var ids = $('div.video div');
for(var i=0; i < ids.length; i++)
players.push(new YT.Player('**player**'+i,
height: '400',
width: '596',
videoId: $(ids[i]).attr('rel'),
events:
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
));
【讨论】：
【参考方案2】：如果您在解决该 JavaScript 错误时遇到问题，可以尝试使用 YouTube 的旧嵌入代码。单击嵌入后，它是每个 YouTube 视频的一个选项。您不会出现该错误，因为它不使用 iframe。代码看起来像这样：
<object >
<param name="movie" value="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
希望这会有所帮助。
【讨论】：
这并不总是与移动浏览器上的响应式设计配合得很好。 加上 【参考方案3】：我投票支持 Jonathan Torres 的回答，因为他的代码停止了 Javascript 警告。然而，当我验证代码时，我发现了错误。
所以我的答案是这样的......
在使用 YouTube 的嵌入代码时勾选“使用旧嵌入代码”复选框，这样您就不会使用 iframe。
要使代码验证您需要添加....
type="movie"
和
data="http://SAME YOUTUBE URL USED IN THE FIRST PARAM ELEMENT/"
到 OBJECT 元素。然后使 PARAM 元素自动关闭（但不是 EMBED 元素）。
这应该使您的 YouTube 代码看起来像这样......
<object type="movie" data="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0">
<param name="movie" value="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
然后您应该不会收到任何 Javascript 警告，并且您的代码应该会通过验证。
【讨论】：
感谢您花时间解决这个问题并发布！为我工作。【参考方案4】：不安全的 JavaScript 尝试访问框架错误与您的页面未呈现无关。标记损坏（例如，缺少 </iframe>）是最可能的原因。
至于不安全的 JavaScript 尝试访问框架错误，您有几个选择：
最简单的解决方案是使用 IFrame Player API 而不是手动添加 iframe 标记。 API 是一段 JavaScript，为您生成 iframe 标记并添加将（或应该）消除帧访问错误的参数。以下是IFrame Player API to load a player的使用说明。
手动解决方案是构建<iframe> 标记并将&origin=http://example.com 参数附加到URL。引用：
作为一项额外的安全措施，您还应该包括来源 URL 的参数，指定 URL 方案（http:// 或 https://） 和您的主机页面的完整域作为参数值。而原产地 是可选的，包括它可以防止恶意第三方 JavaScript 被注入你的页面并劫持你的控制权 YouTube 播放器。
【讨论】：
尝试了第二种方法，但效果不佳。仍然收到控制台警告。谢谢。 不，这仍然会导致问题。s【参考方案5】：安全错误不太可能破坏您的页面。看起来错误是在 YouTube 框架内发生的，这意味着在最坏的情况下，框架的内容会被弄乱。
来自外部页面的框架/iframe 在任何情况下都不会影响父文档的内容，除非它们来自相同的域和端口号。这是浏览器安全的硬性规则之一。
错误必须在您的标记中的其他位置。有机会看到一些示例标记吗？
[编辑]
错误也可能出现在嵌入代码标记中。或者，如果任何脚本标签直接包含在页面上（而不是 iframe 中），它可能就在那里。
通常当这样的问题发生时，是因为某个地方的标签未闭合，但也可能是 Javascript。
【讨论】：
这听起来很糟糕，因为它非常不直观。但是，iframe 不能内联关闭，并且仍然与大多数浏览器兼容。所以不要使用/>，你需要使用></iframe>
哇，我不敢相信就是这样。我应该更清楚：我几天前写了这篇文章，基本上是同一个问题：***.com/questions/6207309/…。非常感谢，安德鲁。
不客气。我从来不明白为什么<iframe> 不能内联关闭:) 这是我最讨厌的事情之一。
iframe 不会自动关闭，因为它们可以包含要为无法呈现 iframe 的浏览器显示的内容，相当于 noscript 标记。自闭合标签在 xhtml 中很突出，但需要注意的是 - xhtml 不依赖于文档类型，而是依赖于内容类型。如果您的标头设置为传递 text/html，浏览器会将其解释为 html，而不是 xhtml，并可能导致诸如此类的呈现错误。
另外，不要使用 Javascript（例如 $.html('以上是关于Youtube 嵌入：不安全的 JavaScript 尝试访问框架的主要内容，如果未能解决你的问题，请参考以下文章