SOP(Same-Origin Policy)
- 브라우저의 동일한 출처를 가진 리소스만 공유가 가능하다는 정책(동일 출처 정책)
- 출처는 프로토콜, 호스트, 포트 번호를 포함한 URL의 조합으로 정의된다.
👉 즉 다른 출처에서 로드된 문서나 스크립트가 동일한 출처를 가진 문서와 자유롭게 상호 작용할 수 없도록 제한하는 정책으로 이는 공격자가 악의적인 스크립트를 사용하여 웹 페이지의 데이터를 탈취하는 것을 방지한다.
👉 예를 들어 URL이 https://www.naver.com/이라면 네이버 출처의 리소스 https://www.naver.com/resource만 접근이 가능하고 구글 출처의 리소스 https://www.google.com/some-resource는 접근이 차단된다.
CORS(Cross-Origin Resource Sharing)
- 교차 출처 자원 공유 방식
- SOP를 우회하여 서로 다른 출처를 가진 리소스에 접근 할 수 있도록 하는 매커니즘
주요 CORS 동작 방식
1. 프리플라이트 요청(Preflight Request)
- 요청을 보내기 전에 서버에 대한 허용 여부를 확인하기 위해 클라이언트가 보내는 추가적인 요청
- 프리플라이트 요청은 OPTIONS 메소드를 사용하여 서버에 전송된다.
- 응답헤더의 Access-Control-Allow-Origin으로 요청을 보내고 요청을 확인하여 허용되지 않은 경우 에러가 발생한다.
👉 요청을 보내기 전에 미리 권한 확인을 할 수 있기 때문에, 실제 요청을 처음부터 통째로 보내는 것보다 리소스 측면에서 효율적이며, CORS에 대비가 되어있지 않은 서버를 보호할 수 있다.
2. 단순 요청 (Simple Request)
- 특정 조건이 만족되면 프리플라이트 요청을 생략하고 요청을 보내는 것
단순 요청이 가능한 조건(모두 만족해야 한다.)
- HTTP 메소드가 GET, HEAD, POST 중 하나인 경우
- 자동으로 설정되는 헤더 외에, Accept, Accept-Language, Content-Language, Content-Type 헤더의 값만 수동으로 설정할 수 있다.
- Content-Type 헤더에는 application/x-www-form-urlencoded, multipart/form-data, text/plain 값만 허용된다.
3. 인증정보를 포함한 요청 (Credentialed Request)
- 인증정보(cookies, HTTP 인증 헤더 등)를 포함하여 요청을 보내는 경우
- 클라이언트, 서버 양측 모두 CORS 설정이 필요하다.
- 클라이언트 측에서는 요청 헤더에
withCredentials : true를 넣어야 한다.- 서버 측에서는 응답 헤더에
Access-Control-Allow-Credentials : true를 넣어야 한다.- 서버 측에서
Access-Control-Allow-Origin을 설정할 때, 와일드카드(*)로 설정하면 에러가 발생한다.
CORS 설정 방법
1. Node.js를 사용한 CORS의 설정
const http = require('http'); const server = http.createServer((request, response) => { // 모든 도메인에서 온 요청을 허용 response.setHeader("Access-Control-Allow-Origin", "*"); // 특정 도메인에서 온 요청만 허용 response.setHeader("Access-Control-Allow-Origin", "https://codestates.com"); // 인증 정보를 포함한 요청을 받을 경우 response.setHeader("Access-Control-Allow-Credentials", "true"); })
2. Express 프레임워크를 사용한 CORS의 설정
const cors = require("cors"); const app = express(); //모든 도메인온 요청을 허용 app.use(cors()); //특정 도메인에서 온 요청만 허용 const options = { origin: "https://www.naver.com", // 접근 권한을 부여하는 도메인 credentials: true, // 응답 헤더에 Access-Control-Allow-Credentials 추가 optionsSuccessStatus: 200, // 응답 상태 200으로 설정 }; app.use(cors(options)); //특정 요청 app.get("/example/:id", cors(), function (req, res, next) { res.json({ msg: "example" }); });
정리노트