\r\n```\r\nその時、script.jsはexample1.comのオリジンとして処理される（例えばもしexample2.comの他のページにアクセスする処理がscript.jsにあった場合は同一オリジンポリシー違反でエラーが出る）のでしょうか？\r\n検証したいのですが、javascriptのスキルがないのでできずにいます。\r\n\r\nよろしくお願いします。\r\n\r\nーーーーーーーーー追記ーーーーーーーーー\r\nこの情報は以下のページで見かけたものです。英語のページなので私の読解力に問題がある可能性もあります。\r\nhttps://security.stackexchange.com/questions/61774/understanding-same-origin-policy","answerCount":3,"upvoteCount":0,"datePublished":"2019-05-05T17:35:15.497Z","dateModified":"2019-05-06T03:13:09.197Z","acceptedAnswer":{"@type":"Answer","text":"表題の、\r\n\r\n> scriptタグで外部サイトのjavascriptを指定した場合のオリジンについて\r\n\r\nというのは、例えば CDN にあるスクリプトファイルを参照するなど普通に行うことです。\r\n\r\n当然オリジンは異なることになりますが、同一オリジンポリシーによる制約に引っかかるような作り方はしてないはずで、心配には及ばないと思います。\r\n\r\n問題が出るとすると、以下の記事の「異なるオリジンへのネットワークアクセス」のセクションに書いてある「異なるオリジンからの読み込み」でしょう。\r\n\r\n同一オリジンポリシー\r\n[https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy](https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy)\r\n\r\n質問者さんが気にしている、\r\n\r\n> 例えばもしexample2.comの他のページにアクセスする処理がscript.jsにあった場合は同一オリジンポリシー違反でエラーが出る\r\n\r\nというのは、例えば ajax で example2.com にあるリソースにアクセスしようとするケースですが、http://example2.com/script.js にそのようなスクリプトが含まれていることは普通はないはずです。（あったら異常でそのサイトには近づかない方がよさそうです）","dateModified":"2019-05-06T04:25:42.451Z","datePublished":"2019-05-06T04:25:42.451Z","upvoteCount":3,"url":"https://teratail.com/questions/187920#reply-279015"},"suggestedAnswer":[{"@type":"Answer","text":"### 前提\r\n\r\n> この情報は以下のページで見かけたものです。英語のページなので私の読解力に問題がある可能性もあります。\r\n> [https://security.stackexchange.com/questions/61774/understanding-same-origin-policy](https://security.stackexchange.com/questions/61774/understanding-same-origin-policy)\r\n\r\n「オリジン」で一括りにせず、CORS, CSPを区別して下さい。\r\nリンク先にもその2つのキーワードとリンクがあります。\r\n\r\n### Cross-Origin Resource Sharing (CORS)\r\n\r\nCORSとは、既にあるオリジンから異なるオリジンリソースをfetchする仕組みを指します。\r\nJavaScriptにおいては、`XMLHttpRequest`, `Fetch` で外部リソース読み込みをする際のポリシーといえます。\r\n\r\n- [3.2. CORS protocol - Fetch Standard](https://fetch.spec.whatwg.org/#http-cors-protocol)\r\n- [3.2. CORS プロトコル - Fetch Standard （日本語訳）](https://triple-underscore.github.io/Fetch-ja.html#http-cors-protocol)\r\n- [オリジン間リソース共有 (CORS) - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)\r\n\r\nHTTPヘッダ `Access-Control-*` で外部からの読み込みを制御します。\r\n\r\n- [3.2.3. HTTP 応答 - Fetch Standard （日本語訳）](https://triple-underscore.github.io/Fetch-ja.html#http-responses)\r\n- [Access-Control-Allow-Origin](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)\r\n- [Access-Control-Allow-Methods - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Access-Control-Allow-Methods)\r\n- [Access-Control-Allow-Headers - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Access-Control-Allow-Headers)\r\n- [Access-Control-Allow-Credentials - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials)\r\n\r\n### Content Security Policy (CSP)\r\n\r\nCSPとは、Webページ上から外部リソースのfetch/実行を制御するポリシーを指します。\r\n\r\n- [Content Security Policy Level 3](https://w3c.github.io/webappsec-csp/)\r\n- [Content Security Policy Level 3 日本語訳](https://triple-underscore.github.io/CSP3-ja.html)\r\n- [コンテンツセキュリティポリシー (CSP) - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/CSP)\r\n- [コンテンツ セキュリティ ポリシー  |  Web  |  Google Developers](https://developers.google.com/web/fundamentals/security/csp/?hl=ja)\r\n\r\nHTTPヘッダ `Content-Security-Policy` で制御しますが、これはmeta要素で代用出来ます。\r\n\r\n```html\r\n \r\n\r\n```\r\n\r\n上記HTMLをGoogle Chrome 74.0.3729.131に読み込ませた場合、コンソールに次のエラーメッセージが出力され、外部JSは読み込まれません。\r\n\r\n```\r\nRefused 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.\r\n```\r\n\r\nRe: yamamotoyama さん","dateModified":"2019-05-06T05:09:12.610Z","datePublished":"2019-05-06T05:09:12.610Z","upvoteCount":3,"url":"https://teratail.com/questions/187920#reply-279029","comment":[]},{"@type":"Answer","text":"example1からexample2のjsを読み込んでexample2のapiにajaxで接続しようとしても\r\n特別なアクセス制限お解除がなければCORSにひっかかり読み込むことはできません\r\nCORSを回避するためにはJSONPで処理することが多いです","dateModified":"2019-05-06T03:49:26.246Z","datePublished":"2019-05-06T03:49:26.246Z","upvoteCount":1,"url":"https://teratail.com/questions/187920#reply-279008","comment":[]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","url":"https://teratail.com"},{"@type":"ListItem","position":2,"name":"JavaScriptに関する質問","url":"https://teratail.com/tags/JavaScript"},{"@type":"ListItem","position":3,"name":"JavaScript","url":"https://teratail.com/tags/JavaScript"}]}}}
teratail
回答率
85.29%
質問するログイン新規登録
トップJavaScriptに関する質問
JavaScript

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

HTML

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

Q&A

解決済

3回答

7306閲覧

scriptタグで外部サイトのjavascriptを指定した場合のオリジンについて

yamamotoyama
yamamotoyama

総合スコア25

JavaScript

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

HTML

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

0グッド

1クリップ

投稿2019/05/05 17:35

編集2019/05/06 03:13

0

1

ある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

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/05/05 22:01

ajax のクロスドメインの話とゴッチャになってませんか？
CHERRY
CHERRY

2019/05/06 02:16

可能であれば、記載されていた Web ページの URL を質問に記載していただけないでしょうか？
guest

回答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 で外部リソース読み込みをする際のポリシーといえます。

HTTPヘッダ Access-Control-* で外部からの読み込みを制御します。

Content Security Policy (CSP)

CSPとは、Webページ上から外部リソースのfetch/実行を制御するポリシーを指します。

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

think49
think49

総合スコア18196

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

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

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

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

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

yamamotoyama
yamamotoyama

2019/05/06 05:43

ajaxを使ったことがないのでもし的外れなこと言ってたらすみません。 それは普通の同期通信のレスポンスにアクセスすることもできないって理解でいいんですかね？ 例えばexample2,comとの間のcookie情報や、レスポンスのhtmlに含まれるhidden属性の値（CSRFトークンとか）など。 flashのスクリプトでそれができるという情報を読んでjavascriptは大丈夫なのかなというところから、この件について調べ始めたんですが、なかなか難しいですね。
退会済みユーザー

退会済みユーザー

2019/05/06 05:49

ajax を使うイコール XmlHttpRequest を使う場合のことを言っています。同期通信（ブラウザのアドレスバーに url を入力して要求をかける場合と同じ）は関係ないです。
yamamotoyama
yamamotoyama

2019/05/06 08:33 編集

返答ありがとうございます。 あと、ここなんですが、>http://example2.com/script.js にそのようなスクリプトが含まれていることは普通はないはずです。（あったら異常でそのサイトには近づかない方がよさそうです） 例えば、もしexample2.comがアップロードサーバとして動いていて、そこにXmlHttpRequestを含むスクリプトファイルを作成して仕込んだら、それを見ているクライアントのブラウザではyambejpさんが仰るようにアクセス制限がかかるのでしょうか？
退会済みユーザー

退会済みユーザー

2019/05/06 08:55

そのサイトの制作者が何らかの悪意を持っていて、その悪意を「仕込む」ようなことをしていれば、制限は回避するように作っているでしょうからアクセスできてしまうでしょうね。 だだ、善意のサイトで CORS などによって ajax でもクロスドメインでアクセスできるようにしているかもしれません。 その辺が判断できなければ、上に書いたように、近づかない方がよさそうだと思います。
guest

0

example1からexample2のjsを読み込んでexample2のapiにajaxで接続しようとしても
特別なアクセス制限お解除がなければCORSにひっかかり読み込むことはできません
CORSを回避するためにはJSONPで処理することが多いです

投稿2019/05/06 03:49

yambejp
yambejp

総合スコア118164

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問

トップJavaScriptに関する質問

scriptタグで外部サイトのjavascriptを指定した場合のオリジンについて