이 Codelab에서는 리소스를 가져올 때 동일 출처가 어떻게 작동하는지 알아봅니다.
설정: 동일한 출처에서 페이지 가져오기
데모는 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에 관한 자세한 내용은 교차 출처 리소스 안전하게 공유를 참고하세요.