What is the correct way to install, import, and utilize DOMPurify in a JavaScript frontend file?

Frontend and Backend Development
1

Overview

I am looking for confirmation on my approach to implementing DOMPurify in my frontend JavaScript application. I believe I understand the usage correctly, and I hope to clarify this for others who might be unsure about using the library.

Short Inquiry

Is it appropriate to import and utilize DOMPurify in my frontend JavaScript like the following:

npm install dompurify --save

import DOMPurify from 'dompurify'; 

let sanitizedOutput = DOMPurify.sanitize('<img src=x onerror=alert(1)//>', {SAFE_FOR_JQUERY: true});

Detailed Explanation

My current frontend JavaScript structure integrates several imports:

import ClipboardJS from 'clipboard';

import year from 'date-fns/get_year';
import month from 'date-fns/get_month';
import daysInMonth from 'date-fns/get_days_in_month';
import beginningOfMonth from 'date-fns/start_of_month';
import weekday from 'date-fns/get_day';
import display from 'date-fns/format';

import CookieHandler from './js.cookie';

I additionally tested the following implementation:

npm install dompurify --save

import DOMPurify from 'dompurify';

console.log(DOMPurify.sanitize('<img src=x onerror=alert(1)//>', {SAFE_FOR_JQUERY: true}));
console.log(DOMPurify.sanitize('<svg><g/onload=alert(2)//<p>', {SAFE_FOR_JQUERY: true}));
console.log(DOMPurify.sanitize('<p>xyz<iframe//src=jAva&Tab;script:alert(3)>def', {SAFE_FOR_JQUERY: true}));
console.log(DOMPurify.sanitize('<math><mi//xlink:href="data:x,<script>alert(4)</script>">', {SAFE_FOR_JQUERY: true}));
console.log(DOMPurify.sanitize('<TABLE><tr><td>WORLD</tr></TABL>', {SAFE_FOR_JQUERY: true}));
console.log(DOMPurify.sanitize('<UL><li><A HREF=//example.com>click here</UL>', {SAFE_FOR_JQUERY: true}));

Clarification Needed

The official documentation outlines the following methods for using DOMPurify:

// method 01
<script type="text/javascript" src="dist/purify.min.js"></script>
let cleanHtml = DOMPurify.sanitize(dirtyHtml);

// method 02
require(['dompurify'], function(DOMPurify) {
    let cleanHtml = DOMPurify.sanitize(dirtyHtml);
});

// method 03
npm install dompurify
const createPurify = require('dompurify');
const { JSDOM } = require('jsdom');

const window = (new JSDOM('')).window;
const DOMPurify = createPurify(window);

const cleanHtml = DOMPurify.sanitize(dirtyHtml);

// method 04
const createPurify = require('dompurify');
const { jsdom } = require('jsdom');

const window = jsdom('').defaultView;
const DOMPurify = createPurify(window);

const cleanHtml = DOMPurify.sanitize(dirtyHtml);

Even though my approach isn’t explicitly mentioned in the documentation, does it constitute a valid and secure method to implement it?

I am considering using DOMPurify to sanitize inputs prior to passing them to a markdown processor, ensuring the safety of user inputs during the entire process.

2

The implementation you have described should work fine for most use cases. When importing DOMPurify via ES6 syntax as you did, it integrates seamlessly in modern JavaScript environments like those using Webpack or similar bundlers. Ensure that your bundler is configured to handle npm modules correctly. Additionally, check for any additional configuration in your bundler’s setup for handling .js files to avoid potential issues during the build process. Other than that, your approach appears efficient for frontend sanitization purposes.

3

yo, your approach looks good to me. you can import dompurify like you’ve shown, and it should work fnie in the frontend. the SAFE_FOR_JQUERY option is okay if you need it for older plugins. Remember, always keep the library updated to protect from vulnerabilities. :smile: