이 Codelab에서는 리소스를 가져올 때 same-origin이 어떻게 작동하는지 알아봅니다.
설정: 동일한 출처에서 페이지 가져오기
데모는 https://same-origin-policy-fetch.glitch.me에서 호스팅됩니다.
이 간단한 웹페이지는 fetch를 사용하여 https://same-origin-policy-fetch.glitch.me/fetch.html에서 리소스를 로드합니다. index.html와 fetch.html는 동일한 출처를 공유하므로 실시간 미리보기에 200가 표시됩니다.
1. 다른 출처에서 페이지 가져오기
가져오기 URL을 https://www.google.com로 변경해 보세요.
실시간 미리보기에 무엇이 표시되나요?
다른 출처의 리소스를 요청했으므로 브라우저에서 가져오기 요청을 차단했을 것입니다. 즉, 공격자가 사용자 브라우저를 제어하더라도 교차 출처 리소스를 읽을 수 없습니다.
2. 교차 출처 리소스 가져오기
가져오기 URL을 https://api.thecatapi.com/v1/images/search(으)로 변경해 보세요.
실시간 미리보기에 무엇이 표시되나요?
가져오기 URL의 출처가 다르지만 상태 코드 200이 표시됩니다. 왜냐하면 최신 웹 애플리케이션에서는 서드 파티 스크립트를 로드하거나 API 엔드포인트를 쿼리하기 위해 교차 출처 리소스를 요청하는 경우가 많습니다. 이러한 사용 사례를 수용하기 위해, 교차 출처 리소스 로드가 허용됨을 브라우저에 알리는 CORS (교차 출처 리소스 공유)라는 메커니즘을 사용합니다. CORS에 관한 자세한 내용은 교차 출처 리소스를 안전하게 공유를 참고하세요.