HTML Sanitizer API - 原生的 JavaScript Security API

最近在 10 / 18，W3C 中的 Web Platform Incubator Community Group 發布了一項 HTML Sanitizer API 規範草案，此草案的目的是為了解決瀏覽器 XSS 攻擊的問題。不過因為才剛公佈，所以還沒有瀏覽器有支援。

如果想要體驗的話，可以調整瀏覽器的設定：
Chrome ：about://flags/#enable-experimental-web-platform-features
Firefox：about:config将dom.security.sanitizer.enabled

主要的功能是允許開發者當接收到了不受信任的 HTML 字串和 Document 或 DocumentFragment 物件的時候，可以對其進行清理後再安全的插入到 DOM 中(講白話就是幫我們過濾)。
使用的了 Sanitizer API 的好處就是減少了使用第三方套件來處理。使用了原生的 API 之後也可以提升效能。

Sanitizer API Methods

Sanitizer API 提供了三種基本的清理方式

Element.setHTML()：用於解析和清理 HTML 字串，並立即將其插入當前元素的 DOM。可以當作是安全版本的 Element.innerHTML

const unsanitized_string = "abc <script>alert(1)</script> def";  // Unsanitized string of HTML

const sanitizer = new Sanitizer();  // Default sanitizer;

// Get the Element with id "target" and set it with the sanitized string.
const target = document.getElementById("target");
target.setHTML(unsanitized_string, sanitizer);

console.log(target.innerHTML);
// "abc  def"

Sanitizer.sanitizeFor()：用於解析和清理 HTML 字串，跟 Element.setHTML 不同的在於，並不會插入 DOM 中。

const unsanitized_string = "abc <script>alert(1)</script> def";  // Unsanitized string of HTML
const sanitizer = new Sanitizer();  // Default sanitizer;

// Sanitize the string
let sanitizedDiv = sanitizer.sanitizeFor("div", unsanitized_string);

//We can verify the returned element type, and view sanitized HTML in string form:
console.log( (sanitizedDiv instanceof HTMLDivElement) );
// true
console.log(sanitizedDiv.innerHTML)
// "abc  def"

// At some point later ...

// Get the element to update. This must be a div to match our sanitizeFor() context.
// Set its content to be the children of our sanitized element. 
document.querySelector("div#target").replaceChildren(sanitizedDiv.children);

Sanitizer.sanitize()：清理 Document 或 DocumentFragment 中的資料。直接清理 DOM 中的結構。

const sanitizer = new Sanitizer();  // Default sanitizer;

// Get the frame and its Document object
const frame_element = document.getElementById("userFrame")
const unsantitized_frame_tree = frame_element.contentWindow.document;

// Sanitize the document tree and update the frame.
const sanitized_frame_tree = sanitizer.sanitize(unsanititized_frame_tree);
frame_element.replaceChildren(sanitized_frame_tree);

Reference

• https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API