SecurityError:オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックしました

612
mubashermubi 2014-08-03 08:14.

<iframe>HTMLページにをロードし、Javascriptを使用してその中の要素にアクセスしようとしていますが、コードを実行しようとすると、次のエラーが発生します。

SecurityError: Blocked a frame with origin "http://www.<domain>.com" from accessing a cross-origin frame.

フレーム内の要素にアクセスできるように、解決策を見つけるのを手伝ってもらえますか?

私はこのコードをテストに使用していますが、無駄です:

$(document).ready(function() {
    var iframeWindow = document.getElementById("my-iframe-id").contentWindow;

    iframeWindow.addEventListener("load", function() {
        var doc = iframe.contentDocument || iframe.contentWindow.document;
        var target = doc.getElementById("my-target-id");

        target.innerHTML = "Found it!";
    });
});

7 answers

885
Marco Bonelli 2014-08-03 08:28.

同一生成元ポリシー

JavaScriptを使用して異なるオリジンでにアクセスすることはできません。アクセス<iframe>できれば、セキュリティ上の大きな欠陥になります。同一生成元ポリシーの 場合、ブラウザは、異なる起源のフレームにアクセスしようとするスクリプトをブロックします

アドレスの次の部分の少なくとも1つが維持されていない場合、発信元は異なると見なされます。

プロトコル://ホスト名ポート/..。

フレームにアクセスする場合、プロトコル、ホスト名、およびポートはドメインと同じである必要があります。

注:Internet Explorerは、このルールに厳密に準拠していないことがわかっています。詳細については、こちらを参照してください。

次のURLにアクセスしようとするとどうなりますか? http://www.example.com/home/index.html

URL                                             RESULT 
http://www.example.com/home/other.html       -> Success 
http://www.example.com/dir/inner/another.php -> Success 
http://www.example.com:80                    -> Success (default port for HTTP) 
http://www.example.com:2251                  -> Failure: different port 
http://data.example.com/dir/other.html       -> Failure: different hostname 
https://www.example.com/home/index.html:80   -> Failure: different protocol
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different protocol, port & hostname 

回避策

同一生成元ポリシーは、スクリプトが異なる起源のサイトのコンテンツにアクセスすることをブロックしますが、両方のページを所有している場合は、window.postMessageとその相対messageイベント使用してこの問題を回避し、次のように2つのページ間でメッセージを送信できます。

  • メインページ:

    const frame = document.getElementById('your-frame-id');
    frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');
    

    の2番目の引数は、宛先の起点についての優先順位がないpostMessage()こと'*'を示すことです。他のサイトに送信するデータの開示を避けるために、可能な場合は常にターゲットオリジンを提供する必要があります。

  • あなたの<iframe>(メインページに含まれています):

    window.addEventListener('message', event => {
        // IMPORTANT: check the origin of the data! 
        if (event.origin.startsWith('http://your-first-site.com')) { 
            // The data was sent from your site.
            // Data sent with postMessage is stored in event.data:
            console.log(event.data); 
        } else {
            // The data was NOT sent from your site! 
            // Be careful! Do not use it. This else branch is
            // here just for clarity, you usually shouldn't need it.
            return; 
        } 
    }); 
    

この方法は両方向に適用でき、メインページにもリスナーを作成し、フレームから応答を受信します。同じロジックをポップアップや、基本的にメインページによって生成された新しいウィンドウ(例:を使用window.open())にも実装できますが、違いはありません。

ブラウザで同一生成元ポリシーを無効にする

このトピックについてはすでにいくつかの良い答えがあります(私はそれらがグーグルしているのを見つけました)ので、これが可能なブラウザーについては、相対的な答えをリンクします。ただし、同一生成元ポリシー無効にするとブラウザにのみ影響することに注意してください。また、同一生成元のセキュリティ設定を無効にしてブラウザを実行すると Webサイトにクロスオリジンリソースへのアクセスが許可されるため、非常に安全ではなく、実行していること(開発目的など)が正確にわからない場合は絶対に実行しないでください

56
Geert 2014-10-10 04:00.

マルコボネッリの答えを補完する:フレーム/ iframe間で対話する現在の最良の方法は、すべてのブラウザwindow.postMessageサポートされているを使用することです

19
Shahar Shokrani 2017-09-07 00:24.

ドメインのWebサーバーでhttp://www.<domain>.com構成を確認してください。X-Frame-Options これはクリックジャッキング攻撃を防ぐために設計されたセキュリティ機能です。

クリックジャッキングはどのように機能しますか?

  1. 邪悪なページは被害者のページとまったく同じように見えます。
  2. 次に、ユーザーをだましてユーザー名とパスワードを入力させました。

技術的には、悪はiframe被害者のページのソースにあります。

<html>
    <iframe src='victim_domain.com'/>
    <input id="username" type="text" style="display: none;/>
    <input id="password" type="text" style="display: none;/>
    <script>
        //some JS code that click jacking the user username and input from inside the iframe...
    <script/>
<html>

セキュリティ機能のしくみ

Webサーバーリクエストがiframe追加内でレンダリングされないようにする場合は、x-frame-optionsを追加します

Xフレーム-オプション拒否

オプションは次のとおりです。

  1. SAMEORIGIN //自分のドメインにのみHTMLをiframe内にレンダリングすることを許可します。
  2. DENY //私のHTMLをiframe内にレンダリングすることを許可しない
  3. "ALLOW-FROM https://example.com/"//特定のドメインがiframe内でHTMLをレンダリングできるようにする

これはIIS構成の例です。

   <httpProtocol>
       <customHeaders>
           <add name="X-Frame-Options" value="SAMEORIGIN" />
       </customHeaders>
   </httpProtocol>

質問の解決策

Webサーバーがセキュリティ機能をアクティブにした場合、クライアント側のSecurityErrorが発生する可能性があります。

14
Yakir Manor 2017-12-14 07:32.

私にとって、双方向ハンドシェイクを実装したかったのです。つまり、
-親ウィンドウはiframeよりも速く読み込まれます-iframe は準備ができ
たらすぐに親ウィンドウと通信する必要があります
-親はiframeメッセージを受信して​​再生する準備ができています

このコードは、[CSSカスタムプロパティ]
コードを使用してiframeにホワイトラベルを設定するために使用されます:
iframe

$(function() {
    window.onload = function() {
        // create listener
        function receiveMessage(e) {
            document.documentElement.style.setProperty('--header_bg', e.data.wl.header_bg);
            document.documentElement.style.setProperty('--header_text', e.data.wl.header_text);
            document.documentElement.style.setProperty('--button_bg', e.data.wl.button_bg);
            //alert(e.data.data.header_bg);
        }
        window.addEventListener('message', receiveMessage);
        // call parent
        parent.postMessage("GetWhiteLabel","*");
    }
});

$(function() {
    // create listener
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    eventer(messageEvent, function (e) {
        // replay to child (iframe) 
        document.getElementById('wrapper-iframe').contentWindow.postMessage(
            {
                event_id: 'white_label_message',
                wl: {
                    header_bg: $('#Header').css('background-color'),
                    header_text: $('#Header .HoverMenu a').css('color'),
                    button_bg: $('#Header .HoverMenu a').css('background-color')
                }
            },
            '*'
        );
    }, false);
});

当然、起源とテキストを制限することができます。これは作業が簡単です。コードを
使用すると、この例が役立つことがわかりました。[ postMessageを使用した
クロスドメインメッセージング]

0
ssp 2020-03-28 16:11.

これに影響を与える可能性のあるJavaSpring固有の構成を追加したいと思います。

Webサイトまたはゲートウェイアプリケーションには、contentSecurityPolicy設定があります

Springでは、WebSecurityConfigurerAdapterサブクラスの実装を見つけることができます

contentSecurityPolicy("
script-src 'self' [URLDomain]/scripts ; 
style-src 'self' [URLDomain]/styles;
frame-src 'self' [URLDomain]/frameUrl...

..。

.referrerPolicy(ReferrerPolicyHeaderWriter.ReferrerPolicy.STRICT_ORIGIN_WHEN_CROSS_ORIGIN)

ここで安全な外部コンテンツを定義していない場合、ブラウザはブロックされます。

0
Zhanwen Chen 2020-05-22 11:41.

iframeのコンテンツを制御できる場合、つまり、Amazon Mechanical Turkなどのクロスオリジンセットアップでロードされるだけの場合は<body onload='my_func(my_arg)'>、内部htmlの属性を使用してこの問題を回避できます。

たとえば、内部htmlの場合、thishtmlパラメーターを使用します(yes-thisが定義されており、内部body要素の親ウィンドウを参照します)。

<body onload='changeForm(this)'>

内側のhtml:

    function changeForm(window) {
        console.log('inner window loaded: do whatever you want with the inner html');
        window.document.getElementById('mturk_form').style.display = 'none';
    </script>
0
Nick K9 2020-06-27 03:46.

iframeを埋め込んでから、Braveでサイトを開こうとしたときに、このエラーが発生しました。問題のサイトを「ShieldsDown」に変更すると、エラーはなくなりました。明らかに、これは完全な解決策ではありません。Braveでサイトにアクセスする他の人が同じ問題に遭遇するからです。実際にそれを解決するには、このページにリストされている他のいずれかのことを行う必要があります。しかし、少なくとも私は今、問題がどこにあるのかを知っています。

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

フィリップス40インチ4Kカーブモニターレビュー:ゴーストをあきらめる

フィリップス40インチ4Kカーブモニターレビュー:ゴーストをあきらめる

フィリップスのBDM4037UWは、最大4つのフルHD入力を同時に表示できる40インチのウルトラHD曲面LCDモニターであり、マルチプラットフォームゲーマーに最適な大型モニターのようです。そして、それは、2、3の小さな失敗と1つの大きなつまずきがなければ、そうなるでしょう。

アトランタは2018年まで戻ってきませんが、ドナルドグローバーはFX用のテレビをもっと作っています

アトランタは2018年まで戻ってきませんが、ドナルドグローバーはFX用のテレビをもっと作っています

(写真:Rodin Eckenroth / Getty Images)良いニュースと悪いニュースがあります。前者?FXは本日、ドナルドグローバーがFXプロダクションと独占的な全体的な制作契約を結んだことを発表しました。つまり、グローバーからのより多くの番組がFXや他の場所で行われることを意味します。

スクリームクイーンズは、いくつかの「ゴーストストーリー」で地獄のようにメタを取得します

スクリームクイーンズは、いくつかの「ゴーストストーリー」で地獄のようにメタを取得します

ライアン・マーフィーのように、毎ターンショーランナーのIDについて多くを学ぶことはめったにありません。その奇妙なことは、特定の瞬間にライアンマーフィーの工芸品について言えることのすべてですが、彼がグリーの特徴を使ってスピンザボトルをプレイしている場合でも、アメリカンホラーストーリーの壁で衝撃画像のスパゲッティを投げている場合でも、それは光ります。

イーロンマスクは、Twitterのフィードバックに基づいてテスラの車に基本的な機能を追加し続けています

イーロンマスクは、Twitterのフィードバックに基づいてテスラの車に基本的な機能を追加し続けています

自動車のパイオニアでありテスラのCEOであるイーロンマスクは、ツイッターでのテスラの所有者のフィードバックに応えて、今週末に多くの時間を費やしました。フィードバックは建設的であり、すぐにより良い車になる可能性がありますが、フォーラムでは急速に成長している自動車メーカーのカスタマーサービスの問題に焦点を当てています。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language