Modern way to sanitize your data using the Sanitizer API

UpdatedDecember 27, 2023

•2 min read•View as Markdown

Modern way to sanitize your data using the Sanitizer API

Thomas Portelange

A Web Developer based in Belgium, specialized in PHP & JS development

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

A git diff with all changed and new unstaged files

I recently needed to collect all changes in one file for reporting purposes. Found this article: https://ratfactor.com/cards/git-diff-with-new-files In case you need something similar on Windows, here

Jul 27, 20261 min read

A git diff with all changed and new unstaged files

Writing a Zero-Dependency CSV and XLSX Reader/Writer

Some projects start with a grand plan. Others start because you just need to read a file without thinking too much about it. That was the case for spread-compat. I needed a common interface for CSV, X

Mar 6, 20265 min read

Writing a Zero-Dependency CSV and XLSX Reader/Writer

Media Queries Level 5 are awesome

With modern css, you can almost get rid of sass. But there is one last pain point : media queries. Not being able to use variables or an easy, common syntax for typical breakpoints is really annoying. That is, until you meet Media Queries Level 5. I’...

Oct 10, 20253 min read

Modern tooltips

This is a quick article to share this demo I just made. https://codepen.io/lekoalabe/pen/JoPNWpX

Dec 20, 20241 min read

Using Dialog elements today

Modals are typical UI elements for many web apps. There are countless packages dedicated to that specific features, each framework creating its own variation. Popular frameworks like Bootstrap also have custom code to deal with it. But all this feels...

Oct 29, 20243 min read

LeKoala Dev Blog

47 posts

Using a polyfill ?

The obvious solution is to use a polyfill, which uses DOMPurify under the hood. The issue with this is that unless you use feature detection to include the polyfill, you are going to include it in Chrome even if you don't need it. And if you use feature detection, you need to wait until the polyfill is loaded before using any code using the polyfill, which may be difficult to detect.

A simpler approach

In my case, all I needed is the setHTML. I don't really care about the rest of the spec.

So let's see what we got:

/** * @link https://web.dev/sanitizer/ * @link https://sanitizer-api.dev/ * @param {HTMLElement} el (NOT a template element) * @param {string} html * @param {Boolean} force */ export default function setHTML(el, html, force = false) { //@ts-ignore if (window.Sanitizer && !force) { //@ts-ignore el.setHTML(html); } else if (window["DOMPurify"]) { el.innerHTML = window["DOMPurify"].sanitize(html, { WHOLE_DOCUMENT: false, FORCE_BODY: false, }); } else { el.innerHTML = html; } } /** * Set the global DOMPurify if missing and if Sanitizer api is not available * Call this with await before any call to setHTML * @param {Boolean} force */ export async function loadDOMPurify(force = false) { //@ts-ignore if ((!window.Sanitizer || force) && !window["DOMPurify"]) { //@ts-ignore window["DOMPurify"] = (await import("https://cdn.jsdelivr.net/npm/dompurify@3/+esm")).default; } }

Import this little snippet, and you are good to go. Call await loadDOMPurify before any code using the setHTML helper. This will load DOMPurify using dynamic import from the cdn (or feel free to use your own local path for this).

Neat, no? :-) I've been using this in my WIP formidable elements library.

Command Palette

Comments

More from this blog

Using a polyfill ?

A simpler approach