問題一覧に戻る
中級dom
問題109: textContent vs innerHTML

textContentとinnerHTMLの違いと適切な使い分けを学びましょう。textContentは要素のテキスト内容を取得・設定し、HTMLタグは文字として扱われるためXSS攻撃に安全です。一方、innerHTMLはHTMLとして解釈されるため、動的なHTML構造の生成に便利ですが、ユーザー入力を直接設定するとXSS攻撃のリスクがあります。セキュリティを考慮し、ユーザー入力にはtextContent、信頼できるHTMLにはinnerHTMLを使用しましょう。

const element = {
  textContent: "",
  innerHTML: ""
};

// Safe text
element. = "Hello <script>alert('XSS')</script>";
console.log(element.textContent);

// HTML content
element. = "<strong>Bold</strong>";
console.log(element.innerHTML);