CORS, SOP

https://evan-moon.github.io/2020/05/21/about-cors/

https://blog.naver.com/PostView.naver?blogId=handam81&logNo=222511770317&parentCategoryNo=&categoryNo=&viewDate=&isShowPopularPosts=false&from=postView

https://blog.naver.com/PostView.naver?blogId=handam81&logNo=222511770317&parentCategoryNo=&categoryNo=&viewDate=&isShowPopularPosts=false&from=postView

https://velog.io/@ye-ji/%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0-API-CORS-%EC%98%A4%EB%A5%98-%EB%B0%B0%ED%8F%AC-%EC%8B%9C%EC%97%90%EB%8F%84-%EB%82%9C-%EC%98%A4%EB%A5%98

https://evan-moon.github.io/2020/05/21/about-cors/ 블로그 요약 :

CORS(Cross-Origin Resource Sharing)란?

보안을 위해서 탄생된 개념이라고 생각하면 되는데,
도메인이 다른 웹페이지의 request를 방지하기 위한 용도라고 가볍게 생각하면 된다.

https://www.google.co.kr/maps/?hl=ko#foo
URL : Protocol(https://) + Host(www.google.com) + Path(/maps) + Query String(?hl=ko) + Fragment(#foo)

출처란 Protocol + Host + 포트번호 (ex :80, :443)
즉, 서버의 위치를 찾아가기 위해 필요한 가장 기본적인 것들을 합쳐놓은 것이다.

Location 객체가 가지고 있는 origin 프로퍼티에 접근함으로써 손 쉽게 어플리케이션이 실행되고 있는 출처 알아낼 수 있음
console.log(location.origin)

CORS는 브라우저 구현 스펙에 포함되는 정책

CORS(Cross-Origin Resource Sharing)의 동작 방식

기본적인 흐름

웹 클라이언트 어플리케이션이 다른 출처의 리소스를 요청할 때 HTTP 프로토콜을 사용하여 요청을 보냄
이때 브라우저는 요청 헤더에 Origin이라는 필드에 요청을 보내는 출처를 함께 담아보냄
-> 서버가 이 요청에 대한 응답을 할 때 응답 헤더의 Access-Control-Allow-Origin이라는 값에 '이 리소스를 접근하는 것이 허용된 출처'를 내려줌
-> 이후 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin과 서버가 보내준 응답의 Access-Control-Allow-Origin을 비교한 후 이 응답이 유효한 응답인지 아닌지 결정

요청 종류에 따라 조금씩 다른 방식

Preflight Request

Simple Request

Credentialed Request

SOP(Same-Origin Policy)란?

'같은 출처에서만 리소스를 공유할 수 있다.'라는 규칙을 가진 정책

보안 이슈

CSRF(Cross-Site Request Forgery) https://ko.wikipedia.org/wiki/%EC%82%AC%EC%9D%B4%ED%8A%B8_%EA%B0%84_%EC%9A%94%EC%B2%AD_%EC%9C%84%EC%A1%B0

XSS(Cross-Site Scripting)
https://ko.wikipedia.org/wiki/%EC%82%AC%EC%9D%B4%ED%8A%B8_%EA%B0%84_%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8C%85

CORS 해결 방안

정석

서버에서 Access-Control-Allow-Origin 세팅하기
결국 운영 환경에서 CORS 정책 위반 문제를 해결하기 위해서는 백엔드 개발자의 도움이 필요할 수 밖에 없다.
Nginx, Apache 등 서버 엔진의 설정에서도 추가가 가능하지만
소스 코드 내에서 응답 미들웨어 등을 사용하여 세팅하는 것을 추천
(Spring, Express, Django와 같이 이름있는 백엔드 프레임워크의 경우에는 모두 CORS 관련 설정을 위한 세팅이나 미들웨어 라이브러리를 제공)

작업중

Webpack Dev Server로 리버스 프록싱
웹팩과 webpack-dev-server 를 사용하여 개발환경 구축 시
(webpack-dev-server는 내부적으로 http-proxy-middleware를 사용)
localhost:8000/api -> https://api.test.com

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.test.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    }
  }
}

라이브러리
: CORS Anywhere, HTMLDriven 등

프록시 서버 구축
: CORS Anywhere 와 Heroku를 이용하면 간단한 CORS 픅록시 서버를 구축 할 수 있다.
but Heroku 무료 계정의 경우 한달 550시간 밖에 사용을 못하고, 30분 이상 Application 사용 이력이 없으면 Sleep 모드에 빠진다. 신용카드 등록시 월 1000시간까지 무료 사용이 가능하다. (https://kaffeine.herokuapp.com/ : 30분마다 Heroku 깨워줌)
https://nhj12311.tistory.com/278
https://donggov.tistory.com/132
: https://github.com/chimurai/http-proxy-middleware

jsonp 이용
: