JavaScriptでセキュアなアプリを作るためのCORS対策ガイド

作成日 2025.02.26
javascript
javascript

クロスオリジンリソースシェアリング（CORS）は、異なるオリジン間でリソースを共有する際に必要となるセキュリティ制御です。本記事では、JavaScriptを使用したアプリケーションでCORSの問題に対処する方法とセキュアなアプリケーションを作成するためのベストプラクティスを解説します。

1. CORSとは？
2. 基本的なCORSの動作
3. サーバーでのCORS設定
4. プリフライトリクエスト
5. クライアント側でのCORS設定
6. 認証情報を含むリクエスト
7. サーバーでのアクセス許可ヘッダー
8. 特定のメソッドやヘッダーの制限
9. クロスオリジンのリソース共有制限
10. CORSエラーのトラブルシューティング
11. CORSを避けるためのベストプラクティス
12. セキュリティ上の注意点
13. まとめ

CORSとは？

CORSは、ブラウザが異なるオリジン（ドメイン、ポート、またはプロトコル）からリソースをリクエストする際に発生するセキュリティ制約を管理する仕組みです。この制約により、セキュリティを維持しつつ、クライアントとサーバーが異なるオリジン間で通信することが可能になります。

基本的なCORSの動作

CORSでは、ブラウザがリクエストヘッダーに`Origin`を含め、サーバーがレスポンスヘッダーに`Access-Control-Allow-Origin`を設定することで、リソースのアクセスを許可するかどうかを決定します。

サーバーでのCORS設定

const express = require("express");
const cors = require("cors");

const app = express();

// CORS設定
app.use(cors({
  origin: "https://your-allowed-origin.com",
  methods: ["GET", "POST"],
  allowedHeaders: ["Content-Type"]
}));

app.get("/data", (req, res) => {
  res.json({ message: "Hello from server!" });
});

app.listen(3000, () => {
  console.log("Server running on port 3000");
});

プリフライトリクエスト

非シンプルなHTTPリクエスト（例えば、`PUT`や`DELETE`メソッドを使用するリクエスト、またはカスタムヘッダーを持つリクエスト）は、ブラウザによって「プリフライトリクエスト」として`OPTIONS`メソッドで事前に送信されます。サーバーはこのリクエストに対して適切なCORSヘッダーを返す必要があります。

app.options("/data", cors({
  origin: "https://your-allowed-origin.com",
  methods: ["GET", "POST", "OPTIONS"]
}));

クライアント側でのCORS設定

クライアント側では、通常の`fetch`や`XMLHttpRequest`を使用する際にCORS設定が適用されます。`fetch`では、`mode`オプションを使用してCORSポリシーを設定できます。

fetch("https://your-api.com/data", {
  method: "GET",
  headers: {
    "Content-Type": "application/json"
  },
  mode: "cors" // CORSリクエスト
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

認証情報を含むリクエスト

認証情報（クッキーや認証ヘッダーなど）を含むリクエストを送信する場合、`fetch`の設定で`credentials`オプションを指定する必要があります。

fetch("https://your-api.com/data", {
  method: "GET",
  credentials: "include", // クッキーや認証情報を送信
  mode: "cors"
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

サーバーでのアクセス許可ヘッダー

サーバーは、適切なCORSヘッダーをレスポンスに追加して、リクエスト元のオリジンに対してリソースへのアクセスを許可します。

res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");