Element：innerHTML 屬性

值

獲取該屬性會返回一個字串，其中包含元素後代的 HTML 序列化。

設定該屬性接受TrustedHTML 物件或字串。它會將此值解析為 HTML，並用結果替換所有元素的後代。當設定為 null 值時，該 null 值將轉換為空字串（""），因此 elt.innerHTML = null 等同於 elt.innerHTML = ""。

異常

SyntaxError DOMException

如果嘗試使用格式不正確的 HTML 字串設定 innerHTML 的值，則丟擲此錯誤。

TypeError

如果在可信型別被CSP 強制執行且未定義預設策略時將屬性設定為字串，則丟擲此錯誤。

NoModificationAllowedError DOMException

如果嘗試將 HTML 插入到其父級為Document的節點中，則丟擲此錯誤。

描述

innerHTML 獲取元素內巢狀子 DOM 元素的序列化，或設定應解析為替換元素內 DOM 樹的 HTML 或 XML。

請注意，當 < 和 > 字元出現在屬性值中時，某些瀏覽器會將其序列化為 < 和 >（請參閱瀏覽器相容性）。這是為了防止潛在的安全漏洞（變異 XSS），其中攻擊者可以精心構造繞過淨化函式的輸入，從而實現跨站指令碼（XSS）攻擊。

影子 DOM 考慮

從屬性讀取的 DOM 樹的序列化不包括影子根——如果您想獲取包含影子根的 HTML 字串，則必須改用Element.getHTML() 或 ShadowRoot.getHTML() 方法。

同樣，當使用 innerHTML 設定元素內容時，HTML 字串會被解析為不包含影子根的 DOM 元素。因此，例如，<template> 會被解析為 HTMLTemplateElement，無論是否指定了shadowrootmode 屬性。為了從包含宣告性影子根的 HTML 字串設定元素內容，您必須改用 Element.setHTMLUnsafe() 或 ShadowRoot.setHTMLUnsafe()。

安全注意事項

innerHTML 屬性可能是跨站指令碼（XSS）攻擊最常見的載體，其中使用者提供的潛在不安全字串在未首先進行淨化的情況下被注入到 DOM 中。雖然該屬性確實阻止了<script> 元素在注入時執行，但它容易受到攻擊者可以精心構造 HTML 來執行惡意 JavaScript 的許多其他方式的影響。例如，以下示例將執行 error 事件處理程式中的程式碼，因為 <img> 的 src 值不是有效的影像 URL。

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert

您可以透過始終分配TrustedHTML 物件而不是字串，並使用require-trusted-types-for CSP 指令強制執行可信型別來緩解這些問題。這確保了輸入透過一個轉換函式，該函式有機會在注入之前淨化輸入以刪除潛在危險的標記。

示例

讀取元素的 HTML 內容

讀取 innerHTML 會導致使用者代理序列化元素的後代。

給定以下 HTML

<div id="example">
  <p>My name is Joe</p>
</div>

您可以獲取並記錄外部<div>內容標記，如下所示：

const myElement = document.querySelector("#example");
const contents = myElement.innerHTML;
console.log(contents); // "\n  <p>My name is Joe</p>\n"

替換元素的內容

在此示例中，我們將透過將 HTML 分配給元素的 innerHTML 屬性來替換元素的 DOM。為了減輕 XSS 的風險，我們將首先從包含 HTML 的字串建立一個 TrustedHTML 物件，然後將該物件分配給 innerHTML。

可信型別尚未在所有瀏覽器中受支援，因此我們首先定義可信型別小型填充。這可以作為可信型別 JavaScript API 的透明替代品。

if (typeof trustedTypes === "undefined")
  trustedTypes = { createPolicy: (n, rules) => rules };

接下來，我們建立一個 TrustedTypePolicy，它定義了一個 createHTML()，用於將輸入字串轉換為 TrustedHTML 例項。通常，createHTML() 的實現使用像 DOMPurify 這樣的庫來清理輸入，如下所示

const policy = trustedTypes.createPolicy("my-policy", {
  createHTML: (input) => DOMPurify.sanitize(input),
});

然後我們使用這個 policy 物件從潛在不安全的輸入字串建立 TrustedHTML 物件，並將結果分配給元素。

// The potentially malicious string
const untrustedString = "<p>I might be XSS</p><img src='x' onerror='alert(1)'>";

// Create a TrustedHTML instance using the policy
const trustedHTML = policy.createHTML(untrustedString);

// Inject the TrustedHTML (which contains a trusted string)
const element = document.querySelector("#container");
element.innerHTML = trustedHTML;

規範

瀏覽器相容性

另見

• Node.textContent 和 HTMLElement.innerText
• Element.insertAdjacentHTML()
• Element.outerHTML
• 將 HTML 或 XML 解析為 DOM 樹：DOMParser
• 將 DOM 樹序列化為 XML 字串：XMLSerializer
• Element.getHTML()
• ShadowRoot.getHTML()
• Element.setHTMLUnsafe()
• ShadowRoot.setHTMLUnsafe()
• Trusted Types API