如何將 CSS 套用到來自不同網域的 iFrame，同時保持安全？

解決跨域限制：在 iFrame 中加入 CSS

由於跨域限制，存取和修改 iFrame 中的內容會帶來挑戰。本文探討了將 CSS 應用於不同網域上的 iFrame 的解決方案。

將自訂CSS 套用於iFrame

要將自訂CSS 套用於從不同網域載入的iFrame，我們可以利用以下技術：

// Assume 'cssLink' is a valid CSS link element
frames['iframe'].document.body.appendChild(cssLink);

或者，jQuery 方法：

var $head = $("iframe").contents().find("head");
$head.append($("<link/>", { rel: "stylesheet", href: "file://path/to/style.css", type: "text/css" }));

安全注意事項

跨不同網域存取內容可能會帶來安全問題。為了減輕這些風險，請考慮以下措施：

• 同源策略：從同一網域安全地載入 iFrame 或利用跨來源資源共用 (CORS)。
• 檔案協定：透過「file://」協定載入 iFrame，該協定繞過 Mobile Safari 中的跨域限制。

透過利用這些技術，即使從不同的網域加載，開發人員也可以有效地將 CSS 應用到 iFrame，同時遵守適當的安全措施。

以上是如何將 CSS 套用到來自不同網域的 iFrame，同時保持安全？的詳細內容。更多資訊請關注PHP中文網其他相關文章！