SOP, CORS

이일우·2023년 4월 21일

공부하기

목록 보기

31/42

Origin

Origin request 헤더는 fetch가 시작되는 위치입니다. 경로 정보는 포함하지 않고 서버 이름만 포함합니다. POST requests에 포함되는 것처럼, CORS requests 와 함께 전송합니다. Referer 헤더와 비슷하지만, origin 헤더는 전체 경로를 공개하지 않습니다. -MDN-

SOP(Same Origin Policy)와 CORS(Cross Origin Resource Sharing)에 있는 출처(origin)란 무엇일까?
origin
개발자 도구의 콘솔에서 document.location.origin를 조회해보면 현재 접속한 사이트의 origin이 무엇인지 알 수 있습니다.

origin : 스키마(https), 호스트(velog.io), 포트(443)으로 구성되어 있으며, 기본 포트 (80 - http, 443 - https 등)는 생략할 수 있습니다.

SOP(Same Origin Policy)

동일 출처 정책은 한 출처 에서 로드한 문서 또는 스크립트가 다른 출처의 리소스와 상호 작용할 수 있는 방법을 제한하는 중요한 보안 메커니즘입니다. -MDN-

동일 출처 정책이란 웹 브라우저 보안을 위해 동일한 origin을 가진 서버하고만 데이터를 주고받는 정책입니다.

이로서 우리의 웹 보안은 안전하게 되었습니다. 그러나 웹이 발전하면서 외부의 데이터를 받아와야 하는 일들이 많아지게 되었습니다.
그러면서 나오게 된 것이 바로 CORS입니다.

CORS ( Cross-Origin Resource Sharing )는 HTTP 헤더 기반 메커니즘 으로, 브라우저가 리소스 로드를 허용해야 하는 자체 출처 이외의 모든 출처 (도메인, 스키마 또는 포트) 를 서버가 표시할 수 있도록 합니다 .
-MDN-

우리는 웹 개발을 하다보면 API서버를 이용할 때도 많고, 웹 폰트를 사용하는 경우도 많습니다. 그러나 이런 다른 origin에서 데이터를 받아오는것은 SOP정책에 위반됩니다.

이 때, CORS를 통해 다른 origin에서 데이터를 받아올 수 있습니다.

CORS는 기본적으로 다른 모든 오리진에 대한 응답을 거부하고 있습니다. 특정 오리진에 대해서 응답을 허용하기 위해선 서버에서 허용할 오리진을 ACAO(Access-Control-Allow-Origin)에 추가하여 데이터를 받아올 수 있게 해야합니다.

NODEJS의 Express와 cors를 활용하여 다른 오리진에서 데이터를 쉽게 받아올 수 있습니다.

라이브러이 설치

npm install express
npm install cors

모든 오리진을 허용하는 경우

var express = require('express')
var cors = require('cors')
var app = express()
 
app.use(cors()) //모든 오리진에게 데이터를 줄 수 있다.
 
app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})
 
app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

특정 오리진만 허용하는 경우

var express = require('express')
var cors = require('cors')
var app = express()

// 특정 오리진만 허용
app.use(cors({ origin: 'http://example.com'}))
 
app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for only example.com.'})
})
 
app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

특정 라우트에서만 오리진 허용

var express = require('express')
var cors = require('cors')
var app = express()
 
app.get('/products/:id', cors(), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for a Single Route'})
})
 
app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})