web-dev-qa-db-ja.com

Youtube埋め込み：安全でないJavaScriptがフレームにアクセスしようとしています

YouTubeの埋め込みビデオを含むページを備えたWicketアプリがあります。ビデオは埋め込まれて再生されますが、どうやらページの残りの部分がレンダリングされないようです-DOM要素が来ているようですafterマークアップ。

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をクリックする）を介して動的に埋め込まれるようにアプリを変更しても、コンソールでエラーが発生しますが、少なくともページは完全にレンダリングされます。ユーザーが最初にページにアクセスしたときにデフォルトでビデオをロードする必要があるため、残念ながらこれは機能しません。

Edit：エラーメッセージはChromeコンソールから取られましたが、バグはすべてに影響するようです私が試したブラウザ：Chrome、Safari、Firefox。

javascriptiframeyoutubewicket
55
George Armhold

セキュリティエラーによってページが破損することはほとんどありません。 YouTubeフレーム内からエラーが発生しているようです。これは、最悪の場合、フレームのコンテンツが台無しになることを意味します。

外部ページからのフレーム/ iframeは、同じドメインおよびポート番号からのものでない限り、いかなる状況でも親ドキュメントのコンテンツに影響を与えることはできません。これは、ブラウザのセキュリティの厳しいルールの1つです。

エラーはマークアップの他の場所にある必要があります。マークアップの例を見るチャンスはありますか？

[編集]

エラーは埋め込みコードのマークアップにもある可能性があります。または、スクリプトタグが（iframeではなく）ページに直接含まれている場合、そこにある可能性があります。

通常、このような問題が発生するのは、閉じられていないタグが原因の場合ですが、Javascriptの場合もあります。

24
Andrew Curioso

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

お役に立てれば。

7
Jonathan Torres

彼のコードがJavascriptの警告を止めたので、私はジョナサン・トーレスの答えに投票しました。しかし、コードを検証したときにエラーを発見しました。

だから私の答えはこれです...

YouTubeの埋め込みコードを使用する場合は、「古い埋め込みコードを使用する」チェックボックスをオンにして、iframeを使用しないようにします。

コードを検証するには、追加する必要があります...

type="movie"

そして

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

に 目的 素子。それから パラム 自己閉鎖要素（ただし、 埋め込み 素子）。

これにより、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の警告を受け取らないようにし、コードを検証する必要があります。

5
adriandhart

安全でないJavaScriptによるフレームへのアクセス試行エラーは、ページがレンダリングされないこととは関係ありません。破損したマークアップ（例：</iframe>）が最も可能性の高い理由です。

安全でないJavaScriptがフレームにアクセスしようとするエラーについては、いくつかのオプションがあります。

  1. 最も簡単な解決策は、iframeタグを手動で追加する代わりにIFrame Player APIを使用することです。 APIは、iframeタグを生成し、フレームアクセスエラーを排除する（または排除する）パラメーターを追加するJavaScriptの一部です。 IFrame Player APIを使用してプレーヤーを読み込む を使用する手順を次に示します。

  2. 手動の解決策は、<iframe>タグと&Origin=http://example.comパラメータをURLに。見積もり：

追加のセキュリティ対策として、URLスキーム（http：//またはhttps：//）とホストページの完全なドメインをパラメーター値として指定して、OriginパラメーターをURLに含める必要があります。 Originはオプションですが、悪意のあるサードパーティのJavaScriptがページに挿入されたり、YouTubeプレーヤーのコントロールが乗っ取られたりすることを防ぎます。

2
Salman A

私にとっては、次のコードを使用して機能しました： https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

修正した行には、2つのアスタリスク**codeが付いた単語marketが表示されます。

これから：

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

  }
0
pachermann