嵌入YouTube:不安全的JavaScript尝试访问框架

| 我们有一个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。   域,协议和端口必须   比赛。 我已经用谷歌搜索了很多,人们似乎在说它是无害的并且忽略了它。这似乎是错误的,在我们的情况下,它实际上破坏了页面。 如果我们更改应用程序,以便通过ajax回调动态嵌入视频(用户单击Wicket AjaxLink),我们仍然会在控制台中收到错误,但至少页面会完全呈现。不幸的是,这对我们不起作用,因为我们需要在用户首次点击页面时默认加载视频。 编辑:我应该补充一点,尽管错误消息是从Chrome控制台获取的,但该错误似乎影响了我尝试过的每个浏览器:Chrome,Safari和Firefox。     
已邀请:
        该安全错误不太可能破坏您的页面。看来错误发生在YouTube框架内,这意味着在最坏的情况下,框架的内容会弄乱。 外部页面中的框架/ iframe在任何情况下都不会影响父文档的内容,除非它们来自相同的域和端口号。这是浏览器安全性的硬性规则之一。 该错误必须在标记中的其他位置。有机会看到一些示例标记吗? [编辑] 该错误也可能在嵌入代码标记中。或者,如果任何脚本标签直接包含在页面上(而不是iframe中),则可能在该页面中。 通常,当发生此类问题时,是由于某个地方的标签未封闭,但也可能是Javascript。     
        如果您在解决该JavaScript错误时遇到问题,则可以尝试使用YouTube的旧嵌入代码。单击嵌入后,每个YouTube视频上都有一个选项。您将不会遇到该错误,因为它不使用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警告。但是,当我验证代码时,我发现了错误。 所以我的答案是 使用YouTube的嵌入代码时,请选中“使用旧的嵌入代码”复选框,这样您就不会使用iframe。 为了使代码有效,您需要添加...。
type=\"movie\"
data=\"http://SAME YOUTUBE URL USED IN THE FIRST PARAM ELEMENT/\"
到OBJECT元素。然后使PARAM元素自动闭合(而不是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警告,并且您的代码应该经过验证。     
        不安全的JavaScript尝试访问框架错误与页面未呈现无关。标记损坏(例如缺少
</iframe>
)是最可能的原因。 对于不安全的JavaScript尝试访问框架错误,您有几种选择: 最简单的解决方案是使用IFrame Player API,而不是手动添加iframe广告代码。该API是一段JavaScript,可为您生成iframe标记并添加将(或应该)消除帧访问错误的参数。以下是使用IFrame Player API加载播放器的说明。 手动解决方案是构建
<iframe>
标签并将
&origin=http://example.com
参数附加到URL。引用:   作为一种额外的安全措施,您还应该包括来源   URL的参数,指定URL方案(http://或https://)   并以您的主页的完整域作为参数值。起源时   是可选的,包括防止恶意的第三方   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
            }
        }));
    }

  }
    

要回复问题请先登录注册