CORS を理解する: JavaScript での安全なクロスオリジンリソース共有-jsチュートリアル-php.cn

CORS を理解する: JavaScript での安全なクロスオリジンリソース共有

Susan Sarandon

リリース： 2024-12-28 09:22:10

オリジナル

678 人が閲覧しました

Understanding CORS: Secure Cross-Origin Resource Sharing in JavaScript

CORS (クロスオリジンリソース共有)

CORS (Cross-Origin Resource Sharing) は、リソースの発信元とは異なるドメイン (オリジン) からリソースをリクエストする方法を制御するために Web ブラウザーによって実装されるセキュリティ機能です。これは、リソースへの不正アクセスを防ぎ、データの安全な交換を保証するため、最新の Web 開発、特に API を使用する場合に非常に重要です。

1.オリジンとは何ですか?

原点は、次の組み合わせによって定義されます:

プロトコル: (例: http、https)
ドメイン: (例: example.com)
ポート: (例: :80、:443)

例:

https://example.com と http://example.com は、起源が異なります。
https://example.com:3000 と https://example.com:4000 も起源が異なります。

2.同一生成元ポリシー (SOP)

同一オリジンポリシーは、Web ページ上のリソースが別のオリジンのリソースと対話する方法を制限するセキュリティ対策です。

例: https://example.com からロードされたスクリプトは、明示的な許可がなければ https://api.otherdomain.com からデータをフェッチできません。

SOP はセキュリティを確保しますが、正当なクロスオリジンリクエストを制限します。ここで CORS が登場します。

3. CORS とは何ですか?

CORS は、サーバーが応答に特定の HTTP ヘッダーを含めることでリソースにアクセスできるユーザーを指定できるメカニズムです。これらのヘッダーは、ブラウザーがクライアントに要求されたリソースへのアクセスを許可するかどうかを示します。

4. CORS の仕組み

ブラウザがクロスオリジンリクエストを行うと、サーバーの応答ヘッダーをチェックしてリクエストが許可されているかどうかを判断します。

主要な手順:

プリフライトリクエスト (オプション):

特定の種類のリクエストの場合、ブラウザは最初の OPTIONS リクエストを送信して、実際のリクエストが許可されているかどうかを確認します。
サーバーの応答:

サーバーは応答に適切な CORS ヘッダーを含めます。
ブラウザの決定:

ヘッダーがブラウザの期待と一致する場合、リソースは共有されます。それ以外の場合、ブラウザはリクエストをブロックします。

5.重要な CORS ヘッダー

リクエストヘッダー:

Origin: リクエストの送信元を指定します。例: 発信元: https://example.com

応答ヘッダー:

Access-Control-Allow-Origin: リソースへのアクセスを許可するオリジンを指定します。

例: Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: 許可される HTTP メソッドを指定します。

例: アクセス制御の許可メソッド: GET、POST、PUT
Access-Control-Allow-Headers: リクエストで送信できるカスタムヘッダーを指定します。

例: Access-Control-Allow-Headers: Content-Type、Authorization
Access-Control-Allow-Credentials: 資格情報 (Cookie、HTTP 認証) を送信できるかどうかを示します。

例: Access-Control-Allow-Credentials: true

6. CORS リクエストの種類

簡単なリクエスト:
- これらは、カスタムヘッダーやプリフライトのない単純なリクエスト (例: GET、POST) です。
プリフライトされたリクエスト:
- カスタムヘッダー、認証情報、または GET や POST 以外のメソッドを含むリクエストの場合、ブラウザーはプリフライト OPTIONS リクエストを送信して、サーバーがそれを許可していることを確認します。
認証済みリクエスト:
- Cookie などの資格情報を含むリクエストには、Access-Control-Allow-Credentials ヘッダーが必要です。

7.例: CORS の動作

クライアントサイド JavaScript:

fetch("https://api.otherdomain.com/data", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  },
  credentials: "include", // For sending cookies or credentials
})
  .then(response => response.json())
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

ログイン後にコピー

サーバー応答ヘッダー:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

ログイン後にコピー

8.サーバーサイドコードでの CORS の処理

Express を使用した Node.js の例:

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

// Use the CORS middleware
app.use(cors({
  origin: "https://example.com", // Allow only this origin
  methods: ["GET", "POST"], // Allow these HTTP methods
  credentials: true, // Allow credentials
}));

app.get("/data", (req, res) => {
  res.json({ message: "CORS request successful" });
});

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

ログイン後にコピー

9. CORS の一般的な問題と修正

エラー: 要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。
- 修正: サーバーに Access-Control-Allow-Origin ヘッダーが含まれていることを確認します。
エラー: 資格情報付きリクエストでは、「Access-Control-Allow-Credentials」が true である必要があります。
- 修正: Access-Control-Allow-Credentials を true に設定し、Access-Control-Allow-Origin が * でないことを確認します。
プリフライトリクエストが失敗しました:
- 修正: サーバーが必須の CORS ヘッダーを含む OPTIONS リクエストに正しく応答することを確認します。

10. CORSの利点

制御されたリソース共有を許可することでセキュリティを強化します。
異なるドメイン間の API 統合を促進します。
アプリケーションのニーズを満たす幅広い構成をサポートします。

11. CORS の制限

動的なオリジンを必要とする API の構成が複雑です。
特定の API でのプリフライトリクエストのオーバーヘッドが増加しました。
ブラウザの強制により、エラーのデバッグが困難になることがよくあります。

12.結論

CORS は、Web アプリケーションで安全かつ機能的にクロスオリジンリソースを共有するために不可欠な機能です。サーバー上の CORS ヘッダーを理解し、適切に構成することで、Web セキュリティ標準を遵守しながら、ドメイン間のスムーズで安全な通信を確保できます。

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がCORS を理解する: JavaScript での安全なクロスオリジンリソース共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。