| <!doctype html> |
| <html> |
| <head> |
| <script src="../dist/purify.js"></script> |
| </head> |
| <body> |
| <!-- Our DIV to receive content --> |
| <div id="sanitized"></div> |
| |
| <!-- Now let's sanitize that content --> |
| <script> |
| 'use strict'; |
| |
| // Specify dirty HTML |
| const dirty = '<p>HELLO<iframe/\/src=JavScript:alert(1)></ifrAMe><br>goodbye</p>'; |
| |
| // Function to convert text to uppercase |
| const uppercaseHook = (node) => { |
| if (node.nodeName && node.nodeName === '#text') { |
| node.textContent = node.textContent.toUpperCase(); |
| } |
| }; |
| |
| // Function to wrap text in <big> tags |
| const bigHook = (node) => { |
| if (node.nodeName && node.nodeName === '#text') { |
| node.textContent = node.textContent.big(); |
| } |
| }; |
| |
| // Function to wrap text in <strong> tags |
| const strongHook = (node) => { |
| if (node.nodeName && node.nodeName === '#text') { |
| node.textContent = node.textContent.bold(); |
| } |
| }; |
| |
| // Adding and removing hooks with DOMPurify |
| DOMPurify.addHook('beforeSanitizeAttributes', uppercaseHook); |
| let clean = DOMPurify.sanitize(dirty); |
| document.getElementById('sanitized').innerHTML += clean; |
| DOMPurify.removeHook('beforeSanitizeAttributes'); |
| |
| // Demonstrating adding multiple hooks |
| DOMPurify.addHook('beforeSanitizeAttributes', uppercaseHook); |
| DOMPurify.addHook('beforeSanitizeAttributes', bigHook); |
| DOMPurify.addHook('beforeSanitizeElements', strongHook); |
| clean = DOMPurify.sanitize(dirty); |
| document.getElementById('sanitized').innerHTML += clean; |
| DOMPurify.removeHooks('beforeSanitizeAttributes'); |
| |
| // Adding hooks and then using removeAllHooks |
| DOMPurify.addHook('beforeSanitizeAttributes', uppercaseHook); |
| DOMPurify.addHook('beforeSanitizeAttributes', bigHook); |
| clean = DOMPurify.sanitize(dirty); |
| document.getElementById('sanitized').innerHTML += clean; |
| DOMPurify.removeAllHooks(); |
| clean = DOMPurify.sanitize(dirty); |
| document.getElementById('sanitized').innerHTML += clean; |
| </script> |
| </body> |
| </html> |
