質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.59%

CORSポリシーを拡張機能で無効にできない。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 3
  • VIEW 2,971

score 2

前提・実現したいこと

ブラウザでiframeの中身を操作したいのですが以下のエラーが出て操作できません。
CORS(?)が問題だということが分かったのでChromeの拡張機能でポリシーを無効にしたのですがそれでも同じエラーが出ます。

Chrome拡張機能4つ:使用時は1つずつ
Allow CORS: Access-Control-Allow-Origin
CORS Unblock
Cross Domain - CORS
Moesif Origin & CORS Changer

Test CORSのサイトで確認してポリシーが無効になっていることは確認しました。

何か他にもしなければいけないことがあるのでしょうか?

宜しくお願い致します。

発生している問題・エラーメッセージ

Uncaught DOMException: Blocked a frame with origin "http://127.0.0.1:5500" from accessing a cross-origin frame.
    at HTMLIFrameElement.ifrm.onload (http://127.0.0.1:5500/index.html:26:48)


これはVSCodeのLive Serverでの実行ですがサーバーにアップしてからでも同じエラーが出ます。

該当のソースコード

    <body>
        <iframe src="" id="ifrm" width="400" height="300" style="opacity: 0.3;"></iframe>

        <script>
            var url = "https://google.co.jp"

            ifrm.src = url;
            ifrm.onload = function(){
                console.log("読み込み完了");
                const ifrm = document.getifrmentById('ifrm');
                const doc = ifrm.contentWindow.document;
                console.log(doc);
            }
        </script>
    </body>

試したこと

iframeがこの拡張機能で無効化できるXMLHttprequestで通信しているのかがわからなかったので以下のコードで明示的にXMLHttpRequestを使って実行しましたが変わりません。

    <body>
        <iframe src="" id="ifrm" width="400" height="300" style="opacity: 0.3;"></iframe>

        <script>
            var url = "https://google.co.jp"

            var request = new XMLHttpRequest();
            request.open("GET", url);
            request.responseType = "document";
            request.send("");
            request.onreadystatechange = function() {
                if (request.readyState == 4 && request.status == 200) {

                    var ifrm = document.getelementById("ifrm");
                    ifrm.src = request.response;
                }
            }
        </script>
    </body>

補足情報(FW/ツールのバージョンなど)

Google Chrome は最新版を利用しています。
バージョン: 87.0.4280.66(Official Build) (64 ビット)

コードを実行しているときは拡張機能をONにしています。
responseTypeをtext等にするとしっかり取得出来ているのですがdocumentの形式にしてiframeのsrcに入れるとまた同じエラーが出ます。
Google.co.jpは他サイトということの例です。

方法を1つ思いついたので追記

こういう事が出来るかは分からないのですが、プロキシサーバを用いてヘッダを書き換えると言うのは可能でしょうか?

プロキシサーバが何たるかもよく分かっていないのですが別の問題でこういう手段もあると言うのを見たことがあるので、、、

良ければこれについて何か意見をお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+10

元のソースは異なるオリジンのiframeの中身を読もうとしてエラーになっていますが、これはCORSのエラーではなく、同一オリジンポリシー(Same Origin Policy)違反です。なので、CORSを無効化しても、このエラーは解消できないと思います。

そして、

iframeがこの拡張機能で無効化できるXMLHttprequestで通信しているのかがわからなかった

ということですが、iframeはXMLHttpRequestとは関係ありません。

そもそもやりたいことが何なのかがわかれば、別のアプローチについて助言できるかもしれません。


追記(2020/12/1)

ソフト入れたくない人でもchromeの拡張機能機能なら良いかなと思っています。

これはだめです。個人的に使うだけなら止めませんが、サイト利用者にCORSを緩める拡張機能を導入させることは、利用者を危険に晒すことになるからです。同一オリジンポリシーとCORSはブラウザの重要なセキュリティ機能でして、これらが無効化されると、「全てのサイトにクロスサイトスクリプティング脆弱性がある状態」になります。これは受け入れられるものではありません。

「やりたい内容」に関する解決策は、対象サイトにはサーバーからアクセスするしかないと思います。そもそも、最近のサイトの多くはクリックジャッキング脆弱性対策として、iframeの中に入れること自体ができない場合が大半です。例示されているGoogleもそうです。
ということで、実装の方針を変更されることをお勧めします。

以下は、私が公開しているCORSの入門動画です。原理から基礎的なところを詳しく解説しています。

CORSの原理を知って正しく使おう - YouTube

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/11/30 21:51

    回答ありがとうございます!

    関係なかったんですね;;
    すみません。

    作りたい物はユーザーが通販サイトで品切れの人気商品商品が入荷した時に自動で購入出来るようなサイトです。

    iframeにサイト載せて外から操作するみたいな感じのを考えていました。
    通販サイトに負荷をかけられないので商品をなんでもとは行かないのですがサーバー側で入荷状況とかは取得して入荷したらクライアント側で購入処理だけ行うという。

    人によっては得体の知れないソフト(自動購入ツール)を入れたくない人もいると思うので、さらにそこからログインパスワードとか入力しますし、ブラウザで完結させられたら便利かなと。転売ヤー対策の意味もあるので(他の人が容易に買えるように)転売ヤー対策はするつもりですが、それ以前に最初期の時点で躓きました。

    ソフト入れたくない人でもchromeの拡張機能機能なら良いかなと思っています。

    キャンセル

  • 2020/12/01 11:01

    追記について。
    分かりました。ありがとうございます。そんなリスクがあるんですね。先に知っといて良かったです。

    今外なので家に帰ったら動画を見させていただきます。

    思い付きで考えたサービスなので今回は諦めます。
    ありがとうございました。

    キャンセル

  • 2020/12/08 17:20

    foundさん。

    javascriptだからだめなのであって、phpやその他のサーバー側で実行される言語だったら可能です。
    javascript等のブラウザで動く言語はその利用者の設定によって実行結果等が左右されます。
    しかし、PHP等の言語はサーバー側の設定で実行結果が変わるので利用者によって実行結果が変わることはありません。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る