CORS3 [CORS] CORS 뽀개기 CORS Cross-origin resource sharing (CORS)란 외부 도메인의 자원에 제한적으로 접근할 수 있도록 하는 브라우저 메커니즘을 뜻한다. SOP에 유연성을 더하는 역할을 한다. 하지만 만약 웹사이트의 CORS 정책이 조악하게 설계되었다면 잠재적으로 크로스 도메인 공격을 받을 가능성이 있다. CORS는 CSRF와 같은 공격을 막는 용도가 아니다. Same-Origin Policy SOP란 외부 소스 도메인 자원과 교신하는 것을 막는 정택을 말한다. SOP는 다른 유저의 개인정보를 탈취하는 등 악의적 크로스 도메인 상호작용의 위험성을 막기 위해 고안되었다. Relaxation of the SOP SOP는 CSRF와 같은 공격을 막는 데는 효과적이었지만, 다른 도메인 리소스 접근을 막아.. 2022. 3. 25. [React] https 통신문제 리엑트로 클라이언트 부분을 룰루랄라 다 만들고 서버와 데이터를 주고받으려는데 이게 뭐지? CORS 에러가 발생했다. 분명 서버에 CORS 설정도 다 끝냈는데 왜 그럴까? 문제는 https통신에 있었다. 서버 측에서 데이터를 주고받기 위해 https 통신을 사용하도록 되어 있는데 react에서는 default 값으로 http 통신을 사용하는 듯하다. 이에 대한 해결방법은 react를 시작할 때 https 통신을 사용할 것임을 알려 주는 것이다. package.json에서 npm start 설정을 아래처럼 수정하니 정상적으로 서버와의 통신이 이루어졌다. HTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key npm start 관련해서 공식문서에도 잘 설명되어 있으니.. 2022. 1. 23. [CORS] Corse의 credentials: true의 의미 웹 개발에서 다양한 도메인의 리소스를 사용하기 위해 필수적으로 알아야 할 개념 CORS! 위 사진은 CORS의 특성과 하는 역할을 아주 잘 묘사하는 짤이라고 생각된다. CORS를 배우고 Cookie에 대해 학습하다 보면, 처음 보는 Cors option을 발견하게 된다. Credentials: true 요 녀석은 어떤 옵션이고 왜 필요한 것일까? 일단 시간이 없는 사람을 위해 한 마디로 설명하겠다. 클라이언트와 서버 간에 쿠키를 주고받고 싶으면 그냥 저 옵션을 넣으세요. 자 아래는 왜 그런지 이유를 설명해 보겠다. 기본적으로, CORS는 cross-origin 요청에는 쿠키를 담아 데이터를 전송하지 않는다. Json-P의 경우 항상 요청에 쿠키를 담아 보낸다는 점에서 CORS와 차이점이 있는데 이처럼 쿠.. 2022. 1. 3. 이전 1 다음
