ApacheでSubresource Integrity(SRI)を使って外部リソース改ざんを防ぐ方法

Subresource Integrity（SRI）は、Webサイトが外部から読み込むスクリプトやスタイルシートの改ざんを防ぐためのセキュリティ機能です。ApacheでホストするWebサイトでは、CDNなど外部リソースを利用することが多く、悪意のある第三者がリソースを改ざんした場合、ユーザーのブラウザで悪意あるコードが実行される危険性があります。

SRIを導入することで、外部リソースのハッシュ値をHTMLに記述し、ブラウザが取得するリソースと一致するかを確認します。一致しない場合は、そのリソースの読み込みを防ぎ、サイトの安全性を保つことができます。

本記事では、Subresource Integrityの基本的な仕組みから、Apacheでの具体的な導入方法、ハッシュの生成、エラー対処方法までを詳しく解説します。Webサイトのセキュリティを強化するために、ぜひ最後までご覧ください。

Subresource Integrity（SRI）とは何か

Subresource Integrity（SRI）は、Webブラウザが外部リソース（JavaScriptやCSSなど）をロードする際に、そのリソースの改ざんを検出するためのセキュリティ機構です。具体的には、外部リソースのハッシュ値をHTMLに埋め込み、ブラウザがダウンロードしたリソースと一致するかを確認します。

もし一致しない場合、リソースは破棄され、読み込みが中断されます。これにより、悪意のある第三者が外部リソースを改ざんしても、改ざんされたリソースがブラウザで実行されることを防ぎます。

SRIの仕組み

SRIはHTMLタグにintegrity属性を追加することで機能します。以下はその基本的な例です。

<script src="https://example.com/script.js"  
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/UXI1L1KYq8nL7K+FsA7IdPpI/J9l48P"  
        crossorigin="anonymous"></script>

この例では、script.jsのSHA-384で生成されたハッシュがintegrity属性に指定されています。ブラウザはscript.jsをダウンロードした後、このハッシュと比較し、一致しない場合はスクリプトを実行しません。

SRIがサポートするハッシュアルゴリズム

SRIは以下のハッシュアルゴリズムをサポートしています。

sha256 – 高速でセキュア
sha384 – セキュリティ強度が高い
sha512 – 最も高いセキュリティ強度

より強固なセキュリティを確保するため、sha384またはsha512の利用が推奨されます。

SRIが必要な理由とその利点

Webサイトで外部リソースを利用する際、Subresource Integrity（SRI）は重要な役割を果たします。外部のCDN（コンテンツ配信ネットワーク）やライブラリを活用することで、Webサイトの速度や利便性は向上しますが、外部リソースは常に改ざんのリスクにさらされています。SRIを導入することで、これらのリスクを効果的に低減できます。

SRIの必要性

外部リソースの改ざんは、次のような深刻なセキュリティ問題を引き起こす可能性があります。

悪意あるスクリプトの挿入
改ざんされた外部JavaScriptがマルウェアやフィッシングコードを実行し、ユーザーの個人情報が漏洩する恐れがあります。
サプライチェーン攻撃
CDNや外部ホスティングサーバーが侵害された場合、多数のWebサイトが同時に影響を受ける可能性があります。
改ざんが検知されないリスク
リソースが改ざんされてもブラウザは通常そのまま実行するため、管理者が気づくまで時間がかかる場合があります。

SRIを導入する利点

SRIを導入することで、以下のような利点が得られます。

改ざん検出とブロック
リソースが改ざんされている場合、ブラウザはそのリソースの読み込みを自動でブロックします。これにより、ユーザーが不正なリソースに触れることを防げます。
ユーザーの信頼性向上
セキュリティ対策が施されたWebサイトは、ユーザーの信頼を得やすくなります。SRIを導入していることを明記すれば、より安心感を与えることができます。
サーバー侵害への対策
自サイトのサーバーが侵害されなくても、外部リソースの改ざんが自動的に検出されるため、セキュリティの多層防御に役立ちます。

SRIは比較的簡単に導入できるにも関わらず、大きなセキュリティ強化効果が期待できます。Webサイトをより安全に保つために、積極的に活用しましょう。

SRIの基本的な使い方

Subresource Integrity（SRI）は、HTMLの<script>タグや<link>タグにintegrity属性を追加することで利用できます。これにより、外部リソースの改ざんが検出され、不正なリソースの読み込みが自動で防がれます。以下では、SRIの基本的な使い方を具体的な例とともに説明します。

スクリプトにSRIを追加する方法

外部のJavaScriptライブラリを読み込む場合、以下のようにSRIを適用します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"  
        integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl5+5hb7U4E+9ksynE/FX9u9f3PfFgYf5I5u5pF8Zx"  
        crossorigin="anonymous"></script>

src属性 – 外部スクリプトのURLを指定します。
integrity属性 – そのリソースのハッシュ値を記載します。
crossorigin="anonymous" – リソースの取得時にCORS（Cross-Origin Resource Sharing）を適用します。

CSSファイルにSRIを適用する方法

CSSも同様にSRIを適用できます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"  
      integrity="sha384-TgNq0VAbQCUqz4WAt6/5efDDB+6I1F+GcvXds+Zfu0xxgNHpG8e56c9a+fkDaU9m"  
      crossorigin="anonymous">

SRIの適用手順

外部リソースのハッシュを生成する
ターミナルやオンラインツールで対象リソースのハッシュを生成します。例：

   openssl dgst -sha384 -binary jquery.min.js | openssl base64 -A

HTMLにintegrity属性を追加する
生成したハッシュ値をHTMLのintegrity属性に記述します。
動作確認を行う
外部リソースが正しくロードされるかブラウザで確認します。ハッシュが一致しない場合、リソースのロードはブロックされます。

クロスオリジンの重要性

crossorigin="anonymous"を追加することで、他のドメインから取得したリソースでも適切にSRIが機能します。外部CDNなどを利用する場合は、この設定が不可欠です。

SRIは、改ざん防止の手段としてシンプルかつ効果的です。基本的な実装手順を理解して、安心して外部リソースを利用できる環境を整えましょう。

ApacheでSRIを活用する方法

ApacheサーバーでSubresource Integrity（SRI）を導入することで、外部リソースの改ざん防止を強化できます。SRIは主にHTML内で記述しますが、Apacheの設定を活用することで、リソースのハッシュ生成や適用を自動化したり、リソースの整合性をチェックしたりすることが可能です。

ここでは、Apacheを使ってSRIを効果的に導入する方法を解説します。

ApacheでSRIを導入するメリット

一元管理：リソースの改ざん防止をApache側で管理できるため、複数のページで外部リソースを利用する際の整合性が保たれます。
自動ハッシュ生成：手動でハッシュを生成する必要がなく、自動的に処理されるため手間が省けます。
セキュリティ強化：外部リソースを含めてリソースの安全性が担保されます。

SRIを適用するための基本的なApache設定

Apacheの設定を変更することで、静的ファイルの改ざんを防ぐ仕組みを作ることが可能です。

1. Apacheのモジュール確認と有効化

SRIを効果的に適用するには、Apacheのmod_headersが必要です。以下のコマンドでモジュールを有効にします。

sudo a2enmod headers
sudo systemctl restart apache2

2. SRIハッシュの自動生成

Apacheでは直接ハッシュを生成する機能はありませんが、opensslなどを使って事前に生成できます。
例：

openssl dgst -sha384 -binary /var/www/html/js/app.js | openssl base64 -A

3. ApacheでSRIを適用したレスポンスヘッダの追加

リソースの読み込み時にSRIを適用するために、以下のように.htaccessファイルやApache設定ファイルでレスポンスヘッダを追加します。

<FilesMatch "\.(js|css)$">
  Header set Content-Security-Policy "script-src 'self' https://cdn.example.com; style-src 'self' https://cdn.example.com"
</FilesMatch>

script-srcとstyle-src：外部リソースの読み込み先を制限します。
ハッシュ値の追加：必要に応じて、integrity属性を直接HTMLに記述します。

4. HTML内でのSRI適用

Apache側で生成したハッシュをHTMLに反映します。

<script src="https://cdn.example.com/script.js"  
        integrity="sha384-xxxxx"  
        crossorigin="anonymous"></script>

ApacheでのSRI適用のポイント

定期的なリソースの更新：外部リソースが更新された際には、新たにハッシュを生成する必要があります。
キャッシュの活用：ハッシュが頻繁に変わる場合、キャッシュを利用して効率的に管理しましょう。
コンテンツセキュリティポリシー（CSP）との併用：SRIとCSPを組み合わせることで、さらなるセキュリティ強化が可能です。

ApacheでのSRI導入は難しくありません。手順に従い、Webサイトのセキュリティレベルを高めて、安全な運用環境を構築しましょう。

実際のSRI導入例

ここでは、Apacheを使ったWebサイトで外部リソースにSubresource Integrity（SRI）を導入する具体的な例を示します。外部のCDNからJavaScriptやCSSファイルを読み込むケースを想定し、ハッシュの生成からHTMLへの適用までの流れを解説します。

例：jQueryのSRI導入

CDNからjQueryを読み込む際にSRIを適用する例を見てみましょう。

1. jQueryのダウンロードとハッシュ生成

jQueryをCDNからダウンロードし、ローカル環境でハッシュを生成します。

wget https://code.jquery.com/jquery-3.6.0.min.js
openssl dgst -sha384 -binary jquery-3.6.0.min.js | openssl base64 -A

出力例：

9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=

2. HTMLへのSRI適用

生成したハッシュをHTMLのintegrity属性に追加します。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"  
        integrity="sha384-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="  
        crossorigin="anonymous"></script>

integrity：先ほど生成したハッシュを記述します。
crossorigin：anonymousを指定することで、クロスオリジンのリソースでもSRIが適用されます。

例：Bootstrap CSSのSRI導入

BootstrapのCSSにもSRIを適用します。

1. ハッシュ生成

wget https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
openssl dgst -sha384 -binary bootstrap.min.css | openssl base64 -A

出力例：

ePH+uZ22jU26QjKlKjLdkJp1uXmvT8vF1CzMr0kC1L8Q/D5I5Pp8nXvYEuPpB6Zk

2. HTMLへの適用

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"  
      integrity="sha384-ePH+uZ22jU26QjKlKjLdkJp1uXmvT8vF1CzMr0kC1L8Q/D5I5Pp8nXvYEuPpB6Zk"  
      crossorigin="anonymous">

複数リソースへのSRI適用

JavaScriptやCSSだけでなく、Webフォントなど他の外部リソースにも同様の手順でSRIを適用できます。

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"  
      rel="stylesheet"  
      integrity="sha384-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"  
      crossorigin="anonymous">

Apacheで静的ファイルにSRIを適用する場合

自サーバー内のリソースにも同様の方法でハッシュを生成し、SRIを適用することが可能です。

<script src="/static/js/main.js"  
        integrity="sha384-yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy"  
        crossorigin="anonymous"></script>

SRI導入の確認方法

ブラウザコンソールで確認
SRIが適切に動作しているかを確認するには、ブラウザの開発者ツールを使い、ネットワークタブでリソースの読み込み状況を確認します。ハッシュが一致しない場合、エラーが表示されリソースの読み込みがブロックされます。
オンラインツールの活用
SRI Hash Generatorなどのオンラインツールを使えば、手軽にハッシュ生成が可能です。

SRIは手順さえ覚えれば導入が簡単で、外部リソースの改ざんを効果的に防ぐことができます。これにより、Webサイトのセキュリティが大幅に向上します。

SRIのハッシュ生成方法

Subresource Integrity（SRI）を適用するには、外部リソースのハッシュを生成する必要があります。このハッシュはリソースが改ざんされていないことを保証し、改ざんが検出された場合はブラウザがリソースの読み込みを拒否します。ここでは、SRIのハッシュを生成する具体的な方法を解説します。

1. ハッシュ生成の基本的な流れ

対象リソースをダウンロード
ハッシュを生成
生成したハッシュをHTMLのintegrity属性に追加

2. OpenSSLを使用したハッシュ生成

ハッシュ生成にはopensslコマンドを使うのが一般的です。以下に手順を示します。

JavaScriptやCSSのハッシュ生成

wget https://code.jquery.com/jquery-3.6.0.min.js
openssl dgst -sha384 -binary jquery-3.6.0.min.js | openssl base64 -A

wgetで外部リソースをダウンロードします。
openssl dgst -sha384でSHA-384ハッシュを生成します。
base64 -Aで生成されたハッシュをBase64でエンコードします。

出力例：

9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=

CSSファイルの例

wget https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
openssl dgst -sha384 -binary bootstrap.min.css | openssl base64 -A

3. 複数のハッシュアルゴリズムを使用する方法

SRIではSHA-256、SHA-384、SHA-512が利用できます。より強固なセキュリティを求める場合はSHA-384またはSHA-512を使用しましょう。

SHA-256

  openssl dgst -sha256 -binary jquery-3.6.0.min.js | openssl base64 -A

SHA-512

  openssl dgst -sha512 -binary jquery-3.6.0.min.js | openssl base64 -A

4. HTMLへの適用

生成したハッシュをHTMLに適用します。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"  
        integrity="sha384-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="  
        crossorigin="anonymous"></script>

5. オンラインツールでのハッシュ生成

コマンドラインが苦手な場合は、オンラインのハッシュ生成ツールを利用できます。

SRI Hash Generator
ファイルのURLを入力するだけで簡単にハッシュが生成されます。

6. 自動スクリプトでのハッシュ生成

複数のリソースを一度に処理したい場合は、スクリプトを使って自動化できます。

for file in *.js *.css; do
  openssl dgst -sha384 -binary "$file" | openssl base64 -A
done

これで、対象ディレクトリ内のすべての.jsおよび.cssファイルのハッシュが生成されます。

7. ハッシュを再生成するタイミング

外部リソースがバージョンアップされた場合は、新しいハッシュを生成する必要があります。
定期的にスクリプトを使って自動的にハッシュを更新することで、リソース改ざんリスクを低減できます。

SRIのハッシュ生成は簡単な手順で行えるため、外部リソースのセキュリティを確保するために積極的に導入しましょう。

外部リソースの自動ハッシュ生成と管理

Subresource Integrity（SRI）を複数の外部リソースに適用する場合、手動でハッシュを生成するのは手間がかかります。ここでは、スクリプトやツールを使って自動的にハッシュを生成し、管理する方法を解説します。これにより、Webサイトのメンテナンスが効率化され、外部リソースの改ざん防止が容易になります。

1. SRIハッシュ自動生成スクリプト

以下のシェルスクリプトは、特定のディレクトリ内のJavaScriptやCSSファイルのハッシュを自動的に生成します。

シェルスクリプト例（generate_sri.sh）

#!/bin/bash
OUTPUT_FILE="sri_hashes.txt"
> $OUTPUT_FILE

echo "Generating SRI hashes for .js and .css files..."

for file in $(find . -type f \( -name "*.js" -o -name "*.css" \)); do
  hash=$(openssl dgst -sha384 -binary "$file" | openssl base64 -A)
  echo "$file: sha384-$hash" >> $OUTPUT_FILE
done

echo "SRI hashes generated and saved to $OUTPUT_FILE"

スクリプトの実行方法

chmod +x generate_sri.sh
./generate_sri.sh

findコマンドで対象の.jsおよび.cssファイルを再帰的に検索します。
それぞれのファイルに対してSHA-384のハッシュを生成し、sri_hashes.txtに保存します。
必要に応じて、このファイルを参照してHTMLに反映します。

2. Apacheでの自動ハッシュ付与

Apacheでは静的リソースのレスポンスヘッダにSRIを自動で適用する機能はありませんが、サーバーでスクリプトを定期的に実行することで自動化できます。

cronで自動実行

以下のようにcronジョブを設定し、定期的にSRIハッシュを生成するようにします。

crontab -e

0 3 * * * /path/to/generate_sri.sh

毎日午前3時にスクリプトを実行し、最新のハッシュを生成します。

3. WebpackやGulpを使った自動ハッシュ生成

モダンなWeb開発では、ビルドツールを使ってリソースのハッシュを自動生成できます。

Webpackプラグインの例

webpack-subresource-integrityプラグインを使えば、Webpackでビルドする際に自動的にSRIが付与されます。

npm install webpack-subresource-integrity --save-dev

webpack.config.jsの設定

const SubresourceIntegrityPlugin = require('webpack-subresource-integrity');

module.exports = {
  output: {
    crossOriginLoading: 'anonymous',
  },
  plugins: [
    new SubresourceIntegrityPlugin({
      hashFuncNames: ['sha384'],
      enabled: true,
    }),
  ],
};

これにより、Webpackでビルドされたすべてのリソースに自動的にSRIが追加されます。

4. オンラインツールでの自動生成

大量のリソースがない場合は、オンラインツールを使って簡単にハッシュを生成するのも有効です。

SRI Hash Generator – URLを入力して簡単にハッシュを生成可能です。
Hashify – ファイルをアップロードして自動的にSRIハッシュを取得します。

5. 自動ハッシュ管理のポイント

リソースの更新に対応：外部リソースのバージョンが更新された際に自動でハッシュを生成し直す仕組みを整えておきましょう。
エラー通知の導入：ハッシュが一致しない場合のエラー通知を実装し、改ざんの早期検出を可能にします。
セキュリティ強化：sha384やsha512など、より強力なハッシュアルゴリズムを使用してリソースの安全性を確保します。

SRIの自動生成と管理を導入することで、効率的にセキュリティ対策を行い、安全なWebサイト運用が可能になります。

トラブルシューティングと注意点

Subresource Integrity（SRI）を導入する際には、いくつかの問題が発生する可能性があります。特に、リソースの読み込みがブロックされたり、想定通りに動作しなかったりするケースがあります。ここでは、SRI導入時によくある問題とその解決方法を解説します。

1. ハッシュ不一致エラー

症状:
ブラウザのコンソールに以下のようなエラーが表示され、リソースがロードされません。

Failed to find a valid digest in the 'integrity' attribute for resource 'https://cdn.example.com/script.js'. The resource has been blocked.

原因:

リソースが更新され、内容が変更された。
ハッシュ生成時に間違ったファイルを指定した。
コピー＆ペースト時にハッシュが崩れた。

解決方法:

外部リソースの最新バージョンをダウンロードし直します。
新しいハッシュを生成してHTMLに適用します。
正しいハッシュが反映されているかを再度確認します。

openssl dgst -sha384 -binary jquery-3.6.0.min.js | openssl base64 -A

2. `crossorigin`が設定されていない

症状:
SRIが設定されているにも関わらず、ブラウザがSRIを無視してリソースをロードします。

原因:

crossorigin属性が正しく指定されていない。
CORS（Cross-Origin Resource Sharing）が適切に設定されていない。

解決方法:
HTMLのスクリプトやリンクタグにcrossorigin="anonymous"を追加します。

<script src="https://cdn.example.com/script.js"  
        integrity="sha384-xxxxx"  
        crossorigin="anonymous"></script>

もしリソースが認証が必要な場合は、crossorigin="use-credentials"を使用します。

3. リソースが変更された後にハッシュの再生成を忘れた

症状:
外部リソースが更新された後に、SRIが原因でスクリプトやCSSが読み込まれなくなります。

原因:

外部CDNがリソースをアップデートし、ハッシュが無効になった。

解決方法:

定期的に外部リソースをチェックし、更新された際には新しいハッシュを生成します。
cronジョブや自動スクリプトを使って、リソースの定期的なチェックを行います。

4. 古いブラウザでSRIが動作しない

症状:
古いブラウザではSRIがサポートされず、スクリプトが実行されないことがあります。

原因:

SRIは比較的新しい技術であり、古いブラウザ（特にIE 11以前）ではサポートされていません。

解決方法:

フォールバック処理を導入し、SRI非対応のブラウザでもリソースがロードされるようにします。

<script src="https://cdn.example.com/script.js"  
        integrity="sha384-xxxxx"  
        crossorigin="anonymous"  
        onerror="this.onerror=null;this.src='https://cdn.example.com/fallback.js';"></script>

古いブラウザへの対応が不要な場合は、最新のブラウザをターゲットにします。

5. CSP（Content Security Policy）との競合

症状:
SRIを適用しているのにリソースがブロックされ、CSPエラーが表示される。

原因:

CSPで外部リソースの読み込みが制限されている。

解決方法:
CSPポリシーにSRIを考慮した設定を追加します。

Content-Security-Policy: script-src 'self' https://cdn.example.com; style-src 'self' https://cdn.example.com

'self'と外部CDNを許可することで、CSPとSRIの両方が機能します。

6. リソースのキャッシュが影響する

症状:
リソースが変更されたにも関わらず、古いハッシュでリソースが読み込まれてしまう。

原因:

ブラウザやCDNのキャッシュが有効であり、古いリソースが保持されている。

解決方法:

リソースのバージョン管理を行い、更新時にURLを変更します。

<script src="https://cdn.example.com/script.js?v=2.0"  
        integrity="sha384-xxxxx"  
        crossorigin="anonymous"></script>

まとめ

SRI導入時に発生する問題の多くは、ハッシュの不一致や設定ミスによるものです。自動化スクリプトや定期的なリソースチェックを行うことで、これらの問題を未然に防ぐことができます。SRIはシンプルで強力なセキュリティ機構であり、正しく運用することでWebサイトの安全性が大幅に向上します。

まとめ

本記事では、Apache環境でSubresource Integrity（SRI）を活用し、外部リソースの改ざんを検知・防止する方法について詳しく解説しました。

SRIの基本概念から、具体的な導入方法、ハッシュ生成の自動化、そしてトラブルシューティングまでを網羅することで、Webサイトのセキュリティ強化が実現可能になります。

SRIを適切に運用することで、外部リソースの改ざんリスクを効果的に低減し、安全で信頼性の高いWebサイトを維持できます。導入が簡単でありながら強力なセキュリティ機構であるため、今すぐにでも実装を検討してみてください。

ApacheでSubresource Integrity(SRI)を使って外部リソース改ざんを防ぐ方法

Subresource Integrity（SRI）とは何か

SRIの仕組み

SRIがサポートするハッシュアルゴリズム

SRIが必要な理由とその利点

SRIの必要性

SRIを導入する利点

SRIの基本的な使い方

スクリプトにSRIを追加する方法

CSSファイルにSRIを適用する方法

SRIの適用手順

クロスオリジンの重要性

ApacheでSRIを活用する方法

ApacheでSRIを導入するメリット

SRIを適用するための基本的なApache設定

1. Apacheのモジュール確認と有効化

2. SRIハッシュの自動生成

3. ApacheでSRIを適用したレスポンスヘッダの追加

4. HTML内でのSRI適用

ApacheでのSRI適用のポイント

実際のSRI導入例

例：jQueryのSRI導入

1. jQueryのダウンロードとハッシュ生成

2. HTMLへのSRI適用

例：Bootstrap CSSのSRI導入

1. ハッシュ生成

2. HTMLへの適用

複数リソースへのSRI適用

Apacheで静的ファイルにSRIを適用する場合

SRI導入の確認方法

SRIのハッシュ生成方法

1. ハッシュ生成の基本的な流れ

2. OpenSSLを使用したハッシュ生成

JavaScriptやCSSのハッシュ生成

CSSファイルの例

3. 複数のハッシュアルゴリズムを使用する方法

4. HTMLへの適用

5. オンラインツールでのハッシュ生成

6. 自動スクリプトでのハッシュ生成

7. ハッシュを再生成するタイミング

外部リソースの自動ハッシュ生成と管理

1. SRIハッシュ自動生成スクリプト

シェルスクリプト例（generate_sri.sh）

スクリプトの実行方法

2. Apacheでの自動ハッシュ付与

cronで自動実行

3. WebpackやGulpを使った自動ハッシュ生成

Webpackプラグインの例

webpack.config.jsの設定

4. オンラインツールでの自動生成

5. 自動ハッシュ管理のポイント

トラブルシューティングと注意点

1. ハッシュ不一致エラー

2. `crossorigin`が設定されていない

3. リソースが変更された後にハッシュの再生成を忘れた

4. 古いブラウザでSRIが動作しない

5. CSP（Content Security Policy）との競合

6. リソースのキャッシュが影響する

まとめ

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル