YouTubeembedded:不安全的JavaScript尝试访问框架

我们有一个Wicket应用程序,其中包含一个embeddedYoutubevideo的页面。 videoembedded并播放正常,但显然它会导致页面的其他部分无法呈现 – 看起来embedded的DOM元素不会显示在页面上,尽pipe处于标记状态。

在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 。 域,协议和端口必须匹配。

我已经把这个数字用了很多,人们似乎在说这是无害的 ,而忽略它。 这似乎是错误的,在我们的情况下,它实际上打破了页面。

如果我们改变我们的应用程序,以便通过ajaxcallback(用户点击一个Wicket AjaxLink)dynamicembeddedvideo,我们仍然在控制台中得到错误,但至less该页面完全呈现。 不幸的是,这不适合我们,因为我们需要在用户第一次打开页面时默认加载video。

编辑 :我应该补充一点,虽然错误信息是从Chrome控制台中获取的,但是这个错误似乎影响了我尝试过的所有浏览器:Chrome,Safari和Firefox。

安全错误不太可能破坏你的页面。 它看起来像是在YouTube框架内发生的错误,这意味着在最糟糕的情况下,框架的内容将会混乱。

来自外部页面的frame / iframe不能在任何情况下影响父文档的内容,除非它们来自相同的域和端口号。 这是浏览器安全的硬性规定之一。

该错误必须在您的标记中的其他地方。 有看到一些例子标记的机会吗?

[编辑]

该错误也可能在embedded代码标记中。 或者,如果任何脚本标记直接包含在页面中(而不是在iframe中),它可能在那里。

通常当这样的问题发生时,这是因为某个地方有一个未封闭的标签,但它也可能是Javascript。

如果您在解决JavaScript错误时遇到问题,可以尝试使用YouTube的旧embedded代码。 一旦你点击embedded,这是每个YouTubevideo的选项。 你不会有这个错误,因为它不使用iframe。 代码看起来像这样:

 <object width="560" height="315"> <param name="movie" value="http://www.youtube.com/v/9DXL9vIUbWg?version=3&amp;hl=en_US&amp;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&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed> </object> 

希望这可以帮助。

我投了Jonathan Torres的回答,因为他的代码停止了Javascript的警告。 然而,当我validation代码时,我发现错误。

所以我的答案是…

在使用YouTube的embedded代码时,勾选“使用旧embedded代码”checkbox,以免使用iframe。

为了使代码validation您需要添加….

 type="movie" 

 data="http://SAME YOUTUBE URL USED IN THE FIRST PARAM ELEMENT/" 

OBJECT元素。 然后使PARAM元素自动closures(但不是EMBED元素)。

这应该使你的YouTube代码看起来像这样…

 <object width="560" height="315" type="movie" data="http://www.youtube.com/v/9DXL9vIUbWg?version=3&amp;hl=en_US&amp;rel=0"> <param name="movie" value="http://www.youtube.com/v/9DXL9vIUbWg?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <embed src="http://www.youtube.com/v/9DXL9vIUbWg?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed> </object> 

那么你应该没有得到Javascript的警告,你的代码应该validation。

不安全的JavaScript尝试访问框架错误与您的网页无法呈现无关。 损坏的标记(例如,缺less</iframe> )是最可能的原因。

至于不安全的JavaScript尝试访问帧错误,你有几个select:

  1. 最简单的解决scheme是使用IFrame播放器API,而不是手动添加iframe标签。 API是一段为您生成 iframe标记的JavaScript,并添加将(或应该)消除帧访问错误的参数。 以下是使用IFrame Player API加载播放器的说明 。

  2. 手动解决scheme是构build<iframe>标记并将&origin=http://example.com参数追加到URL。 引用:

作为额外的安全措施,您还应该在URL中包含origin参数,指定主机页面的URLscheme(http://或https://)和完整域作为参数值。 尽pipe来源是可选的,包括防止恶意的第三方JavaScript被注入到您的页面并劫持您的YouTube播放器的控制权。

对我来说,它通过使用代码在这里工作: https : //developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

我固定的行看到用2个星号代码市场的话:

由此:

 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 } })); } }