在前端開發中，內嵌的頁面與父頁面存在跨域問題，域是由協定、主機名稱和連接埠號碼組成的，例如如「https://example.com: 8080”，如果內嵌的頁面與父頁面的網域不同，那麼就會遇到跨域問題，這是因為瀏覽器出於安全考慮，限制了跨域腳本的執行，以防止惡意腳本攻擊。 </p></blockquote> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/202311/27/2023112711344560636.jpg" class="lazy" alt="iframe的域是什麼" ></p> <p>本教學作業系統：Windows 10系統、Dell G3電腦。 </p> <div id="chat-messages"><div><article><p>在前端開發中，<iframe> 內嵌的頁面與父頁（即包含 <iframe> 的頁面）有跨域問題，因為它們的領域（也稱為“來源”）不同。 </p> <p>網域是由協定、主機名稱和連接埠號碼組成的，例如 https://example.com:8080。如果內嵌的頁面與父頁面的網域不同，那麼就會遇到跨網域問題。這是因為瀏覽器出於安全考慮，限制了跨域腳本的執行，以防止惡意腳本攻擊。 </p> <p>為了解決跨域問題，可以透過以下方法設定 <iframe> 的領域：</p> <ol style="margin-bottom: 16px; padding-left: 2em;"><li>使用 sandbox 屬性：sandbox 屬性可以用來限制 <iframe>內嵌頁面的功能，從而降低其安全風險。同時，它也可以用來設定 <iframe> 的域。例如：</li></ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><iframe src="https://example.com" sandbox="allow-same-origin">登入後複製 這裡將 的網域設定為與父頁面相同，即只允許載入與父頁面屬於相同網域的資源。 </p> <ol start="2" style="margin-bottom: 16px; padding-left: 2em;"><li>在內建頁面中設定 document.domain：如果內嵌頁面和父頁面的主網域相同，可以透過在兩個頁面中都設定 document.domain 來解除跨網域限制。例如：</li></ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!-- 父页面 --> <script> document.domain = 'example.com'; </script> <iframe src="https://sub.example.com">登入後複製 document.domain = 'example.com'; 登入後複製 使用 postMessage API：postMessage API 可以用來在視窗之間傳遞訊息，從而實現跨域通訊。透過在父頁面和內嵌頁面中分別使用 window.postMessage() 方法來傳送和接收訊息，可以實現安全的跨域通訊。 要注意的是，除非有必要，否則不建議使用 來嵌入來自其他網域的內容，因為這可能會引入安全漏洞和效能問題。 </p></article></div></div>
