De URL van de ouder van een iframe ophalen

Omgaan met iframes is altijd een tweesnijdend zwaard. Aan de ene kant krijg je sandboxing van inhoud op een andere pagina, zodat JavaScript en CSS van de ene pagina geen invloed hebben op een andere. Als het iframe een pagina van een andere oorsprong wordt weergegeven, kunt u er ook zeker van zijn dat de pagina niets schadelijks kan doen voor de bevattende pagina. Aan de andere kant, iframes en de bijbehorende window objecten zijn een warboel van toegestane en niet-toegestane acties die u moet onthouden ¹ . Werken met iframes is vaak een oefening in frustratie als je methodisch doorgaat wat je mag doen.

Ik werd onlangs gevraagd of er een manier is om de URL van de bovenliggende pagina van een iframe te krijgen, dat wil zeggen de URL van de pagina met de <iframe> element. Dit lijkt een taak die eenvoudig genoeg is. Voor een gewone pagina krijg je de URL meestal met window.location . Er zijn ook parent om de window . te krijgen object van de bovenliggende pagina en top om de window . te krijgen object van de buitenste pagina. U kunt dan parent.location . gebruiken of top.location om een ​​URL van de bevattende pagina te krijgen, afhankelijk van uw behoeften. Tenminste, zo doe je het wanneer zowel de iframe-pagina als de bevattende pagina van dezelfde oorsprong zijn.

Wanneer de iframe-pagina en de bevattende pagina van verschillende oorsprong zijn, bent u volledig afgesneden van de parent.location en top.location . Deze informatie wordt als onveilig beschouwd om te delen tussen verschillende herkomsten. Dat betekent echter niet dat u de URL van de bevattende pagina niet kunt achterhalen. Om dit te doen, hoeft u alleen maar in gedachten te houden welke informatie het iframe bezit en welke informatie niet.

Om te beginnen, moet u controleren of de pagina zich daadwerkelijk in een iframe bevindt, wat u kunt doen met deze code:

var isInIframe = (parent !== window);

Wanneer een pagina binnen een iframe wordt uitgevoerd, wordt de parent object is anders dan de window object. Je hebt nog steeds toegang tot parent vanuit een iframe, ook al heb je er geen toegang toe. Deze code zal nooit een fout veroorzaken, zelfs niet bij het oversteken van de oorsprong.

Als je eenmaal weet dat je in een iframe zit, kun je profiteren van een weinig bekend feit:de HTTP Referer header voor een pagina in een iframe is altijd ingesteld op de URL van de bevattende pagina. Dat betekent een pagina die is ingesloten in een iframe op https://humanwhocodes.com zal een Referer . hebben header gelijk aan die URL. Als u dit weet, hoeft u alleen de vaak vergeten document.referrer . te gebruiken eigendom. Zoals de naam doet vermoeden, bevat deze eigenschap de waarde van de Referer header voor het opgegeven document. U kunt de URL van de bovenliggende pagina van het iframe dus als volgt verkrijgen:

function getParentUrl() {
    var isInIframe = (parent !== window),
        parentUrl = null;

    if (isInIframe) {
        parentUrl = document.referrer;
    }

    return parentUrl;
}

Hoewel dit op een beveiligingsprobleem lijkt, is het dat echt niet. De Referer wordt al verzonden naar de server die de iframe-pagina bedient, zodat informatie al bekend is bij de webtoepassing. De document.referrer eigenschap onthult alleen de informatie die de server al heeft. Sinds de document object is eigendom van iframe window , u overschrijdt de beleidsgrens van dezelfde oorsprong niet.

Iframes zijn altijd een beetje harig om mee om te gaan, vooral als je JavaScript in de mix gooit. Het goede nieuws is dat er meestal een manier is om iets te doen dat logisch is en een gebruiker niet in gevaar brengt, of dat nu via document.referrer is cross-document messaging, of op een andere manier.

Referenties

1. Iframes, onload en document.domain door mij (NCZOnline)