JavaScript >> Javascript 文檔 >  >> Tags >> URL

獲取 iframe 父級的 URL

處理 iframe 始終是一把雙刃劍。一方面,您可以在另一個頁面中對內容進行沙盒處理,確保一個頁面中的 JavaScript 和 CSS 不會影響另一個頁面。如果 iframe 顯示來自不同來源的頁面,那麼您還可以確保該頁面不會對包含頁面進行任何惡意操作。另一方面,iframe 及其關聯的 window 對像是一堆你需要記住的允許和不允許的行為 1 .當您有條不紊地完成您被允許做的事情時,使用 iframe 經常會讓人感到沮喪。

最近有人問我有沒有辦法獲取iframe的父頁面的URL,也就是<iframe>的頁面的URL 元素。這似乎是一個足夠簡單的任務。對於常規頁面,您通常使用 window.location 獲取 URL .還有parent 獲取 window 父頁面的對象和top 獲取 window 最外層頁面的對象。然後您可以使用 parent.locationtop.location 根據您的需要從包含頁面獲取 URL。至少,當 iframe 頁面和包含頁面來自同一來源時,您就是這樣做的。

當 iframe 頁面和包含頁面來自不同的來源時,那麼您將與 parent.location 完全隔絕 和 top.location .此信息被認為不安全,無法跨來源共享。但是,這並不意味著您無法找到包含頁面的 URL。為此,您只需要記住 iframe 擁有哪些信息以及它不擁有哪些信息。

首先,您應該仔細檢查頁面是否確實在 iframe 中,您可以使用以下代碼進行操作:

var isInIframe = (parent !== window);

當頁面在 iframe 中運行時,parent 對像不同於 window 目的。您仍然可以訪問 parent 即使您無法訪問任何有用的內容,也可以從 iframe 中訪問。這段代碼即使跨域也不會出錯。

一旦你知道你在 iframe 中,你就可以利用一個鮮為人知的事實:HTTP Referer iframe 內頁面的標頭始終設置為包含頁面的 URL。這意味著嵌入在 https://humanwhocodes.com 上的 iframe 中的頁面 將有一個 Referer 標頭等於該 URL。知道了這個事實,你只需要使用經常被遺忘的 document.referrer 財產。顧名思義,此屬性包含 Referer 的值 給定文檔的標題。所以你可以像這樣獲取 iframe 的父頁面的 URL:

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

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

    return parentUrl;
}

雖然這看起來像是一個安全問題,但實際上並非如此。 Referer 已經被發送到為 iframe 頁面提供服務的服務器,因此 Web 應用程序已經知道該信息。 document.referrer 屬性只是暴露了服務器已經擁有的信息。自 document 對象歸 iframe window 所有 ,您沒有跨越同源策略邊界。

處理 iframe 總是有點麻煩,尤其是當您將 JavaScript 加入其中時。好消息是,通常有一種方法可以做一些有意義的事情並且不會讓用戶處於危險之中,無論是通過 document.referrer 跨文檔消息傳遞,或其他方式。

參考

  1. 我的 iframe、onload 和 document.domain (NCZOnline)

Tutorial JavaScript 教程
  1. 使用 Curried 函數為您的無服務器應用程序增添趣味

  2. 首先看一下 deno

  3. 在 2022 年成為更好的前端開發者! 🎆

  4. 如何在我的 node.js 環境中存儲來自 MariaDB 的數據

  5. Twitter 上從 0 到 100 個關注者。我如何增加我的開發者帳戶🥳

  6. 在具有 id 和日期的對像數組中嵌套分組?

  7. 如何安裝 Node.js

  1. 撲熱息痛.js💊| #35:解釋這段 JavaScript 代碼

  2. 打字還是不打字?

  3. 使用 indexOf() 和 filter() 方法從數組中刪除重複項

  4. 需要節點——第 38 卷

  5. 帶參數的控制台日誌

  6. 如何使用 Mongoose 和 Node.js 建立關係(帶有真實示例)

  7. 製作 chrome 擴展部分 1 (1 of 100DaysOfCode)

  1. 如何使用 React 和 Headless CMS 構建 CRUD 應用程序

  2. 在 Angular 中反應上下文

  3. 使用 Express 設置身份驗證路由

  4. 如何在圖像上製作動態文本疊加