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>
|
