パート : フロントエンド開発における Web セキュリティの基礎-jsチュートリアル-php.cn

Part : Fundamentals of Web Security in Frontend Development

フロントエンド開発者として、アプリケーションをクライアント側の脅威から確実に保護することは不可欠です。サイバー攻撃がより頻繁かつ巧妙になる中、フロントエンドセキュリティの基本を理解することで、データ侵害、ユーザー情報の漏洩、さらにはアプリケーションの全面的な乗っ取りにつながるよくある落とし穴からアプリを守ることができます。この投稿では、フロントエンド Web セキュリティの中核概念を詳しく掘り下げ、最も一般的な脆弱性のいくつか、クロスサイトスクリプティング (XSS)、クロスサイトリクエストフォージェリ (CSRF)、クリックジャッキング、およびこれらの脅威から保護するための基本的な手順の概要を説明します。

1.フロントエンドのセキュリティが重要な理由

Web セキュリティは単なるバックエンドの問題ではありません。多くの攻撃はフロントエンドの脆弱性を悪用し、クライアント側をターゲットにして Web ページの操作、機密データの窃取、またはユーザーになりすます。フロントエンドのセキュリティは、動的なクライアント側機能が重要なユーザー情報を処理するため、攻撃者の潜在的なターゲットとなる最新のアプリケーションにとって特に重要です。これらの脆弱性を理解し、予防策を講じることが、安全なアプリケーションを構築するための第一歩です。

2.クロスサイトスクリプティング (XSS)

XSS とは何ですか?

クロスサイトスクリプティング (XSS) は、攻撃者が Web サイトに悪意のあるスクリプトを挿入し、無防備なユーザーがブラウザで実行する攻撃の一種です。 XSS は、ユーザーがページ上で何を表示し操作するかを攻撃者に制御させ、データの盗難、セッションのハイジャック、またはアカウントの侵害につながる可能性があるため、特に危険です。

XSS 攻撃の種類

保存された XSS: 悪意のあるスクリプトはサーバーに保存され、ユーザーが侵害されたページにアクセスするたびにロードされます。
反映された XSS: スクリプトは、通常は URL パラメーターを通じてサーバーから「反映」されるリクエストの一部です。
DOM ベースの XSS: スクリプトは、多くの場合サーバーを介さずに、ドキュメントオブジェクトモデル (DOM) を直接操作します。

XSS 攻撃の防止

XSS から防御するには、次の主要な戦略を使用します。

入力の検証: ユーザー入力を常に検証して、期待される形式とタイプを満たしていることを確認します。
出力エンコーディング: ユーザーが生成したコンテンツをページに表示する前にエスケープしてエンコードします。これは、スクリプトの実行を防ぐのに役立ちます。
コンテンツセキュリティポリシー (CSP): CSP は、スクリプト、画像、その他のリソースをロードできるソースを制限するセキュリティヘッダーです。これにより、許可されていないスクリプトがページ上で実行されるのを防ぐことができます。

CSP の例:
Content-Security-Policy: default-src 'self'; script-src 'self'; img-src 'self' https://trusted-cdn.com;
ログイン後にコピー
ログイン後にコピー

CSP ポリシーを使用すると、承認されたリソースのみがサイトで実行されることが保証されるため、XSS に対する強力な抑止力になります。

3.クロスサイトリクエストフォージェリ (CSRF)

CSRF とは何ですか?

クロスサイトリクエストフォージェリ (CSRF) は、認証されたユーザーを騙して Web アプリケーション上で望ましくないアクションを実行させます。ユーザーがサイトにログインしている場合、攻撃者はユーザーの同意なしにそのユーザーに代わってリクエストを作成できます。 CSRF 攻撃は、不正な資金移動、アカウント詳細の変更、またはアプリケーション内での不正なアクションにつながる可能性があります。

CSRF 攻撃の防止

CSRF から保護するには、次の対策を実施してください:

CSRF トークン: ユーザーセッションごとに一意のトークンを生成し、すべての機密リクエストに含めます。このトークンは、リクエストを処理する前にサーバー側で検証する必要があります。
SameSite Cookie: SameSite 属性を使用して Cookie を設定すると、Cookie が同じサイトから発信されたリクエストでのみ送信され、クロスサイトリクエストにクッキーが含まれることがなくなります。

SameSite Cookie の例:
document.cookie = "sessionId=abc123; SameSite=Strict";
ログイン後にコピー
ログイン後にコピー

Cookie の二重送信: もう 1 つの方法は、2 つのトークン (1 つは Cookie に保存され、もう 1 つはリクエストの本文またはヘッダーに保存) を使用し、リクエストを受け入れる前にそれらが一致することを確認することです。

4.クリックジャッキング

クリックジャッキングとは何ですか?

クリックジャッキングは、悪意のあるサイトが信頼できるサイトの透明な iframe を埋め込み、ユーザーが表示されているページを操作していると思い込ませて、隠された iframe を操作させる手法です。攻撃者はクリックジャッキングを使用してクリックを盗んだり、ユーザーを騙して設定を変更させたり、その他の有害な行為を実行したりする可能性があります。

クリックジャッキングの防止

クリックジャッキングを防ぐには、次の戦略を使用してください:

X-Frame-Options ヘッダー: この HTTP ヘッダーを使用すると、サイトを iframe に埋め込むことができるかどうかを制御できます。 DENY または SAMEORIGIN に設定すると、外部サイトがコンテンツを埋め込むことができなくなります。

X-Frame-Options ヘッダーの例:
Content-Security-Policy: default-src 'self'; script-src 'self'; img-src 'self' https://trusted-cdn.com;
ログイン後にコピー
ログイン後にコピー

コンテンツセキュリティポリシー (CSP): CSP の Frame-ancestors ディレクティブを使用して、iframe へのコンテンツの埋め込みを許可するドメインを指定します。

フレーム祖先を含む CSP の例:
document.cookie = "sessionId=abc123; SameSite=Strict";
ログイン後にコピー
ログイン後にコピー

これらのヘッダーは、悪意のあるサイト上の不正なコンテンツとのやり取りからユーザーを保護するのに役立ちます。

5.重要なポイントとベストプラクティス

上記の脆弱性は、フロントエンドアプリケーションが直面するセキュリティリスクの一部にすぎませんが、対処すべき最も一般的かつ重要な脅威です。以下にベストプラクティスを簡単にまとめます:

入力の検証とサニタイズ: アプリケーションが受け取る入力、特にユーザーからの入力を常に検証してサニタイズします。
セキュアヘッダーを使用する: CSP、X-Frame-Options、SameSite Cookie などのセキュリティヘッダーを設定して、コンテンツソースを制御し、クロスサイト攻撃を防ぎます。
CSRF 保護の実装: CSRF トークンと SameSite Cookie を使用して、認証されたセッションでの不正なアクションからユーザーを保護します。
最初からセキュリティを念頭に置く: 開発プロセスの早い段階でセキュリティに関する考慮事項を組み込み、アプリケーションの成長に合わせてそれらの考慮事項を継続的に評価します。