質問編集履歴

1

found

found score 2

2020/12/01 00:33  投稿

CORSポリシーを拡張機能で無効にできない。
### 前提・実現したいこと
ブラウザでiframeの中身を操作したいのですが以下のエラーが出て操作できません。
CORS(?)が問題だということが分かったのでChromeの拡張機能でポリシーを無効にしたのですがそれでも同じエラーが出ます。
Chrome拡張機能4つ:使用時は1つずつ
[Allow CORS: Access-Control-Allow-Origin](https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf)
[CORS Unblock](https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino)
[Cross Domain - CORS](https://chrome.google.com/webstore/detail/cross-domain-cors/mjhpgnbimicffchbodmgfnemoghjakai)
[Moesif Origin & CORS Changer](https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc)
[Test CORS](https://webbrowsertools.com/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
   <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を使って実行しましたが変わりません。
```HTML
   <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は他サイトということの例です。
Google.co.jpは他サイトということの例です。
### 方法を1つ思いついたので追記
こういう事が出来るかは分からないのですが、プロキシサーバを用いてヘッダを書き換えると言うのは可能でしょうか?
プロキシサーバが何たるかもよく分かっていないのですが別の問題でこういう手段もあると言うのを見たことがあるので、、、
良ければこれについて何か意見をお願い致します。
  • JavaScript

    37908 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    24400 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Chrome

    1694 questions

    Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

  • HTML5

    10291 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る