パート : フロントエンド アプリケーションを保護するための実践的な手順

パート 1 では、XSS、CSRF、クリックジャッキングなどの一般的な脆弱性を理解するのに役立つ、基本的なフロントエンド セキュリティの概念について説明しました。この投稿では、フロントエンド アプリケーションをこれらやその他の脅威から保護するための実践的で実践的なテクニックについて詳しく説明します。サードパーティの依存関係の管理、入力のサニタイズ、堅牢なコンテンツ セキュリティ ポリシー (CSP) の設定、クライアント側認証の保護などの重要なトピックについて説明します。

---

1.依存関係管理の安全性を確保

最新の Web アプリケーションはサードパーティのライブラリに大きく依存しており、多くの場合、安全でないパッケージや古いパッケージによるリスクが生じます。依存関係管理は、サードパーティのコードの脆弱性を悪用する攻撃のリスクを軽減することで、フロントエンドのセキュリティにおいて重要な役割を果たします。

• 監査パッケージ: npm Audit、Snyk、Dependabot などのツールは、依存関係の脆弱性を自動的にスキャンし、重大な問題を警告し、推奨される修正を提供します。

• 依存関係のバージョンのロック: package.json 内の依存関係の正確なバージョンを指定するか、ファイル (package-lock.json など) をロックして、脆弱性を引き起こす可能性のある意図しない更新を防ぎます。

• 定期更新: 依存関係を更新し、脆弱性を監査するスケジュールを設定し、最も安全な最新バージョンを使用していることを確認します。

---

2.入力の検証とデータのサニタイズ

入力検証 と データサニタイズ は、さまざまなインジェクション攻撃、特に XSS からアプリケーションを保護するための重要な実践です。

• ユーザー入力のサニタイズ: DOMPurify などのライブラリを使用して HTML をサニタイズし、ページに表示される前にユーザー入力から悪意のあるコードを除去します。

• フレームワーク固有のセキュリティ機能: React や Angular などの多くの最新フレームワークには、変数を自動的にエスケープすることによる XSS に対する保護機能が組み込まれています。ただし、React のangerlySetInnerHTML などのメソッドには注意し、生の HTML を使用する前に必ずサニタイズしてください。

• サーバー側検証: クライアント側検証をサーバー側検証で補完し、両方の層にわたるデータの整合性とセキュリティを確保します。

JavaScript での DOMPurify の例:

import DOMPurify from 'dompurify';
const sanitizedInput = DOMPurify.sanitize(userInput);

---

3.コンテンツ セキュリティ ポリシー (CSP) の実装

コンテンツ セキュリティ ポリシー (CSP) は、スクリプト、画像、スタイルシートなどのリソースの読み込み元を制限し、XSS 攻撃のリスクを大幅に軽減する強力なツールです。

Setting Up a Basic CSP

• Define Directives: Use CSP directives to specify trusted sources for scripts, styles, and other resources. For example, script-src 'self' https://trusted-cdn.com limits script sources to your domain and the trusted CDN.

• Testing and Refining CSP: Start by setting the CSP in report-only mode to detect any violations without enforcing the policy. Once confirmed, apply the policy in enforcement mode.

Example CSP Header:

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com;

Using CSP in Practice

Apply CSP in your web server configuration, such as through HTTP headers or tags. This will enforce resource loading restrictions for browsers accessing your application.

---

4. Securing Authentication and Authorization

Authentication and authorization are essential for controlling access and ensuring data security on the client side.

• Use Secure Tokens: Session tokens and JSON Web Tokens (JWTs) should be securely stored (often in HttpOnly cookies to prevent JavaScript access) and encrypted for sensitive operations.

• Configure CORS Properly: Cross-Origin Resource Sharing (CORS) restricts which domains can access your API. Configure CORS headers to allow only trusted origins, using strict methods and credentials configurations.

• Role-Based Access Control (RBAC): Implement RBAC on both the client and server to control which users can access certain resources and functionality, reducing the risk of unauthorized actions.

---

5. Conclusion and Key Takeaways

By following these practical steps, you’re taking significant strides toward a secure frontend. Securing dependencies, sanitizing input, applying CSP, and using secure tokens are vital measures for any modern application. In Part 3, we’ll look at advanced frontend security techniques, including refining CSP further, securely handling sensitive data, and using security tools for auditing and testing.

---

以上がパート : フロントエンド アプリケーションを保護するための実践的な手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。