Youtube 嵌入：不安全的 JavaScript 尝试访问框架

Question

我们有一个 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。

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

  }

Answer 2

如果您在解决该 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>

希望这会有所帮助。

Answer 3

我投票支持 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 警告，并且您的代码应该会通过验证。

Answer 4

不安全的 JavaScript 尝试访问框架错误与您的页面未呈现无关。标记损坏（例如，缺少 </iframe>）是最可能的原因。

至于不安全的 JavaScript 尝试访问框架错误，您有几个选择：

1. 最简单的解决方案是使用 IFrame Player API 而不是手动添加 iframe 标记。 API 是一段 JavaScript，为您生成 iframe 标记并添加将（或应该）消除帧访问错误的参数。以下是IFrame Player API to load a player的使用说明。

2. 手动解决方案是构建<iframe> 标记并将&origin=http://example.com 参数附加到URL。引用：

作为一项额外的安全措施，您还应该包括来源 URL 的参数，指定 URL 方案（http:// 或 https://） 和您的主机页面的完整域作为参数值。而原产地 是可选的，包括它可以防止恶意第三方 JavaScript 被注入你的页面并劫持你的控制权 YouTube 播放器。

Answer 5

安全错误不太可能破坏您的页面。看起来错误是在 YouTube 框架内发生的，这意味着在最坏的情况下，框架的内容会被弄乱。

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

错误必须在您的标记中的其他位置。有机会看到一些示例标记吗？

[编辑]

错误也可能出现在嵌入代码标记中。或者，如果任何脚本标签直接包含在页面上（而不是 iframe 中），它可能就在那里。

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