이제 Modern Web Guidance가 안정화되었습니다. 전문가가 검증한 웹 개발 권장사항으로 코딩 에이전트를 업그레이드하세요. 공지 확인하기

Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

동일 출처 정책 및 iframe

Mariko Kosaka

이 Codelab에서는 iframe 내의 데이터에 액세스할 때 동일 출처 정책이 어떻게 작동하는지 알아봅니다.

설정: 동일 출처 iframe이 있는 페이지

이 페이지는 동일한 출처에 iframe.html라는 iframe를 삽입합니다. 호스트와 iframe이 동일한 출처를 공유하므로 호스트 사이트는 iframe 내부의 데이터에 액세스하고 다음과 같이 비밀 메시지를 노출할 수 있습니다.

const iframe = document.getElementById('iframe');
const message = iframe.contentDocument.getElementById('message').innerText;

iframe의 src을(를) https://other-iframe.glitch.me/(으)로 변경해 보세요. 호스트 페이지에서 비밀 메시지에 계속 액세스할 수 있나요?

호스트와 삽입된 iframe의 출처가 동일하지 않으므로 데이터 액세스가 제한됩니다.