Q&A
ajax のクロスドメインの話とゴッチャになってませんか？
あるwebページにおいてscriptタグを使って外部サイトのjavascriptファイルを指定した場合、そのファイルのオリジンはそのページのものとして扱われるというような記述をネット上で見かけたのですが、これは事実なのでしょうか？
例えばhttp://example1.comというオリジンのwebページにおいて以下を含むwebページがあったとします。
<script src="http://example2.com/script.js"></script>
その時、script.jsはexample1.comのオリジンとして処理される（例えばもしexample2.comの他のページにアクセスする処理がscript.jsにあった場合は同一オリジンポリシー違反でエラーが出る）のでしょうか？
検証したいのですが、javascriptのスキルがないのでできずにいます。
よろしくお願いします。
ーーーーーーーーー追記ーーーーーーーーー
この情報は以下のページで見かけたものです。英語のページなので私の読解力に問題がある可能性もあります。
https://security.stackexchange.com/questions/61774/understanding-same-origin-policy
可能であれば、記載されていた Web ページの URL を質問に記載していただけないでしょうか？
https://security.stackexchange.com/questions/61774/understanding-same-origin-policy
英語のページですが、この下の回答がそう言ってると私には読めましたのでこの質問をしました。
http://vulnerabledoma.in/camp2015_sop/
こちらは日本語のページですが、この2-3.の趣旨も同じものだと思います。
回答3件
0
前提
この情報は以下のページで見かけたものです。英語のページなので私の読解力に問題がある可能性もあります。
https://security.stackexchange.com/questions/61774/understanding-same-origin-policy
「オリジン」で一括りにせず、CORS, CSPを区別して下さい。
リンク先にもその2つのキーワードとリンクがあります。
Cross-Origin Resource Sharing (CORS)
CORSとは、既にあるオリジンから異なるオリジンリソースをfetchする仕組みを指します。
JavaScriptにおいては、XMLHttpRequest, Fetch で外部リソース読み込みをする際のポリシーといえます。
- 3.2. CORS protocol - Fetch Standard
- 3.2. CORS プロトコル - Fetch Standard （日本語訳）
- オリジン間リソース共有 (CORS) - HTTP | MDN
HTTPヘッダ Access-Control-* で外部からの読み込みを制御します。
- 3.2.3. HTTP 応答 - Fetch Standard （日本語訳）
- Access-Control-Allow-Origin
- Access-Control-Allow-Methods - HTTP | MDN
- Access-Control-Allow-Headers - HTTP | MDN
- Access-Control-Allow-Credentials - HTTP | MDN
Content Security Policy (CSP)
CSPとは、Webページ上から外部リソースのfetch/実行を制御するポリシーを指します。
- Content Security Policy Level 3
- Content Security Policy Level 3 日本語訳
- コンテンツセキュリティポリシー (CSP) - HTTP | MDN
- コンテンツ セキュリティ ポリシー | Web | Google Developers
HTTPヘッダ Content-Security-Policy で制御しますが、これはmeta要素で代用出来ます。
html
1<meta http-equiv="Content-Security-Policy" content="script-src 'self'"> 2<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
上記HTMLをGoogle Chrome 74.0.3729.131に読み込ませた場合、コンソールに次のエラーメッセージが出力され、外部JSは読み込まれません。
Refused to load the script 'https://code.jquery.com/jquery-3.4.1.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
Re: yamamotoyama さん
投稿2019/05/06 05:09
総合スコア18162
0
ベストアンサー
表題の、
scriptタグで外部サイトのjavascriptを指定した場合のオリジンについて
というのは、例えば CDN にあるスクリプトファイルを参照するなど普通に行うことです。
当然オリジンは異なることになりますが、同一オリジンポリシーによる制約に引っかかるような作り方はしてないはずで、心配には及ばないと思います。
問題が出るとすると、以下の記事の「異なるオリジンへのネットワークアクセス」のセクションに書いてある「異なるオリジンからの読み込み」でしょう。
同一オリジンポリシー
https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy
質問者さんが気にしている、
例えばもしexample2.comの他のページにアクセスする処理がscript.jsにあった場合は同一オリジンポリシー違反でエラーが出る
というのは、例えば ajax で example2.com にあるリソースにアクセスしようとするケースですが、http://example2.com/script.js にそのようなスクリプトが含まれていることは普通はないはずです。（あったら異常でそのサイトには近づかない方がよさそうです）
投稿2019/05/06 04:25
退会済みユーザー
総合スコア0
ajaxを使ったことがないのでもし的外れなこと言ってたらすみません。
それは普通の同期通信のレスポンスにアクセスすることもできないって理解でいいんですかね？
例えばexample2,comとの間のcookie情報や、レスポンスのhtmlに含まれるhidden属性の値（CSRFトークンとか）など。
flashのスクリプトでそれができるという情報を読んでjavascriptは大丈夫なのかなというところから、この件について調べ始めたんですが、なかなか難しいですね。
ajax を使うイコール XmlHttpRequest を使う場合のことを言っています。同期通信（ブラウザのアドレスバーに url を入力して要求をかける場合と同じ）は関係ないです。
返答ありがとうございます。
あと、ここなんですが、>http://example2.com/script.js にそのようなスクリプトが含まれていることは普通はないはずです。（あったら異常でそのサイトには近づかない方がよさそうです）
例えば、もしexample2.comがアップロードサーバとして動いていて、そこにXmlHttpRequestを含むスクリプトファイルを作成して仕込んだら、それを見ているクライアントのブラウザではyambejpさんが仰るようにアクセス制限がかかるのでしょうか？
そのサイトの制作者が何らかの悪意を持っていて、その悪意を「仕込む」ようなことをしていれば、制限は回避するように作っているでしょうからアクセスできてしまうでしょうね。
だだ、善意のサイトで CORS などによって ajax でもクロスドメインでアクセスできるようにしているかもしれません。
その辺が判断できなければ、上に書いたように、近づかない方がよさそうだと思います。
0
example1からexample2のjsを読み込んでexample2のapiにajaxで接続しようとしても
特別なアクセス制限お解除がなければCORSにひっかかり読み込むことはできません
CORSを回避するためにはJSONPで処理することが多いです
投稿2019/05/06 03:49
総合スコア114829
あなたの回答
tips
プレビュー
