2-13：HTML 的 iframe 標籤

01:39:12

HTML 的 <iframe> 是用來在網頁內嵌入另一個網頁的標籤。它可以用來顯示外部網站的內容、載入文件或展示嵌入式的地圖、影片等資源。以下是有關 <iframe> 的基本用法及說明：

基本語法

<iframe src="https://example.com" width="600" height="400"></iframe>

屬性介紹

  1. src
    指定嵌入的網頁或資源的 URL。
    例：src="https://www.wingzero.tw"

  2. width 與 height
    定義 iframe 的寬度和高度，可以用像素或百分比表示。
    例：width="600" 或 height="400"

  3. title
    提供 iframe 的描述，用於輔助工具或 SEO。
    例：title="嵌入的內容"

  4. allow
    定義允許的功能，例如全螢幕、相機存取等。
    例：allow="fullscreen"

  5. sandbox
    限制 iframe 的功能，增加安全性。
    例：sandbox="allow-scripts"

  6. frameborder
    控制邊框的顯示，0 代表無邊框，1 代表顯示邊框（過時，建議用 CSS）。
    例：frameborder="0"

  7. loading
    定義加載策略，lazy 表示延遲讀取，eager 表示立即讀取。
    例：loading="lazy"

  8. allowfullscreen
    允許 iframe 內容全螢幕顯示。
    例：allowfullscreen

使用範例

嵌入 YouTube 影片

<iframe width="560" height="315" src="https://www.youtube.com/embed/h8MBFrg_SwA?si=KylTrQZe-e41DXob" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

 

注意事項

  1. 外部內容的安全性
    嵌入第三方內容時，可能存在安全風險，例如跨站腳本攻擊 (XSS)。建議使用 sandbox 屬性進行限制。

  2. 來源阻擋
    某些網站會透過 HTTP 標頭 (X-Frame-Options) 禁止被 iframe 嵌入，可能導致內容無法顯示。

  3. SEO 影響
    使用 iframe 嵌入內容時，對於搜尋引擎而言可能不容易抓取內部的內容，影響頁面 SEO。

 

iframe 的 sandbox 屬性是一個非常強大的功能，用來限制被嵌入內容的行為。它能有效提升網頁的安全性，特別是在嵌入來自外部來源的內容時，可以避免惡意腳本或潛在的攻擊威脅。

基本語法

<iframe src="https://example.com" sandbox></iframe>

如果只寫 sandbox 而不指定值，會對 iframe 應用以下所有限制（相當於開啟完全的沙箱模式）。

限制說明

啟用 sandbox 屬性後，以下行為預設會被禁止：

  1. 執行 JavaScript。
  2. 執行外掛（如 Flash）。
  3. 使用表單提交。
  4. 使用 top 和 window 對 iframe 外的頁面進行操作。
  5. 啟用自動彈出窗口（如 window.open）。
  6. 啟用全螢幕功能。

可選的值

可以透過指定值來解除部分限制：

  1. allow-same-origin
    允許 iframe 內的內容被視為同一來源，否則 iframe 內容會被視為不同來源。

    注意： 如果允許這個值，會解除一些跨域安全限制。

  2. allow-scripts
    允許執行 JavaScript，但無法執行來自其他來源的腳本（例如外部 CDN）。

    注意： 此屬性不能與 allow-same-origin 單獨使用，否則可能帶來安全風險。

  3. allow-forms
    允許提交表單。

  4. allow-modals
    允許顯示對話框（如 alert() 和 prompt()）。

  5. allow-popups
    允許彈出新窗口（如 window.open()）。

  6. allow-presentation
    允許內容啟用投影模式（如 Chromecast）。

  7. allow-downloads
    允許用戶在 iframe 內觸發下載行為。

  8. allow-top-navigation
    允許 iframe 內容透過 window.top 開啟到父頁面。

  9. allow-top-navigation-by-user-activation
    允許透過用戶操作（如按鈕點擊）將 iframe 開啟到父頁面。

  10. allow-pointer-lock
    允許進入指標鎖定模式（如遊戲中的游標鎖定）。

允許腳本和表單提交參考

<iframe src="https://example.com" sandbox="allow-scripts allow-forms"></iframe>

 

注意事項

  1. allow-same-origin 的風險
    如果使用了 allow-same-origin，則 iframe 的內容將可以存取瀏覽器的 Cookies 和 LocalStorage，可能導致跨站點腳本攻擊 (XSS)。

  2. 慎用 allow-top-navigation
    如果允許 iframe 操作 window.top，惡意的嵌入內容可能會重新導向父頁面至不安全的網站。

  3. 不支援的情況
    某些舊版瀏覽器可能不完全支援 sandbox 屬性，需做好兼容性測試。

 

iframe使用建議

  • 預設使用最小的權限，僅針對必要功能增加特定的 sandbox 值。
  • 僅嵌入可信任的內容來源，盡量避免對 iframe 的 JavaScript 提供過多的操作權限。