이 Codelab에서는 iframe 내부의 데이터에 액세스할 때 동일 출처 정책이 어떻게 작동하는지 알아보세요.
설정: 동일 출처 iframe이 있는 페이지
이 페이지에는 동일한 출처에 iframe.html라는 iframe이 삽입되어 있습니다.
호스트와 iframe은 동일한 출처를 공유하기 때문에 호스트 사이트는 iframe 내부의 데이터에 액세스하여 불꽃 같은 비밀 메시지를 노출할 수 있습니다.
const iframe = document.getElementById('iframe');
const message = iframe.contentDocument.getElementById('message').innerText;
교차 출처 iframe으로 변경
iframe의 src을(를) https://other-iframe.glitch.me/(으)로 변경해 보세요.
호스트 페이지에서 보안 비밀 메시지에 계속 액세스할 수 있나요?
호스트와 삽입된 iframe의 출처가 동일하지 않으므로 데이터에 대한 액세스가 제한됩니다.