最終更新：
Click to expand / collapse
Web APIの統合は便利なだけでなく、脆弱性の潜在的なソースでもあります。CORS （Cross-Origin Resource Sharing）、クロスサイトリクエストフォージェリ（CSRF）および悪意のあるJavaScript （XSS）インジェクションに対する保護メカニズムを完全にサポートします。
これらの対策は、ブラウザクライアント、フロントエンド、ダッシュボード、サードパーティの統合を扱う場合に特に重要です。
実装されているもの
| メカニズム | 目的とメリット |
|---|---|
| CORSの設定 | 信頼されたドメインからのみAPIアクセスを制限する |
| CSRFトークン | ブラウザからPOST/PUTリクエストの正当性を確認する |
| Cookie SameSite | 許可されていないクロスドメインクッキーのブロック |
| XSSのろ過 | 入力をクリーンアップし、スクリプトインジェクションから保護 |
| コンテンツセキュリティポリシー（CSP） | 許可されたスクリプトとリソースソースの管理 |
どのように機能しますか
1.信頼できるソースリストを構成する（'Access-Control-Allow-Origin'）
2.すべてのリクエストはヘッダ検証でCORSプリフライト（OPTIONS）を渡します
3.フォームでは、サーバーで検証されたCSRFトークンを使用します
4.すべての入力データはXSSフィルターされ、スクリーニングされます
5.CSPは、承認されたソースからのみスクリプトの実行を制限します
APIとフロントエンドのメリット
第三者サイトによるデータおよびトークンの盗難を防止
ブラウザ、SPA、サードパーティの統合による安全な作業
許可されたドメイン、メソッド、ヘッダーの柔軟な構成
セッションと承認を改ざんまたはキャプチャから保護する
APIに対するユーザーと監査者の信頼を高める
特に重要な点
ブラウザからAPIを使用したWebアプリケーション
ダッシュボード、個人アカウント、管理者
React、 Vue、 AngularのSPAアプリケーションとフロントエンド
カスタムトークンまたはCookie認証を持つプラットフォーム