高度なWebセキュリティ：基本を超えて

高度なWebセキュリティ：基本を超える

HTTPSの使用、パスワードのハッシュ化、入力検証といったWebセキュリティの基本を押さえたら、洗練された攻撃からウェブサイトを保護できる、より高度なツールがあります。最新のブラウザは、正しく設定すれば攻撃のカテゴリ全体を防ぐことができる強力なセキュリティ機能を提供しています。

コンテンツセキュリティポリシー：最強の防御

コンテンツセキュリティポリシー（CSP）は、クロスサイトスクリプティング（XSS）攻撃に対する最も効果的な防御策です。これは、ページにロードできるコンテンツのソースをブラウザに正確に指示することで機能します。スクリプト、スタイル、画像、フォント、その他のリソースを提供できるドメインを指定できます。

CSPを使用すると、攻撃者がページにスクリプトタグを挿入できたとしても、許可されたソースからのものでなければブラウザはロードを拒否します。インラインスクリプトを完全に禁止したり、eval()の使用をブロックしたり、フォームの送信先を制限したりすることもできます。CSPはContent-Security-Policy HTTPヘッダーを介して設定され、正しく設定するには多少の労力が必要ですが、その価値はあります。

クロスオリジンリソース共有（CORS）

CORSは、他のどのウェブサイトがAPIにアクセスできるかを制御します。デフォルトでは、ブラウザはあるドメインからのJavaScriptが別のドメインにリクエストを行うのをブロックします。CORSヘッダーを使用すると、特定のオリジンがリソースにアクセスするのを選択的に許可できます。これは、異なるドメインから呼び出される必要があるAPIにとって不可欠です。

CORSは注意深く設定してください — アクセスが必要な特定のオリジンのみを許可します。資格情報とともにワイルドカード（*）を使用しないでください。Access-Control-Allow-Originヘッダーを使用して許可するドメインを正確に指定し、サーバー側でOriginヘッダーを検証します。

クロスオリジン分離

クロスオリジンオープナーポリシー（COOP）とクロスオリジンエンベッダーポリシー（COEP）は、ウェブサイトを他のオリジンから分離するために連携する2つのヘッダーです。有効にすると、Spectreのようなクロスオリジン攻撃を防ぎ、SharedArrayBufferや高解像度タイマーなどの強力な機能を有効にします。

トレードオフとして、COEPはページがロードするすべてのリソースが同一オリジンであるか、クロスオリジンアクセス可能として明示的にマークされている必要があります。これにより、サードパーティのスクリプトやウィジェットが壊れる可能性があります。強力な機能ですが、慎重な実装が必要です。

サブリソース整合性

CDNからスクリプトやスタイルシートをロードするとき、それが改ざんされていないことをどのように確認しますか？サブリソース整合性（SRI）を使用すると、HTMLタグにファイルの暗号化ハッシュを含めることができます。ブラウザはファイルをダウンロードし、そのハッシュを計算し、ハッシュが一致した場合のみ実行します。これにより、CDNの侵害やサプライチェーン攻撃から保護されます。

サプライチェーンセキュリティ

最新のウェブアプリケーションは何百もの依存関係に依存しています。それぞれが潜在的な攻撃ベクトルです。package-lock.jsonまたはyarn.lockで依存関係のバージョンを固定します。npm auditやSnyk、Dependabotなどのツールで定期的に依存関係を監査します。コミットをGPGまたはSSHで署名します。そして、使用する依存関係の数を最小限に抑えます — 追加するライブラリはすべて信頼するコードです。

すべてをまとめる

基本から始めましょう：HTTPSをあらゆる場所に、適切な認証、入力検証。次に、XSSを防ぐためにCSP、APIアクセスを制御するためにCORS、HTTPSを強制するためにHSTSを追加します。CDNリソースにはSRIを使用します。Permissions-Policyを設定して不要な機能を無効にします。そして依存関係を最新に保ちます。セキュリティはプロセスであり、目的地ではありません — 継続的な注意とメンテナンスが必要です。