質問: ### 前提・実現したいこと ブラウザで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での実行ですがサーバーにアップしてからでも同じエラーが出ます。 ### 該当のソースコード ``` ``` ### 試したこと iframeがこの拡張機能で無効化できるXMLHttprequestで通信しているのかがわからなかったので以下のコードで明示的にXMLHttpRequestを使って実行しましたが変わりません。 ``` ``` ### 補足情報(FW/ツールのバージョンなど) Google Chrome は最新版を利用しています。 バージョン: 87.0.4280.66(Official Build) (64 ビット) コードを実行しているときは拡張機能をONにしています。 responseTypeをtext等にするとしっかり取得出来ているのですがdocumentの形式にしてiframeのsrcに入れるとまた同じエラーが出ます。 Google.co.jpは他サイトということの例です。 ### 方法を1つ思いついたので追記 こういう事が出来るかは分からないのですが、プロキシサーバを用いてヘッダを書き換えると言うのは可能でしょうか? プロキシサーバが何たるかもよく分かっていないのですが別の問題でこういう手段もあると言うのを見たことがあるので、、、 良ければこれについて何か意見をお願い致します。
回答: 元のソースは異なるオリジンのiframeの中身を読もうとしてエラーになっていますが、これはCORSのエラーではなく、同一オリジンポリシー(Same Origin Policy)違反です。なので、CORSを無効化しても、このエラーは解消できないと思います。 そして、 > > iframeがこの拡張機能で無効化できるXMLHttprequestで通信しているのかがわからなかった > > > ということですが、iframeはXMLHttpRequestとは関係ありません。 そもそもやりたいことが何なのかがわかれば、別のアプローチについて助言できるかもしれません。 追記(2020/12/1) > > ソフト入れたくない人でもchromeの拡張機能機能なら良いかなと思っています。 > > > これはだめです。個人的に使うだけなら止めませんが、サイト利用者にCORSを緩める拡張機能を導入させることは、利用者を危険に晒すことになるからです。同一オリジンポリシーとCORSはブラウザの重要なセキュリティ機能でして、これらが無効化されると、「全てのサイトにクロスサイトスクリプティング脆弱性がある状態」になります。これは受け入れられるものではありません。 「やりたい内容」に関する解決策は、対象サイトにはサーバーからアクセスするしかないと思います。そもそも、最近のサイトの多くはクリックジャッキング脆弱性対策として、iframeの中に入れること自体ができない場合が大半です。例示されているGoogleもそうです。 ということで、実装の方針を変更されることをお勧めします。 以下は、私が公開しているCORSの入門動画です。原理から基礎的なところを詳しく解説しています。 CORSの原理を知って正しく使おう - YouTube