DOMPurify と sanitize-html と xss と Sanitizer API
DOMPurifyというライブラリを知る機会があった。
なにをするライブラリなのかというと、
DOMPurify sanitizes HTML and prevents XSS attacks. You can feed DOMPurify with string full of dirty HTML and it will return a string (unless configured otherwise) with clean HTML. DOMPurify will strip out everything that contains dangerous HTML and thereby prevent XSS attacks and other nastiness. It's also damn bloody fast. We use the technologies the browser provides and turn them into an XSS filter. The faster your browser, the faster DOMPurify will be.
DeepLで訳すと、
DOMPurify は HTML をサニタイズし、XSS 攻撃を防止します。DOMPurify に汚れた HTML でいっぱいの文字列を与えると、(特に設定がない限り) きれいな HTML を含む文字列を返します。DOMPurify は危険な HTML を含むすべてを取り除き、それによって XSS 攻撃やその他の悪意を防ぎます。また、非常に高速です。ブラウザが提供する技術を利用し、XSSフィルタに変えます。あなたのブラウザが高速であればあるほど、DOMPurify は高速になります。
ということで、DirtyなHTMLのサニタイズをしてでXSSなどの危険を防ぐ目的となる。
SPA開発とセキュリティ - DOM based XSSを引き起こすインジェクションのVue, React, Angularにおける解説と対策 - Flatt Security Blog
Reactでいうと、dangerouslySetInnerHTMLでHTMLを動的に埋め込むような形にする(過去にそうしたことがある)が、これだとXSSの危険性があるので、HTMLをサニタイズする必要がある。
この記事ではHTMLのサニタイズにsanitize-htmlというライブラリを使っている。
あとxssという直球なライブラリも出てきた。
dompurify vs sanitize-html vs xss | npm trends
使うとしたらどれ使うのがいいんですかね、好み？
Sanitizer API
Sanitizer APIの使い方 | フロントエンドBlog | ミツエーリンクス
標準のAPIが存在するみたい。
2022年2月現在ではまだWICGによって管理されている仕様であり、どのブラウザにも正式には実装されていません。
とあるように、まだ正式実装はされてないそう。ただこれが実装されたらこれを使いたいところ。