Element: innerHTML プロパティ

値

このプロパティを取得すると、この要素の子孫要素の HTML シリアライズが含まれた文字列が返されます。

このプロパティを設定する際は、TrustedHTML オブジェクトまたは文字列のどちらかを受け付けます。この値は HTML として構文解析され、要素の子孫要素すべてがその結果に置き換えられます。 null 値に設定すると、その null 値は空文字列 ("") に変換されるため、 elt.innerHTML = null は elt.innerHTML = "" と同等です。

例外

SyntaxError DOMException

innerHTML の値を、正しくない形の HTML の文字列を使用して設定しようとした場合に発生します。

TypeError

信頼型が CSP によって強制されている場合で、かつデフォルトのポリシーが定義されていないときに、プロパティが文字列に設定されると、この例外が発生します。

NoModificationAllowedError DOMException

親が Document であるノードに HTML を挿入しようとした場合に発生します。

解説

innerHTML は、その要素内に含まれる子 DOM 要素のシリアライズされたデータを取得するか、その要素内の DOM ツリーを置き換えるために構文解析されるべき HTML または XML を設定します。

なお、一部のブラウザーでは、属性値内に < や > 文字が現れる場合、これらを < や > としてシリアル化します（ブラウザーの互換性を参照）。 これは、攻撃者が無害化関数を迂回する入力を生成し、クロスサイトスクリプティング (XSS) 攻撃をすることができる、潜在的なセキュリティの脆弱性を防ぐためのもの (mutation XSS) です。

シャドウ DOM の注意事項

DOM ツリーをプロパティから読み込んでシリアライズした場合、シャドウルートは含まれません。シャドウルートを含む HTML 文字列を取得したい場合は、 Element.getHTML() または ShadowRoot.getHTML() メソッドを使用する必要があります。

同様に、 innerHTML を使用して要素のコンテンツを設定する場合、 HTML 文字列はシャドウルートを含まない DOM 要素に解釈されます。 ですから、例えば <template> は、 shadowrootmode 属性が指定されているかどうかにかかわらず、 HTMLTemplateElement に解釈されます。 宣言的なシャドウルートが含まれた HTML 文字列から要素のコンテンツを設定するには、 Element.setHTMLUnsafe() または ShadowRoot.setHTMLUnsafe() を使用する必要があります。

セキュリティに関する注意事項

innerHTML プロパティは、おそらく クロスサイトスクリプティング (XSS) 攻撃において最も一般的な攻撃経路です。この攻撃では、ユーザーによって指定された安全性が保証されていない文字列が、事前に無害化されることなく DOM に注入されてしまいます。 この機能は、<script> 要素が注入された際の実行は防ぎますが、攻撃者が悪意のある JavaScript を実行するために HTML を巧妙に作成する他の多くの方法に対しては脆弱です。 例えば、次の例では、<img> の src の値が有効な画像 URL ではないため、error イベントハンドラー内のコードが実行されてしまいます。

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // アラートが表示される

これらの課題を軽減するには、文字列の代わりに常に TrustedHTML オブジェクトを割り当て、CSP の require-trusted-types-for ディレクティブを使用して信頼型を強制することで、これらの問題を軽減できます。 これにより、入力が変換関数を通過し、その関数によって、入力が挿入される前に、潜在的に危険なマークアップが除去されるための無害化処理が行われる可能性があります。

例

要素の HTML コンテンツの読み取り

innerHTML を読み取ると、ユーザーエージェントはその要素の子孫要素をシリアライズします。

以下の HTML を想定してください。

<div id="example">
  <p>私の名前はジョーです</p>
</div>

次のようにして、外側の <div> のコンテンツのマークアップを取得し、ログ出力することができます。

const myElement = document.querySelector("#example");
const contents = myElement.innerHTML;
console.log(contents); // "\n  <p>私の名前はジョーです</p>\n"

要素のコンテンツの置き換え

この例では、要素の innerHTML プロパティに HTML を割り当てることで、その要素の DOM を置き換えます。 XSS のリスクを軽減するため、まず HTML を含む文字列から TrustedHTML オブジェクトを生成し、そのオブジェクトを innerHTML に割り当てます。

信頼型はまだすべてのブラウザーで対応していないため、まず 信頼型 tinyfill を定義します。 これは、信頼型 JavaScript API の透過的な代替として機能します。

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

次に、入力文字列を TrustedHTML インスタンスに変換するための createHTML() を定義する TrustedTypePolicy を作成します。 一般的に、createHTML() の実装では、下記に示すように、DOMPurify などのライブラリーを使用して入力を無害化します。

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

次に、この policy オブジェクトを使用して、安全性が保証されていない可能性のある入力文字列から TrustedHTML オブジェクトを作成し、その結果を要素に代入します。

// 悪意のある可能性のある文字列
const untrustedString = "<p>XSS の可能性あり</p><img src='x' onerror='alert(1)'>";

// ポリシーを使用して TrustedHTML インスタンスを作成する
const trustedHTML = policy.createHTML(untrustedString);

// TrustedHTML（信頼できる文字列が含まれている）を挿入する
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()
• 信頼型 API