フロントエンドのセキュリティは、ウェブアプリケーションを安全に保つために非常に重要です。この記事では、フロントエンドで一般的に見られるセキュリティの脅威と、それに対する対策について詳しく説明します。
同一オリジンポリシー(SOP)は、あるオリジンから読み込まれた文書やスクリプトが、異なるオリジンのリソースとどのようにやり取りできるかを制限するセキュリティメカニズムです。このポリシーは、悪意あるウェブサイトがユーザーのデータにアクセスするのを防ぎます。
// このスクリプトが実行されるオリジン: http://example.com
try {
// 異なるオリジン（http://another-origin.com）のリソースにアクセスしようとする
fetch("http://another-origin.com/data.json")
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error("アクセスできませんでした。", error));
} catch (error) {
console.error("エラーが発生しました。", error);
}
このコードは、http://example.comからhttp://another-origin.comにあるdata.jsonを取得しようとします。しかし、同一オリジンポリシーのため、このリクエストはブラウザによってブロックされます。
対策と回避策
同一オリジンポリシーによる制限を回避する方法として、CORS（Cross-Origin Resource Sharing）があります。CORS は、異なるオリジン間でのリソース共有を可能にするためのメカニズムです。サーバー側で適切な CORS ヘッダーを設定することで、異なるオリジンからのリクエストを安全に許可することができます。
サーバー側で以下のように CORS ヘッダーを設定します。
Access-Control-Allow-Origin: http://example.com
この設定により、http://example.comからのリクエストは、http://another-origin.comによって許可されます。
同一オリジンポリシーは、Web セキュリティにおいて非常に重要な役割を果たします。しかし、現代の Web アプリケーションでは、異なるオリジン間でのリソース共有が必要な場面も多くあります。そのため、CORS のような技術を適切に利用することが重要。
XSS
XSS クロスサイトスクリプティング(XSS)は、攻撃者が悪意あるスクリプトをウェブページに注入し、他のユーザーのブラウザ上で実行させる脆弱性です。
対策 CSP: コンテンツセキュリティポリシー(CSP)は、どのようなリソースがウェブページに読み込まれるべきかをブラウザに指示する方法です。 エスケープ: ユーザー入力をエスケープ処理することで、スクリプトとして解釈されるのを防ぎます。 サニタイズ: ユーザー入力から危険な要素を取り除くことで、XSS 攻撃を防ぎます。 URL スキームを http/https に限定: リンク生成時にスキームを制限することで、悪意あるリンクの利用を防ぎます。 適切な DOM API を使った対策: innerText のような安全な DOM API を使って、XSS 攻撃を防ぎます。 DOM Purify: DOM Purify を使用して、安全でない HTML をクリーンアップし、XSS 攻撃を防ぎます。 CSRF クロスサイトリクエストフォージェリ(CSRF)は、ユーザーがログインしているウェブアプリケーションに対して、ユーザーの意図しない操作を強制する攻撃です。
対策 トークン: 各フォームリクエストに一意のトークンを含めることで、CSRF 攻撃を防ぎます。 Clickjacking Clickjacking は、ユーザーが見えない iframe 上の要素をクリックさせることで、意図しない操作を実行させる攻撃です。
対策 X-Frame-Options ヘッダー: このヘッダーを使用して、ページが iframe 内で表示されるのを防ぎます。 Open Redirect Open Redirect は、攻撃者がユーザーを悪意あるウェブサイトにリダイレクトさせる脆弱性です。
対策 リダイレクト先の検証: リダイレクト先の URL を検証し、信頼できるものだけを許可します。