在前端開發中,<iframe> 內嵌的頁面與父頁(即包含 <iframe> 的頁面)有跨域問題,因為它們的領域(也稱為“來源”)不同。
網域是由協定、主機名稱和連接埠號碼組成的,例如 https://example.com:8080。如果內嵌的頁面與父頁面的網域不同,那麼就會遇到跨網域問題。這是因為瀏覽器出於安全考慮,限制了跨域腳本的執行,以防止惡意腳本攻擊。
為了解決跨域問題,可以透過以下方法設定 <iframe> 的領域:
- 使用 sandbox 屬性:sandbox 屬性可以用來限制 <iframe>內嵌頁面的功能,從而降低其安全風險。同時,它也可以用來設定 <iframe> 的域。例如:
<iframe src="https://example.com" sandbox="allow-same-origin"></iframe>
這裡將 <iframe> 的網域設定為與父頁面相同,即只允許載入與父頁面屬於相同網域的資源。
- 在內建頁面中設定 document.domain:如果內嵌頁面和父頁面的主網域相同,可以透過在兩個頁面中都設定 document.domain 來解除跨網域限制。例如:
<!-- 父页面 --> <script> document.domain = 'example.com'; </script> <iframe src="https://sub.example.com"></iframe>
<!-- 内嵌页面 --> <script> document.domain = 'example.com'; </script>
- 使用 postMessage API:postMessage API 可以用來在視窗之間傳遞訊息,從而實現跨域通訊。透過在父頁面和內嵌頁面中分別使用 window.postMessage() 方法來傳送和接收訊息,可以實現安全的跨域通訊。
要注意的是,除非有必要,否則不建議使用 <iframe> 來嵌入來自其他網域的內容,因為這可能會引入安全漏洞和效能問題。