동일한 출처 정책 및 iframe
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
이 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
의 출처가 동일하지 않으므로 데이터에 대한 액세스가 제한됩니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2018-11-05(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]
{"lastModified": "\ucd5c\uc885 \uc5c5\ub370\uc774\ud2b8: 2018-11-05(UTC)"}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2018-11-05(UTC)"]]