注目キーワード
  1. npm
  2. composer
  3. css

[JavaScript] chromeでエラーを出さずにinnerHTMLするコード

サンプルコード

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img)

※参考URLからの引用

解説

Gigazineからの引用ですが、Google Chromeの最新安定版である83.0.4103.61でTrusted Typesなる新機能が追加されているようです。

これを有効にした場合、DOMへの単純な代入は使えなくなるようなので、書き方のメモとして残します。

詳細は参考URLを御覧ください。

参考URL

https://gigazine.net/news/20200520-google-chrome-83/