HTML属性 `integrity` と `crossorigin` の解説
2024-10-18
HTMLにおけるintegrityとcrossorigin属性について
integrity属性
- 使い方
<script src="script.js" integrity="sha256-abcdef1234567890"></script> - 値
SHA-256ハッシュ値。 - 目的
リソースの改竄を検知する。
crossorigin属性
- 使い方
<script src="https://example.com/script.js" crossorigin="anonymous"></script>anonymous: 認証情報を送信せず、レスポンスヘッダのAccess-Control-Allow-Originが"*"またはリクエスト元のオリジンと一致する場合にのみリクエストを許可します。null: クロスオリジンリクエストを許可せず、同オリジンポリシーに従います。
- 値
anonymous、use-credentials、null。 - 目的
クロスオリジンリクエストを制御する。
クロスオリジンリクエスト (CORS)
- 解決
サーバー側でCORSヘッダを設定することで、クロスオリジンリクエストを許可することができます。 - 制限
ブラウザはセキュリティ上の理由でクロスオリジンリクエストを制限しています。 - 定義
異なるオリジン (ドメイン、ポート、プロトコル) 間のリクエスト。
integrityとcrossoriginの関係
- しかし、クロスオリジンリクエストのセキュリティを強化するために、両者を組み合わせて使用することが推奨される場合があります。例えば、クロスオリジンリクエストで取得したリソースの改竄を検知するために、
crossorigin属性とintegrity属性を同時に使用することができます。 integrity属性はリソースの改竄を検知するものであり、crossorigin属性はクロスオリジンリクエストを制御するものです。両者は独立した機能を持ちます。
HTML属性 integrity と crossorigin の解説
例
<!DOCTYPE html>
<html>
<head>
<title>クロスオリジンリクエストの例</title>
</head>
<body>
<script src="https://example.com/script.js" integrity="sha256-abcdef1234567890" crossorigin="anonymous"></script>
</body>
</html>
- Content Security Policy (CSP)
CSPを使用して、許可されたリソースのリストを指定し、許可されていないリソースをブロックする。 - サーバーサイドの検証
サーバー側でリソースのハッシュ値を検証し、安全なリソースを提供する。 - 直接ダウンロードして検証
リソースを直接ダウンロードし、ハッシュ値を計算して検証する。
- CORSヘッダを設定
サーバー側でCORSヘッダを設定し、クロスオリジンリクエストを許可する。 - JSONP
JSONPを使用して、サーバー側でスクリプトタグを生成し、クロスオリジンリクエストを回避する。ただし、セキュリティリスクがあるため、推奨されない。 - 同オリジンポリシーに従う
リソースを同じオリジンから読み込むことで、クロスオリジンリクエストを回避する。
代替方法の比較
| 属性 | 代替方法 | 長所 | 短所 |
|---|---|---|---|
integrity | 直接ダウンロードして検証 | シンプル | 手動操作が必要 |
| サーバーサイドの検証 | 安全 | サーバー側の処理が必要 | |
| CSP | 安全 | 設定が複雑 | |
crossorigin | 同オリジンポリシーに従う | シンプル | 柔軟性が低い |
| JSONP | 柔軟性が高い | セキュリティリスクがある | |
| CORSヘッダを設定 | 柔軟性が高い | サーバー側の設定が必要 |
選択基準
- 実装の容易さ
同オリジンポリシーに従うが最も簡単。 - 柔軟性
JSONPやCORSヘッダを設定が最も柔軟。 - セキュリティ
CSPやサーバーサイドの検証が最も安全。
推奨方法
- crossorigin属性
CORSヘッダを設定が推奨される。JSONPはセキュリティリスクがあるため、可能な限り避ける。 - integrity属性
CSPやサーバーサイドの検証が推奨される。
注意
- CSPの設定は複雑であり、誤った設定によりサイトの機能が制限される可能性がある。
- JSONPはセキュリティリスクがあるため、可能な限り避ける。
- 代替方法を選択する際には、セキュリティ、柔軟性、実装の容易さを考慮する必要がある。
html cross-domain cors
