{"id":14191,"date":"2022-02-03T11:15:03","date_gmt":"2022-02-03T10:15:03","guid":{"rendered":"https:\/\/hesmid.nl\/test\/?p=14191"},"modified":"2022-02-03T20:07:29","modified_gmt":"2022-02-03T19:07:29","slug":"dompurify","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/dompurify\/","title":{"rendered":"DOMPurify"},"content":{"rendered":"\n

https:\/\/github.com\/cure53\/DOMPurify<\/a><\/p>\n\n\n\n

also: interesting discussion about XSS attacks (confusing even DOMPurify at times):<\/p>\n\n\n\n

https:\/\/news.ycombinator.com\/item?id=24703230<\/a><\/p>\n\n\n\n

\n\n\n\n

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.<\/a><\/p>\n\n\n\n

How do I use it?<\/h2>\n\n\n\n

It’s easy. Just include DOMPurify on your website.<\/p>\n\n\n\n

<\/a><\/h3>\n\n\n\n

Using the unminified development version<\/h3>\n\n\n\n
<script type=\"text\/javascript\" src=\"src\/purify.js\"><\/script><\/pre>\n\n\n\n\n\n\n\n
<\/a><\/h3>\n\n\n\n
Using the minified and tested production version (source-map available)<\/h3>\n\n\n\n
<script type=\"text\/javascript\" src=\"dist\/purify.min.js\"><\/script><\/pre>\n\n\n\n
Afterwards you can sanitize strings by executing the following code:<\/p>\n\n\n\n
let clean = DOMPurify.sanitize(dirty);<\/pre>\n\n\n\n
The resulting HTML can be written into a DOM element using innerHTML<\/code> or the DOM using document.write()<\/code>. That is fully up to you. Note that by default, we permit HTML, SVG and<\/strong> MathML. If you only need HTML, which might be a very common use-case, you can easily set that up as well:<\/p>\n\n\n\n
let clean = DOMPurify.sanitize(dirty, { USE_PROFILES: { html: true } });<\/pre>\n\n\n\n
Demo:<\/strong> Play with DOMPurify<\/a><\/p>\n\n\n\n
Some purification samples please?<\/h2>\n\n\n\n
How does purified markup look like? Well, the demo<\/a> shows it for a big bunch of nasty elements. But let’s also show some smaller examples!<\/p>\n\n\n\n
DOMPurify.sanitize('<img src=x onerror=alert(1)\/\/>'); \/\/ becomes <img src=\"x\">\nDOMPurify.sanitize('<svg><g\/onload=alert(2)\/\/<p>'); \/\/ becomes <svg><g><\/g><\/svg>\nDOMPurify.sanitize('<p>abc<iframe\/\/src=jAva&Tab;script:alert(3)>def<\/p>'); \/\/ becomes <p>abc<\/p>\nDOMPurify.sanitize('<math><mi\/\/xlink:href=\"data:x,<script>alert(4)<\/script>\">'); \/\/ becomes <math><mi><\/mi><\/math>\nDOMPurify.sanitize('<TABLE><tr><td>HELLO<\/tr><\/TABL>'); \/\/ becomes <table><tbody><tr><td>HELLO<\/td><\/tr><\/tbody><\/table>\nDOMPurify.sanitize('<UL><li><A HREF=\/\/google.com>click<\/UL>'); \/\/ becomes <ul><li><a href=\"\/\/google.com\">click<\/a><\/li><\/ul><\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
https:\/\/github.com\/cure53\/DOMPurify also: interesting discussion about XSS attacks (confusing even DOMPurify at times): https:\/\/news.ycombinator.com\/item?id=24703230 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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[159,7],"tags":[690,311,689,688],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/14191"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=14191"}],"version-history":[{"count":3,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/14191\/revisions"}],"predecessor-version":[{"id":14199,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/14191\/revisions\/14199"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=14191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=14191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=14191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}