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

前提・実現したいこと

ブラウザで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での実行ですがサーバーにアップしてからでも同じエラーが出ます。

該当のソースコード

HTML
1
2    <body>
3        <iframe src="" id="ifrm" width="400" height="300" style="opacity: 0.3;"></iframe>
4        
5        <script>
6            var url = "https://google.co.jp"
7
8            ifrm.src = url;
9            ifrm.onload = function(){
10                console.log("読み込み完了");
11                const ifrm = document.getifrmentById('ifrm');
12                const doc = ifrm.contentWindow.document;
13                console.log(doc);
14            }
15        </script>
16    </body>
17

試したこと

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

HTML
1
2
3    <body>
4        <iframe src="" id="ifrm" width="400" height="300" style="opacity: 0.3;"></iframe>
5        
6        <script>
7            var url = "https://google.co.jp"
8
9            var request = new XMLHttpRequest();
10            request.open("GET", url);
11            request.responseType = "document";
12            request.send("");
13            request.onreadystatechange = function() {
14                if (request.readyState == 4 && request.status == 200) {
15                    
16                    var ifrm = document.getelementById("ifrm");
17                    ifrm.src = request.response;
18                }
19            }
20        </script>
21    </body>
22

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

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

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

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

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

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

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

そして、

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

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

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

追記(2020/12/1)

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

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

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

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

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

投稿2020/11/30 12:34

編集2020/12/01 01:59

ockeghem

総合スコア11705

found

2020/11/30 12:51

回答ありがとうございます！関係なかったんですね;; すみません。作りたい物はユーザーが通販サイトで品切れの人気商品商品が入荷した時に自動で購入出来るようなサイトです。 iframeにサイト載せて外から操作するみたいな感じのを考えていました。通販サイトに負荷をかけられないので商品をなんでもとは行かないのですがサーバー側で入荷状況とかは取得して入荷したらクライアント側で購入処理だけ行うという。人によっては得体の知れないソフト(自動購入ツール)を入れたくない人もいると思うので、さらにそこからログインパスワードとか入力しますし、ブラウザで完結させられたら便利かなと。転売ヤー対策の意味もあるので(他の人が容易に買えるように)転売ヤー対策はするつもりですが、それ以前に最初期の時点で躓きました。ソフト入れたくない人でもchromeの拡張機能機能なら良いかなと思っています。

found

2020/12/01 02:01

追記について。分かりました。ありがとうございます。そんなリスクがあるんですね。先に知っといて良かったです。今外なので家に帰ったら動画を見させていただきます。思い付きで考えたサービスなので今回は諦めます。ありがとうございました。

退会済みユーザー

2020/12/08 08:20

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

行動規範の内容に同意します