iframe標簽用于嵌入外部網頁內容，通過src、width、height、frameborder、scrolling等屬性定義顯示效果和行為。1. src指定嵌入網頁的url；2. width和height設置尺寸；3. frameborder控制是否顯示邊框；4. scrolling決定滾動條顯示方式。但使用時需注意x-frame-options和csp安全機制限制，以及性能、SEO、安全和響應式設計問題。替代方案包括ssi、ajax、web components和cms模板系統，具體選擇取決于需求。
iframe 標簽用于在當前 html 頁面中嵌入另一個 HTML 頁面，相當于在一個網頁里開辟一個小窗口來顯示其他網頁的內容。它提供了一種將不同來源的內容整合到單個頁面上的便捷方式。
解決方案
iframe 的基本用法很簡單：
立即學習“前端免費學習筆記（深入）”；
<iframe src="要嵌入的網頁地址" width="寬度" height="高度" frameborder="0" scrolling="no"></iframe>
- src: 指定要嵌入的網頁的 URL。這是 iframe 最重要的屬性。
- width: 設置 iframe 的寬度，可以使用像素值 (例如 500px) 或百分比 (例如 100%)。
- height: 設置 iframe 的高度，同樣可以使用像素值或百分比。
- frameborder: 定義是否顯示 iframe 的邊框。0 表示不顯示邊框，1 表示顯示邊框 (通常瀏覽器默認顯示)。
- scrolling: 定義是否在 iframe 中顯示滾動條。no 表示不顯示滾動條，yes 表示顯示滾動條，auto 表示根據內容自動決定是否顯示滾動條。
一個簡單的例子：
<!DOCTYPE html> <html> <head> <title>iframe 示例</title> </head> <body> <h1>我的網頁</h1> <p>這是一個包含 iframe 的網頁。</p> <iframe src="https://www.example.com" width="800" height="600" frameborder="0"></iframe> <p>iframe 下面的內容。</p> </body> </html>
這段代碼會在你的網頁中嵌入 example.com 的內容，寬度為 800 像素，高度為 600 像素，并且沒有邊框。
iframe 的安全性問題：X-Frame-Options 如何影響嵌入？
X-Frame-Options 是一個 HTTP 響應頭，用于指示瀏覽器是否允許將頁面嵌入到 、
- DENY: 表示該頁面不允許被任何網站嵌入。
- SAMEORIGIN: 表示該頁面只允許被同源的網站嵌入。同源指的是協議、域名和端口都相同。
- ALLOW-FROM uri: (已棄用，不推薦使用) 表示該頁面只允許被指定 URI 的網站嵌入。
如果一個網站設置了 X-Frame-Options: DENY，那么任何網站都無法將其嵌入到 iframe 中。 如果設置了 X-Frame-Options: SAMEORIGIN，那么只有與該網站同源的網站才能將其嵌入到 iframe 中。
例如，如果 https://www.example.com 返回了 X-Frame-Options: SAMEORIGIN 響應頭，而你的網頁是 https://www.mydomain.com，那么你將無法在你的網頁中使用 iframe 嵌入 https://www.example.com。 瀏覽器會阻止這種嵌入，并在控制臺中顯示錯誤信息。
需要注意的是，ALLOW-FROM 指令已被許多瀏覽器棄用，因此不建議使用。 現代瀏覽器推薦使用 Content-Security-Policy (CSP) 的 frame-ancestors 指令來控制嵌入行為，它提供了更靈活和強大的配置選項。
如何使用 Content-Security-Policy (CSP) 控制 iframe 嵌入？
Content-Security-Policy (CSP) 是一個 HTTP 響應頭，允許網站管理員控制瀏覽器能夠加載哪些資源。它提供了一種更精細的方式來管理網站的安全策略，包括控制 iframe 的嵌入行為。
使用 frame-ancestors 指令可以指定哪些來源可以嵌入當前頁面。 例如：
Content-Security-Policy: frame-ancestors 'self' https://www.example.com;
這個 CSP 策略表示當前頁面只能被同源的網站 (‘self’) 和 https://www.example.com 嵌入到 iframe 中。
- ‘self’: 表示同源，即協議、域名和端口都必須相同。
- *: 表示允許任何來源嵌入 (不推薦，因為它會降低安全性)。
- https://www.example.com: 表示允許來自 https://www.example.com 的嵌入。
如果瀏覽器檢測到違反 CSP 策略的行為，它會阻止該行為，并在控制臺中顯示錯誤信息。 這有助于防止惡意網站將你的頁面嵌入到 iframe 中，從而降低點擊劫持等安全風險。
與 X-Frame-Options 相比，CSP 提供了更靈活和強大的控制選項，允許你更精細地管理網站的安全策略。 因此，推薦使用 CSP 的 frame-ancestors 指令來控制 iframe 的嵌入行為。
iframe 的替代方案：有什么更好的選擇嗎？
雖然 iframe 提供了一種方便的嵌入內容的方式，但它也存在一些缺點，例如：
- 性能問題: 每個 iframe 都會創建一個獨立的瀏覽上下文，這意味著瀏覽器需要為每個 iframe 加載和渲染單獨的頁面，這可能會影響性能，尤其是在嵌入多個 iframe 時。
- SEO 問題: 搜索引擎可能難以理解 iframe 中的內容，這可能會影響你的網站在搜索結果中的排名。
- 安全問題: 如果嵌入的 iframe 來自不受信任的來源，可能會存在安全風險。
- 響應式設計問題: iframe 在響應式設計中可能難以處理，尤其是在需要根據屏幕尺寸調整 iframe 的大小和布局時。
因此，在某些情況下，可以考慮使用其他的替代方案：
- 服務器端包含 (Server-Side Includes, SSI): SSI 允許你在服務器端將一個文件的內容包含到另一個文件中。 這可以用于將公共內容 (例如頁眉、頁腳) 包含到多個頁面中，而無需使用 iframe。
- AJAX (Asynchronous JavaScript and xml): AJAX 允許你異步地從服務器加載數據，并將數據動態地插入到頁面中。 這可以用于從不同的來源加載內容，而無需刷新整個頁面。
- Web Components: Web Components 允許你創建可重用的自定義 HTML 元素。 這可以用于封裝特定的功能和內容，并在多個頁面中使用。
- CMS (Content Management System) 的模板系統: 許多 CMS (例如 WordPress、Drupal) 提供了強大的模板系統，允許你將內容組織成可重用的模塊，并在多個頁面中使用。
選擇哪種替代方案取決于你的具體需求和場景。 如果只是需要包含一些靜態內容，那么 SSI 可能是一個不錯的選擇。 如果需要動態地加載和更新內容，那么 AJAX 可能更適合。 如果需要創建可重用的自定義元素，那么 Web Components 可能是一個更好的選擇。
總而言之，iframe 是一種方便的嵌入內容的方式，但它也存在一些缺點。 在選擇使用 iframe 之前，應該仔細考慮其優缺點，并評估是否有更合適的替代方案。 同時，需要注意 iframe 的安全性問題，并采取適當的安全措施來保護你的網站和用戶。
