dompurify
Version:
DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. It's written in JavaScript and works in all modern browsers (Safari, Opera (15+), Internet Explorer (10+), Firefox and Chrome - as well as almost anything else usin
110 lines (95 loc) • 4.44 kB
HTML
<html>
<head>
<script src="../src/purify.js"></script>
</head>
<body>
<!-- Our DIV to receive content -->
<div id="sanitized"></div>
<!-- Now let's sanitize that content -->
<script>
/* jshint globalstrict:true */
/* global DOMPurify */
;
// Specify dirty HTML
var dirty = '<p>HELLO<iframe/\/src=JavScript:alert(1)></ifrAMe><br>goodbye</p>';
/**
* Add one hook, then remove it using removeHook()
*/
// Add a hook to convert all text to capitals
DOMPurify.addHook('beforeSanitizeAttributes', function(node){
// Set text node content to uppercase
if (node.nodeName && node.nodeName === '#text') {
node.textContent = node.textContent.toUpperCase();
}
});
// Clean HTML string and write into our DIV
var clean = DOMPurify.sanitize(dirty);
document.getElementById('sanitized').innerHTML += clean;
// now let's remove the hook again
console.log(DOMPurify.removeHook('beforeSanitizeAttributes'));
// Clean HTML string and write into our DIV
var clean = DOMPurify.sanitize(dirty);
document.getElementById('sanitized').innerHTML += clean;
/**
* Add three hooks, then remove two using removeHooks()
*/
// Add a hook to convert all text to capitals
DOMPurify.addHook('beforeSanitizeAttributes', function(node){
// Set text node content to uppercase
if (node.nodeName && node.nodeName === '#text') {
node.textContent = node.textContent.toUpperCase();
}
});
// Add a hook to convert all text to <BIG>
DOMPurify.addHook('beforeSanitizeAttributes', function(node){
// Set text node content to uppercase
if(node.nodeName && node.nodeName === '#text') {
node.textContent = node.textContent.big();
}
});
// Add a hook to convert all text to <STRONG>
DOMPurify.addHook('beforeSanitizeElements', function(node){
// Set text node content to uppercase
if (node.nodeName && node.nodeName === '#text') {
node.textContent = node.textContent.bold();
}
});
// Clean HTML string and write into our DIV
var clean = DOMPurify.sanitize(dirty);
document.getElementById('sanitized').innerHTML += clean;
// now let's remove the hook again
console.log(DOMPurify.removeHooks('beforeSanitizeAttributes'));
// Clean HTML string and write into our DIV
var clean = DOMPurify.sanitize(dirty);
document.getElementById('sanitized').innerHTML += clean;
/**
* Add two hooks, then remove them using removeAllHooks()
*
* Keep in mind, we still have one from above, the .bold() hook
*/
// Add a hook to convert all text to capitals
DOMPurify.addHook('beforeSanitizeAttributes', function(node) {
// Set text node content to uppercase
if (node.nodeName && node.nodeName === '#text') {
node.textContent = node.textContent.toUpperCase();
}
});
// Add a hook to convert all text to <BIG>
DOMPurify.addHook('beforeSanitizeAttributes', function(node) {
// Set text node content to uppercase
if (node.nodeName && node.nodeName === '#text') {
node.textContent = node.textContent.big();
}
});
// Clean HTML string and write into our DIV
var clean = DOMPurify.sanitize(dirty);
document.getElementById('sanitized').innerHTML += clean;
// now let's remove the hook again
console.log(DOMPurify.removeAllHooks());
// Clean HTML string and write into our DIV
var clean = DOMPurify.sanitize(dirty);
document.getElementById('sanitized').innerHTML += clean;
</script>
</body>
</html>