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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Chrome

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

HTML5

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

JavaScript

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

HTML

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

Q&A

解決済

1回答

4486閲覧

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

found

総合スコア2

Chrome

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

HTML5

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

JavaScript

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

HTML

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

2グッド

3クリップ

投稿2020/11/30 10:26

編集2020/11/30 15:33

前提・実現したいこと

ブラウザで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つ思いついたので追記

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

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

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

gpsoft, DrqYuto👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

元のソースは異なるオリジンの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

総合スコア11701

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

found

2020/11/30 12:51

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

2020/12/01 02:01

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

退会済みユーザー

2020/12/08 08:20

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問