At beskæftige sig med iframes er altid et tveægget sværd. På den ene side får du sandboxing af indhold på en anden side, hvilket sikrer, at JavaScript og CSS fra én side ikke påvirker en anden. Hvis iframen vises en side fra en anden oprindelse, kan du også være sikker på, at siden ikke kan gøre noget ondsindet ved den indeholdende side. På den anden side iframes og deres tilhørende window
objekter er et rod af tilladte og utilladelige handlinger, som du skal huske
1
. At arbejde med iframes er ofte en øvelse i frustration, når du metodisk bevæger dig igennem, hvad du har lov til at gøre.
Jeg blev for nylig spurgt, om der er en måde at få URL'en til en iframes overordnede side på, hvilket vil sige URL'en på siden med <iframe>
element. Dette virker som en simpel nok opgave. For en almindelig side får du typisk URL'en ved at bruge window.location
. Der er også parent
for at få window
objektet på den overordnede side og top
for at få window
genstand for den yderste side. Du kan derefter bruge parent.location
eller top.location
for at få en URL fra den indeholdende side afhængigt af dine behov. Det er i hvert fald sådan, du gør det, når både iframe-siden og den indeholdende side er fra samme oprindelse.
Når iframe-siden og den indeholdende side er fra forskellig oprindelse, er du fuldstændig afskåret fra parent.location
og top.location
. Disse oplysninger anses for at være usikre at dele på tværs af oprindelser. Det betyder dog ikke, at du ikke kan finde ud af URL'en på den indeholdende side. For at gøre det skal du blot huske på, hvilke oplysninger iframen ejer, og hvilke oplysninger den ikke ejer.
Til at starte med skal du dobbelttjekke, at siden faktisk er i en iframe, hvilket du kan gøre med denne kode:
var isInIframe = (parent !== window);
Når en side kører inde i en iframe, vises parent
objektet er anderledes end window
objekt. Du kan stadig få adgang til parent
inde fra en iframe, selvom du ikke kan få adgang til noget nyttigt på den. Denne kode vil aldrig forårsage en fejl, selv når du krydser oprindelser.
Når du ved, at du er i en iframe, kan du drage fordel af et lidt kendt faktum:HTTP Referer
header for en side inde i en iframe er altid indstillet til den indeholdende sides URL. Det betyder en side indlejret i en iframe på https://humanwhocodes.com
vil have en Referer
header svarende til denne URL. Når du kender dette faktum, behøver du kun bruge den ofte glemte document.referrer
ejendom. Som navneforslagene indeholder denne egenskab værdien af Referer
header for det givne dokument. Så du kan få URL'en til iframens overordnede side sådan her:
function getParentUrl() {
var isInIframe = (parent !== window),
parentUrl = null;
if (isInIframe) {
parentUrl = document.referrer;
}
return parentUrl;
}
Selvom dette kan ligne et sikkerhedsproblem, er det virkelig ikke. Referer
sendes allerede til den server, der betjener iframe-siden, så informationen allerede er kendt af webapplikationen. document.referrer
egenskab blotter blot de oplysninger, som serveren allerede har. Siden document
objektet ejes af iframen window
, krydser du ikke grænsen for samme oprindelsespolitik.
Iframes er altid en smule behårede at have med at gøre, især når du kaster JavaScript ind i blandingen. Den gode nyhed er, at der normalt er en måde at gøre noget på, der giver mening og ikke vil sætte en bruger i fare, uanset om det er gennem document.referrer
meddelelser på tværs af dokumenter eller på anden måde.
Referencer
- Iframes, onload og document.domain af mig (NCZOnline)