Same Origin Policy & iframe
Stay organized with collections
Save and categorize content based on your preferences.
To follow this codelab, open this Glitch in a second tab.
In this codelab, see how the same-origin policy works when accessing data inside an iframe.
Set up: Page with a same-origin iframe
This page embeds an iframe
, called iframe.html
, in the same origin.
Since the host and the iframe share the same origin, the host site is able to access data inside of the iframe and expose the secret message like blow.
const iframe = document . getElementById ( 'iframe ');
const message = iframe . contentDocument . getElementById ( 'message '). innerText ;
Change to cross-origin iframe
Try changing the src
of the iframe
to https://other-iframe.glitch.me/
.
Can the host page still access the secret message?
Since the host and embedded iframe
do not have the same origin, access to the data is restricted.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2018-11-05 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Missing the information I need"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Too complicated / too many steps"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Out of date"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Samples / code issue"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Other"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Easy to understand"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Solved my problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Other"
}]
{"lastModified": "Last updated 2018-11-05 UTC."}
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2018-11-05 UTC."]]