Встраивание 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.

Ответ 1

Ошибка безопасности вряд ли нарушит вашу страницу. Похоже, что ошибка происходит из рамки YouTube, а это означает, что в худшем случае содержимое фрейма будет испорчено.

Кадр/iframe с внешней страницы не может, ни при каких обстоятельствах не влиять на содержимое родительского документа, если они не принадлежат к одному домену и номеру порта. Это одно из жестких правил безопасности браузера.

Ошибка должна быть в другом месте вашей разметки. Есть ли вероятность увидеть пример разметки?

[править]

Ошибка также может быть в разметке вставки кода. Или, если какие-либо теги script включены непосредственно на страницу (не в iframe), она может быть там.

Обычно, когда такие проблемы случаются, это происходит из-за незакрытого тега где-то, но это может быть Javascript.

Ответ 2

Если у вас возникла проблема с этой ошибкой JavaScript, вы можете попробовать использовать старый код для встраивания YouTube. Это вариант на каждом видеоролике YouTube после нажатия на него. У вас не будет этой ошибки, потому что она не использует iframes. Код будет выглядеть примерно так:

<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>

Надеюсь, это поможет.

Ответ 3

Я голосовал за ответ Джонатана Торреса, потому что его код остановил предупреждения 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, и ваш код должен проверять.

Ответ 4

Небезопасная попытка JavaScript для доступа к ошибке фрейма не имеет ничего общего с вашей рендерингом страницы. Наиболее вероятной причиной является поврежденная разметка (например, отсутствующая </iframe>).

Что касается ошибки Unsafe JavaScript для доступа к ошибке кадра, у вас есть несколько вариантов:

  • Самое простое решение - использовать IFrame Player API вместо того, чтобы вручную добавлять теги iframe. API - это часть JavaScript, которая генерирует тег iframe для вас и добавляет параметры, которые (или должны) устранять ошибку доступа к кадру. Вот инструкции по использованию IFrame Player API для загрузки игрока.

  • Решение для руководства состоит в создании тегов <iframe> и добавлении параметра &origin=http://example.com к URL-адресам. Цитата:

В качестве дополнительной меры безопасности вы также должны указать источник параметр URL, указав схему URL (http://или https://) и полный домен вашей главной страницы в качестве значения параметра. Хотя происхождение является необязательным, в том числе он защищает от вредоносных сторонних JavaScript вводится на вашу страницу и захватывает ваш YouTube.

Ответ 5

для меня это сработало с помощью кода здесь: 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
            }
        }));
    }

  }