Contents
Cors 실습CORS
CORS(Cross-Origin Resource Sharing)는 출처가 다른 자원들을 공유한다는 뜻으로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념이다. 직역하면, 교차되는 출처 자원들의 공유라는 뜻으로, 다른 출처에 있는 자원을 요청한다고 하면, 이를 교차 출처 요청이라고 한다.
도멘인 밖에 다른 도메인으로 요청 할 수있게 허용 하는 구조
HTTP통신의 기본적인 형태
기본적으로 서버는 자바 스크립트 요청은 블락 처리한다.
그 이유는 자바 스크립트 요청으로 불순한 요청을 누구나 할 수 있기 때문이다.
브라우저가 관리하는 도메인
브라우저는 모든정보를 도메인 별로 관리한다.
포트가 달라도 도메인이 다르다!
127.0.0.1:5500 → open live server127.0.0.1:8080 → 우리 블로그 서버
우리 블로그에 쿠키를 만들면 블로그에 쿠키는 있지만
네이버에서 쿠키를 확인해보면 쿠키가 없음
도멘이이 다른다는 기준점중에 포트가 다른걸로 나누기도 한다.
도메인이 같아야 자바스크립트 요청이 허용된다.
ip랑 port랑 같아야(같은 도메인) 요청 허용된다
브라우저가 스크립트 언어를 차단하는 이유
- 사용자가 악성 사이트에 접속한다.
- 이때 해커가 몰래 심어놓은 악의적인 자바스크립트가 실행되어, 사용자가 모르는 사이에 어느 포털 사이트에 요청을 보낸다.
- 그럼 포털 사이트에서 해당 브라우저의 쿠키를 이용하여 로그인을 하거나 등 상호작용에 따른 개인 정보를 응답 값을 받은 뒤, 사이트에서 해커 서버로 재차 보낸다.
- 이외에도 사용자가 접속 중인 내부 망의 아이피와 포트를 가져오거나, 해커가 사용자 브라우저를 프록시 처럼 악용할 수도 있다.
Cors 실습
Javascript 요청하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>page</h1>
<hr>
<script>
async function download(){
let response = await fetch("http://localhost:8080/test")
let body = await response.text();
console.log(body);
}
download();
</script>
</body>
</html>
현재 서버는 포트번호가 8080이다. 같은 IP와 포트번호를 가진 도메인으로 자바스크립트 요청을 하면 허용된다.
Cross origin
vs코드로 켯을 때(브라우저가 달라서막힌다)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>page</h1>
<hr>
<script>
async function download() {
let response = await fetch("http://localhost:8080/test")
let body = await response.text();
console.log(body);
}
download();
</script>
</body>
</html>
현재 서버의 포트번호는 8080이다. 포트번호가 5501인 다른 프로그램으로 요청을 하면 IP 주소는 동일하지만 포트 번호가 다르기 때문에 오류가 발생한다. “has been blocked by CORS policy”. 따라서 프론트 서버와의 통신을 위해서는 해당 cross origin 을 서버에서 허용해주어야 한다.
Cors 해결
크로스 도메인들의 허용을 서버가 해줘야된다.
저 어노테이션을 사용하면 모든 도메인이허용이된다. 이러면 아무나 막 확인할 수 있으므로
주소 설정을 해야되는데
이렇게 주소 설정을 하면된다.
결론:sameorigin은 자바스크립트 요청을 허용하고 corss(port가 다른)origin은 다 막힌다
cross origin중에서도 허용하고 싶은 것 들은 필터에서 설정하면 된다.
자바 스크립트가 도는 코드만 막히는거고 크로스 오리진이어도 자바는 막히지 않는다.
이 이유가 웹에서 공격은 자바 스크립트로만 공격을 하기 때문이다.
그렇다면 postman은 다른 도메인인데 될까?
→ 자바스크립트 요청이 아니라서 된다.
앱이 요청하면?
→ 된다. 자바스크립트가 아닌 자바로 만들어서?
리액트는?
→ 자바스크립트로 만들어져서 거부당함
⇒ cross origin이라고 무조건 block 당하는게 아니라 자바스크립트일 때만 block 당하는 것!
CORS는 cross origin 중에서 자바스크립트를 막는다.
Share article
