CORS(Cross-Origin-Resource-Sharing)

入る前に。

この文章はスパルタの明日の学習キャンプの私たちのグループのメンバー申夏琳が整理した文章と、MDNの公式文書CORSとSOP部分、その他のブログを参照して書いたものです.

URL Origin

Originキーワードはいろいろありますが、あまり正確ではないかもしれませんが、ここで使われているOriginはURLに関係しているのでURL Originと呼ばれています.
URLの設定
https://www.test.com:80/test/detail?data=1

https : Protocol

www.test.com : Host

80 : Port

test/detail : Path

data=1 : Query String

URLでいうoriginとは、上のurlコンポーネントのprotocol、host、portの合計を指します.ブラウザコンソールウィンドウでは、location.originコマンドで現在のページのソースを決定できます.

ソース？

Corsに関する文章の大部分を見ると、ソースという言葉が見つかります.この出典はどういう意味ですか?
ここでいうソースは、前述のOriginを基準としている.
Originが同じソースである場合、プロトコル、Port、Hostのいずれかが異なる場合、別のソースとみなされます.

Same-Originポリシー、同じソースポリシー

JAvascriptエンジン標準specのセキュリティ・ルールは、1つのソースからロードされたリソース(ドキュメントまたはスクリプト)とホストまたはプロトコル、ポート番号が一致しないリソースとのインタラクションを制限する要求であり、同じソースからのみアクセスできるポリシーです.
つまり、同じソースポリシーは、同じOriginソースのサーバにのみ要求されます.ここでOriginソースとは、要求を発行するドメインを意味する.

http://www.same-domain.com --> http://www.same-domain.com = same-origin

http://www.same-domain.com -/-> http://www.cross-domain.com = cross-origin

この戦略はXSS、XSRFなどのセキュリティ・ホール攻撃をうまく防止しているが、Webページの発展に伴い、APIを通じて外部リソースにアクセスするケースが多くなり、クライアントとサーバの分離開発のケースも多くなり、CORSに関連する問題が発生し始めた.

CORS(Cross-Origin-Resource-Sharing)

Cross-Originを使用してリソースにアクセスすることは、セキュリティ上の理由でクライアントが拒否する同じソースポリシーに違反します.Webアプリケーションは、自分のソースと同じリソースしかロードできませんが、他のソースのリソースをロードするには、正しいCORSヘッダを含む応答ヘッダをソースから返さなければなりません.つまり,CORSはサーバ側がデータにアクセスできるようにするためのポリシーであり,他のドメインからのAJAXリクエストであっても同様である.
CORSの核心概念はクライアント拒否である.サーバーがCORSに違反しても応答します.これを防止するために、OPTIONS要求は、preflightを介してこの要求を送信する前に、要求を検証し、クライアントとサーバが満足する通信方式を使用します.
データを送信する前に、クライアントは、有効なリクエストなのか、実際のデータなのかを簡単に理解することができ、サーバ側は自分のリソースを提供する必要はありません.

サーバ側ソリューション

1. Access-Control-Allow-Origin response header
最も一般的な方法は、Allow-originにアクセスして、所与の応答ヘッダのOriginと要求コードを共有できるかどうかを決定することである.これは,サーバ側応答におけるアクセス権ヘッダを増やすことでCORSエラーを解決する方法である.私たちの授業でもこの方法で問題を解決しました.

'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'OPTIONS,POST'

これは、各言語に基づいてレスポンスのヘッダに低コードを追加するだけで済むため、比較的簡単な方法ですが、アクセス可能なすべてのリクエストのレスポンスにアクセス権限を追加する必要があります.すべてのリクエストに権限がある場合は、すべてのレスポンスの前に上のヘッダを追加する必要があります.
2.ミドルウェアCORS
これは、オペレーティングシステムが提供するサービスに加えて、追加のサービスを提供するコンピュータソフトウェアミドルウェアを使用する方法である.この文章の中で、ノード.js Expressをミドルウェアとして使用する方法について説明します.

corsに関連するパッケージを以下のコマンドでインストールします.npm i cors --save

Node.js Expressの公式ドキュメントを参照して、サーバとアプリケーションを実装してください.ミドルウェアをjsファイルに接続します.

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

app.use(cors());

上記のオプションなしでapp.use(cors());に設定すると、すべてのソース間要求に応答するため、特定のドメイン要求のみを受信する必要がある場合は、次のように設定できます.

const corsOptions = {
  origin: 'http://test.com', // 허용해줄 domain
  credentials: true, // response header에 Access-Control-Allow-Credentials 추가해줌
  optionsSuccessStatus: 200 
};

app.use(cors(corsOptions));

クライアントソリューション

この方法は、直接実装されていないサーバがクライアント内でしか解決できない場合に使用します.
1.Proxy設定
Proxyは、直接通信できない2台のコンピュータ間の相互接続を支援するサーバです.
このProxyサーバは、クライアント-サーバ間で要求を受信し、Access-Control-Allow-Originヘッダを追加することで解決できます.

P.S.

ミドルウェア、proxy、preflightについては、整理した内容でアップロードします.

ソース

yejinhの発展:Same-Origin Policyと同じソースポリシーとCORSエラー2

MDN Web Docs : ソース間共有リソース(CORS)

MDN Web Docs : 同じソースポリシー

秀斌のブログ:私を苦労させたCORSエラーを解決する2

鼻ひよこのブログ(スパルタの明日の学習キャンプのようなメンバー):本当の秒ステップのためにCORSを整理する