이 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에 관한 자세한 내용은 교차 출처 리소스 안전하게 공유하기를 참고하세요.