html crossorigin 属性のCORSの意味で何を理解していればいいのか知りたい。

提示コードのコメント部のライブラリ部の<script>タグのcrossorigin属性部ですが調べると[ <audio>, <img>, <link>, <script>, <video> の各要素で有効であり、 CORS への対応を提供し、したがって要素が読み取るデータのために CORS リクエストの構成を有効にします。要素によっては、属性は CORS 設定属性になります。 ]とありますがCORSの説明を見ていると沢山のことが書かれていますがつまり何を理解していればいいのでしょうか？　srcのウェブサイトのアドレスの機能を使うときに必要ということなのでしょうか？

※javascriptのコードを提示していませんがwebglのコードで正方形を行列を使って描画するコードです。

参考サイト: https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

html
1<!doctype html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>WebGL Demo</title>
6    <link rel="stylesheet" href="./webgl.css" type="text/css">
7
8    <!-- ライブラリ -->
9    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
10            crossorigin="anonymous" defer></script> 
11    </script>
12    <script src="webgl-demo.js" defer></script>
13  </head>
14
15  <body>
16    <canvas id="glcanvas" width="640" height="480"></canvas>
17  </body>
18</html>

maisumakun

2021/04/20 11:32

> 消すと表示されなくなります。何を消すと何が表示されなくなるのですか？

退会済みユーザー

2021/04/20 11:33

crossorigin="anonymous" defer></script> です。

maisumakun

2021/04/20 11:35

</script>まで消せばタグの組み合わせが崩壊してHTMLとして整合しなくなりますね。

退会済みユーザー

2021/04/20 11:37

あっ見落としてました、質問内容を修正しました。

maisumakun

2021/04/20 11:39

えっ、本当にそれが問題だったんですか？

退会済みユーザー

2021/04/20 11:42

違います。CORSで何を理解していればいいのかを知りたいです。

maisumakun

2021/04/20 11:52 編集

あまりに質問が投げやりすぎませんか？

行動規範の内容に同意します

回答2件

cdnjsはオープンなCDNサイトであり、この場合はcrossorigin="anonymous"は書かなくても動きます。

投稿2021/04/20 11:53

maisumakun

総合スコア145183

ベストアンサー

簡潔に言うのは非常に難しいのですが結局は自分が許可していないサイトからデータを取られないようにする為の技術？決まりごと？の一つがCORSとなります。

まぁ難しいことはおいておいて、今回の場合はcloudflareがオリジン情報を必須としているのだと思います。

そしてscriptタグ等の特定のタグ（他サイトからデータを取得できるようなタグですね）はcrossorigin属性を持っています。

そこにanonymousを設定することでこちらからのオリジン情報がリクエストに乗るのでcloudflareが実際にスクリプトのコードを送ることを許可してくれます。

でcrossorigin属性を記述しないと、このオリジン情報をそうしんしないので、cloudflare側が「わけのわからん奴からのアクセスは無視」と決めてるので描画スクリプト（だと思われますが）がダウンロードされてこないので実行されない＝描画されないということになります。

要するにセキュリティの為ですので、基本的には決め打ちで書いておけば大丈夫ですが、サーバー側のプログラム等を自分で書くことになるとちゃんと理解していないと大ハマリすることになりますね。

投稿2021/04/20 11:42

landy77

総合スコア1614

maisumakun

2021/04/20 11:51 編集

「cloudflareがオリジン情報を必須として」いません。実際、cdnjsのサイトからスニペットをコピーしても、crossorigin="anonymous"は含まれません。 https://cdnjs.com/libraries

ockeghem

2021/04/20 13:52

maisumakun の言われる通りです。昔からscript要素はクロスオリジンの呼び出しでスクリプト実行でき、その仕様は互換性のため現在も維持されています。

ockeghem

2021/04/20 14:19

「自分が許可していないサイトからデータを取られないようにする為の技術？決まりごと？の一つがCORSとなります」も間違いで、制限するのは同一オリジンポリシー(Same origin policy)で、それを適宜緩めるのがCORSです。script要素によるJavaScript実行は同一オリジンポリシーの制約を受けません。だからscript要素のcrossorgin属性は非常にややこしくて説明が難しいのですがね。