YouTube embed: небезопасная попытка JavaScript для доступа к фрейму - PullRequest
Новая
       17

YouTube embed: небезопасная попытка JavaScript для доступа к фрейму

55 голосов
/ 14 июня 2011

У нас есть приложение 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.

Ответы [ 5 ]

24 голосов
/ 14 июня 2011

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

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

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

[править]

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

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

7 голосов
/ 13 июня 2012

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

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

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

5 голосов
/ 24 января 2013

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

2 голосов
/ 17 ноября 2012

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

Что касается небезопасной попытки JavaScript получить доступ к кадру , у вас есть несколько вариантов:

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

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

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

0 голосов
/ 14 мая 2013

для меня это сработало, используя код здесь: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

исправленные мною строки видят рынок слов с двумя звездочками ** код :

от этого: 

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

  }
...