“crossorigin”属性｜“script”要素:スクリプト｜HTML－havin' a coffee break

＃

“crossorigin”属性について

“crossorigin”属性はスクリプトを読み込む時のCORSリクエストを設定します。“crossorigin”属性を使用した場合、スクリプトを読み込む時にCORSリクエストを実行します。

モジュールスクリプトではない従来のJavascriptでは、別のオリジンから読み込まれた外部スクリプトで“window.onerror”でエラー情報を取得しようとしても同一生成元ポリシーによって制限されてしまいます。しかし、“crossorigin”属性によってCORSを使用することであたかも同じオリジンにあるスクリプトであるかのようにエラー情報を取得できるようになります。

モジュールスクリプトの場合は“crossorigin”属性は別のオリジンにあるスクリプトやリソースを読み込む時のリクエストの資格情報モードを制御します。なお、モジュールスクリプトでは別のオリジンからの読み込みにはHTTP CORSプロトコルを使用する必要があります。

“crossorigin”属性を指定しない場合CORSは使用されません。

“script”要素の内容がデータブロックの場合は“crossorigin”属性を指定してはいけません。

＃

指定できる値

属性値	説明
anonymous	CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない
use-credentials	CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する

不正な文字列、もしくは空の値の場合は“crossorigin="anonymous"”として扱われます。

＃

サンプルコード



<!DOCTYPE html>

<html lang="ja">


<head>


<link rel="icon" href="image/favicon.ico">

<meta name="robots" content="index,follow">

<meta name="keywords" content="バナナ,栄養素,産地">

<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">

<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

<script src="https://www.sample.com/sample-script.js" crossorigin="anonymous"></script>

<title>黄色いフルーツバナナ - 果物を食べる</title>


</head>

<body>


...

“script”要素~“crossorigin”属性

“crossorigin”属性について

指定できる値

サンプルコード