integrity属性・とは？初心者向けにわかりやすく解説するSRIの基本と使い方共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

integrity属性・とは？初心者向けにわかりやすく解説

ウェブサイトを作るとき、外部のファイルを読み込む場面があります。integrity属性は、その外部ファイルが配布元から改ざんされていないかを確認するための仕組みです。読み込む側のブラウザは、指定された ハッシュ値と実際のファイルの内容を比較し、もし食い違いがあればリソースを安全に読み込まないようにします。これにより、サプライチェーンの安全性が高まり、第三者による不正改ざんのリスクを減らせます。

この仕組みは、主に スクリプトや スタイルシートといった外部リソースをページに組み込むときに使われます。SRI（Subresource Integrity）と呼ばれることもあり、ウェブ制作の基礎知識として覚えておくと安心です。

How it works — 仕組みをやさしく解説

外部ファイルを読み込む際、integrity属性にはそのファイルのハッシュ値が書かれています。ブラウザはファイルを取得した後、同じハッシュ関数で内容を計算し、属性に書かれた値と比べます。両者が一致すればファイルを安全に利用し、もし一致しなければそのファイルはブロックされ、エラーがコンソールに表示されます。

ポイントは次の2つです。まず、ハッシュアルゴリズムとして sha256、sha384、sha512 が使われることが多い点。次に、crossorigin属性を併用することが推奨される点です。これにより、CORSのポリシーに適合し、リソースの取得時の認証情報の扱いを適切に制御できます。

使い方の基本ステップ

読み込むファイルのハッシュを取得する。ハッシュはbase64でエンコードされた文字列になります。
HTMLのリソースタグに integrity属性として algo-hash の形式で記述する。例として sha256- の後に続くベース64文字列を配置します。
可能であれば crossorigin属性を設定する。多くの場合 crossorigin='anonymous' を使います。

実務では、CDNから配布されるライブラリにはすでに SRI のハッシュ値が公開されていることが多いです。公式ドキュメントやリリースノートを確認して、正しいハッシュ値を使うことが重要です。

以下は実際の利用イメージです。重要な点は 属性名とエンコード形式、そして 正しいハッシュ値を使うことです。例は分かりやすいように簡略化しています。

例: <span>

同様に CSS ファイルにも同じ要領で適用します。

よく使われるハッシュアルゴリズム

<th>説明

アルゴリズム	sha256
説明	256ビットのハッシュ値を生成する
アルゴリズム	sha384
説明	384ビットのハッシュ値を生成する
アルゴリズム	sha512
512ビットのハッシュ値を生成する

実務での注意点と落とし穴

重要なのは、SRIは「ファイルの改ざん検知」を目的とする機能であり、ファイルの出自や配布元の信頼性を保証するものではない点です。つまり、HTTPSを併用することが前提です。もし配布元が信頼できない場合や、リソースが途中で改ざんされる可能性がある場合には、SRIだけでは不十分です。適切なセキュリティ対策として、サーバーの設定（HTTPSの強制、CSPの導入など）と組み合わせて運用しましょう。

もう一つの注意点は、ハッシュの更新コストです。ライブラリのバージョンを更新する際には新しいハッシュを取得して、integrity属性を更新する必要があります。自動化ツールを使ってハッシュ値を再生成するワークフローを用意すると、手動ミスを減らせます。

まとめ

integrity属性は、ウェブサイトの外部リソースの安全性を高める有力な手段です。SRIという考え方を理解し、sha256・sha384・sha512などのアルゴリズムと crossorigin 属性を組み合わせて使うことで、不正なファイルの読み込みを防ぐことができます。初心者のうちからこの仕組みを知っておくと、サイトのセキュリティや信頼性を高める大きな力になります。

integrity属性の同意語

SRI属性: Subresource Integrity（サブリソース整合性）を表す属性。外部リソースのハッシュ値を指定して、読み込む際に改ざんされていないか検証します。主に script や link タグで使用され、セキュリティを強化します。
サブリソース整合性属性: HTML の integrity 属性の正式名称を日本語で表現したもの。外部ファイルのハッシュ値を指定して、改ざんを検知します。
整合性属性: データの完全性を担保するための属性。読み込むリソースのハッシュと実データを照合して、一致すれば安全に利用できます。
ハッシュ検証属性: リソースのハッシュ値を用いて検証する属性。改ざんの有無を事前にチェックする目的で使われます。
サブリソース検証属性: 外部リソースの検証を目的とした属性の別称。読み込む前にハッシュを照合してデータの安全性を保ちます。

integrity属性の対義語・反対語

信頼性の欠如: integrity属性が担うデータの完全性・正当性が欠け、データが改ざんされている可能性が高い状態を指します。
未検証: リソースのハッシュ/署名検証が行われていない状態。検証なしではデータの正当性を保証できません。
改ざん: データが元の状態から変更され、正しくない情報を含む可能性がある状態を指します。
不整合: ハッシュ値とリソース本体が一致せず、データの整合性が崩れている状態を指します。
署名なし・検証なし: データの出所を証明する署名や検証が欠如しており、信頼性が低下している状態を示します。
セキュリティの脆弱化: 完全性の確保が不十分で、外部からの改ざんや悪用に対して脆弱な状態を指します。
完全性の喪失: データが元の正確さ・完全性を失い、信頼性が大きく損なわれている状態を表します。
偽装・偽情報: データの出所や内容を偽って見せかける行為で、信頼性を著しく低下させます。

integrity属性の共起語

Subresource Integrity (SRI): SRIとは、外部リソースの改ざんを検出するために、読み込むリソースのハッシュ値をintegrity属性に記述して検証する仕組みです。
integrity属性: HTMLの属性の一つで、外部リソースのハッシュ値を記述して、読み込み時に資源の整合性を検証します。
ハッシュ: 資源データを一定の長さの文字列に変換した値のこと。integrityではこの値で改ざんを検知します。
SHA-256: SHA-2系のハッシュアルゴリズムの一つ。SRIでよく用いられる、リソースの整合性を検証するための値を作る際に使われます。
SHA-384: SHA-2系の別の長さのハッシュアルゴリズム。高いセキュリティを求める際に使用されます。
SHA-512: SHA-2系のもっと長いハッシュアルゴリズム。最も強力な整合性検証を提供します。
base64: ハッシュ値を表現する一般的な文字列エンコード形式。integrity属性では通常base64エンコードされた値を使用します。
crossorigin: 外部リソースを読み込む際のクロスオリジンリクエストの挙動を指定する属性。anonymousまたはuse-credentialsが主な値です。
anonymous: crossorigin属性の値の一つ。認証情報を送信せずにリソースを取得します。
use-credentials: crossorigin属性の値の一つ。認証情報をリソースへ送信して取得します。
外部リソース: HTML側が読み込む外部のスクリプトやスタイルシートなどの資源のこと。integrityはこれらの改ざん検出に使われます。
スクリプトタグ: 外部JavaScriptファイルを読み込むHTML要素。integrity属性をサポートしています。
linkタグ: 外部CSSファイルを読み込むHTML要素。integrity属性を使って整合性を確認できます。
改ざん検出: 資源が意図した内容と異なっていないかを確認すること。integrity属性はこの検出を可能にします。
セキュリティ: ウェブサイトの信頼性と安全性を高める対策の一つ。integrityは外部リソースの改ざん防止に寄与します。
信頼性: 読み込むリソースが正規のものであると保証する度合い。integrityを使うと信頼性が高まります。
SHA-1: 古いハッシュアルゴリズム。衝突の問題があるため、SRIでは避けるべきとされます。
ブラウザ互換性: 現代の主要ブラウザはSRIをサポートしていますが、古いブラウザでは検証が動かない場合があります。
HTML5: integrity属性はHTML5で導入された機能です。
検証エラー: integrity検証に失敗した場合に表示されるエラー。資源が改ざんされた可能性を示します。

integrity属性の関連用語

integrity属性: Subresource Integrity(SRI)を利用して、外部リソースの改ざんを検知するためのHTML属性。資源の内容が指定したハッシュと一致しない場合、ブラウザはその資源を読み込みません。
Subresource Integrity(SRI): ウェブページが外部リソースを読み込む際に、資源のハッシュ値を事前に指定して整合性を検証する仕組み。アルゴリズム名とBASE64でエンコードしたハッシュをintegrity属性に記述します。
crossorigin属性: SRIを正しく機能させるため、外部リソースのクロスオリジン要求時のCORS設定を指定する属性。通常はanonymousまたはuse-credentialsを設定します。
SHA-256: SRIでよく使われるハッシュアルゴリズムの一つ。資源の内容をSHA-256で計算し、BASE64エンコードした値をintegrityに記述します。
SHA-384: SRIで使われるハッシュアルゴリズムの一つ。SHA-384で計算したハッシュをBASE64エンコードしてintegrityに含めます。
SHA-512: SRIで使われるハッシュアルゴリズムの一つ。SHA-512で計算したハッシュをBASE64エンコードしてintegrityに含めます。
ハッシュ値: 資源の内容を元に計算されるデジタル指紋。integrity属性にはアルゴリズム名とBASE64ハッシュの組み合わせで記述します。
base64: ハッシュ値を文字列として表現する際のエンコード形式。SRIでは多くの場合BASE64を用います。
資源の改ざん検知: SRIの主要目的。リソースが配布元以外の改ざんされていた場合、ブラウザが読み込みをブロックします。
資源の検証の流れ: HTMLのタグにintegrityとcrossoriginを設定。ブラウザが資源を取得後、実際の内容のハッシュを計算してintegrity値と比較。整合すれば読み込み、ずれていればブロックします。
リソース整合性検証の対象: 外部のJavaScriptファイルやCSSファイル、CDN経由で配布される資源が対象です。
CDN: Content Delivery Networkの略。地理的に近いサーバーから資源を提供する仕組み。SRIを併用することで安全性を高めます。
scriptタグ: 外部JavaScriptを読み込むHTMLタグ。integrity属性を追加して検証を有効にします。
linkタグ: 外部CSSを読み込むHTMLタグ。integrity属性を追加して検証を有効にします。
SRIの検証エラー時の挙動: 整合性が一致しない場合、ブラウザは該当資源の読み込みをブロックし、エラーメッセージをコンソールに出力します。
SRIハッシュの生成方法: 資源の内容からSHA-256/384/512などのハッシュを作成し、BASE64でエンコードして「アルゴリズム-BASE64ハッシュ」という形式でintegrity属性に記述します。例: openssl dgst -sha256 -binary file.js | openssl base64 -A
セキュリティのベストプラクティス: 外部リソースにはSRIを使い、可能ならCSPと併用。資源の更新時には新しいハッシュを再生成して更新します。
SRIの対応状況: 主要な現代ブラウザはSRIをサポートしています。古いブラウザでは機能しない場合がある点に留意してください。
リソース更新時の運用: 外部リソースを更新した場合は新しいハッシュを生成してintegrityを更新するか、SRIを使わない保証を避けるための運用を検討します。