DOMPurify/demos/hooks-node-removal2-demo.html at main · cure53/DOMPurify · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!doctype html>
<html>
    <head>
        <script src="../dist/purify.js"></script>
    </head>
    <body>
        <!-- Our PRE to receive content -->
        <pre id="sanitized"></pre>

        <!-- Now let's sanitize that content -->
        <script>
            'use strict';

            /**
             * In this example, we have some subset of tags that we want to allow, and we have some tags that, if
             * encountered, need to be removed completely, including any nested content. An example might be stripping
             * out the footer.
             *
             * We can't simply remove the footer tag from the ALLOWED_TAGS configuration because all that will do is
             * strip out the footer tag but leave the nested content. And we can't register 'footer' in the FORBID_TAGS
             * config because you can't use both FORBID_TAGS and ALLOWED_TAGS together.
             *
             * So in this scenario, we only want to allow divs, and we want footers removed entirely.
             */

            // Specify dirty HTML
            const dirty = '<div><span>This should remain</span><footer>This should be stripped</footer></div>';

            // What we want is '<div>This should remain</div>' -- span is removed but content kept, but the footer is
            // completely removed.

            DOMPurify.setConfig({
                ALLOWED_TAGS: [
                    'div',    // because we really want it
                    '#text',  // because we really want it
                    // 'footer' is added because if not included, the default behavior is to strip
                    // the tag but keep the content, which we don't want. So, we use a hook for actual
                    // removal. The hook requires the tag to be an allowed tag or errors are thrown.
                    'footer'
                ]
            });

            /**
             * This hook removes the footer element and its children entirely. Note that if we did not also register
             * the footer as an allowed tag, we would get an error. So, it's important to do both.
             */
            DOMPurify.addHook('uponSanitizeElement', node => {
                if (node.tagName === 'FOOTER') {
                    node.remove();
                }
            });

            // Clean HTML string and write into our DIV
            const clean = DOMPurify.sanitize(dirty);
            document.getElementById('sanitized').innerText = clean;
        </script>
    </body>
</html>