JavaScript >> Javascript tutorial >  >> Tags >> URL

Henter URL'en til en iframes forælder

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

  1. Iframes, onload og document.domain af mig (NCZOnline)