@@ -12,7 +12,7 @@ This is the relevant code:
12
12
13
13
``` javascript
14
14
// Clean HTML string and write into our DIV
15
- var clean = DOMPurify .sanitize (dirty);
15
+ const clean = DOMPurify .sanitize (dirty);
16
16
```
17
17
18
18
### Config Demo [ Link] ( config-demo.html )
@@ -24,10 +24,10 @@ This is the relevant code:
24
24
``` javascript
25
25
// Specify a configuration directive, only <P> elements allowed
26
26
// Note: We want to also keep <p>'s text content, so we add #text too
27
- var config = { ALLOWED_TAGS : [' p' , ' #text' ], KEEP_CONTENT : false };
27
+ const config = { ALLOWED_TAGS : [' p' , ' #text' ], KEEP_CONTENT : false };
28
28
29
29
// Clean HTML string and write into our DIV
30
- var clean = DOMPurify .sanitize (dirty, config);
30
+ const clean = DOMPurify .sanitize (dirty, config);
31
31
```
32
32
33
33
### Advanced Config Demo [ Link] ( advanced-config-demo.html )
@@ -38,7 +38,7 @@ This is the relevant code:
38
38
39
39
``` javascript
40
40
// Specify a configuration directive
41
- var config = {
41
+ const config = {
42
42
ALLOWED_TAGS : [' p' , ' #text' ], // only <P> and text nodes
43
43
KEEP_CONTENT : false , // remove content from non-allow-listed nodes too
44
44
ADD_ATTR : [' kitty-litter' ], // permit kitty-litter attributes
@@ -47,7 +47,7 @@ var config = {
47
47
};
48
48
49
49
// Clean HTML string and write into our DIV
50
- var clean = DOMPurify .sanitize (dirty, config);
50
+ const clean = DOMPurify .sanitize (dirty, config);
51
51
```
52
52
53
53
### Hooks Demo [ Link] ( hooks-demo.html )
@@ -66,7 +66,7 @@ DOMPurify.addHook('beforeSanitizeAttributes', function (node) {
66
66
});
67
67
68
68
// Clean HTML string and write into our DIV
69
- var clean = DOMPurify .sanitize (dirty);
69
+ const clean = DOMPurify .sanitize (dirty);
70
70
```
71
71
72
72
### Add hooks and remove hooks [ Link] ( hooks-removal-demo.html )
@@ -85,13 +85,13 @@ DOMPurify.addHook('beforeSanitizeAttributes', function (node) {
85
85
});
86
86
87
87
// Clean HTML string and write into our DIV
88
- var clean = DOMPurify .sanitize (dirty);
88
+ let clean = DOMPurify .sanitize (dirty);
89
89
90
90
// now let's remove the hook again
91
91
console .log (DOMPurify .removeHook (' beforeSanitizeAttributes' ));
92
92
93
93
// Clean HTML string and write into our DIV
94
- var clean = DOMPurify .sanitize (dirty);
94
+ let clean = DOMPurify .sanitize (dirty);
95
95
```
96
96
97
97
### Hook to open all links in a new window [ Link] ( hooks-target-blank-demo.html )
@@ -117,7 +117,7 @@ DOMPurify.addHook('afterSanitizeAttributes', function (node) {
117
117
});
118
118
119
119
// Clean HTML string and write into our DIV
120
- var clean = DOMPurify .sanitize (dirty);
120
+ const clean = DOMPurify .sanitize (dirty);
121
121
```
122
122
123
123
### Hook to white-list safe URI Schemes [ Link] ( hooks-scheme-allowlist.html )
@@ -130,15 +130,15 @@ This is the relevant code:
130
130
131
131
``` javascript
132
132
// allowed URI schemes
133
- var allowlist = [' http' , ' https' , ' ftp' ];
133
+ const allowlist = [' http' , ' https' , ' ftp' ];
134
134
135
135
// build fitting regex
136
- var regex = RegExp (' ^(' + allowlist .join (' |' ) + ' ):' , ' gim' );
136
+ const regex = RegExp (' ^(' + allowlist .join (' |' ) + ' ):' , ' gim' );
137
137
138
138
// Add a hook to enforce URI scheme allow-list
139
139
DOMPurify .addHook (' afterSanitizeAttributes' , function (node ) {
140
140
// build an anchor to map URLs to
141
- var anchor = document .createElement (' a' );
141
+ const anchor = document .createElement (' a' );
142
142
143
143
// check all href attributes for validity
144
144
if (node .hasAttribute (' href' )) {
@@ -164,7 +164,7 @@ DOMPurify.addHook('afterSanitizeAttributes', function (node) {
164
164
});
165
165
166
166
// Clean HTML string and write into our DIV
167
- var clean = DOMPurify .sanitize (dirty);
167
+ const clean = DOMPurify .sanitize (dirty);
168
168
```
169
169
170
170
### Hook to allow and sand-box all JavaScript [ Link] ( hooks-mentaljs-demo.html )
@@ -177,15 +177,15 @@ This is the relevant code:
177
177
178
178
``` javascript
179
179
// allow script elements
180
- var config = {
180
+ const config = {
181
181
ADD_TAGS : [' script' ],
182
182
ADD_ATTR : [' onclick' , ' onmouseover' , ' onload' , ' onunload' ],
183
183
};
184
184
185
185
// Add a hook to sanitize all script content with MentalJS
186
186
DOMPurify .addHook (' uponSanitizeElement' , function (node , data ) {
187
187
if (data .tagName === ' script' ) {
188
- var script = node .textContent ;
188
+ let script = node .textContent ;
189
189
if (
190
190
! script ||
191
191
' src' in node .attributes ||
@@ -195,7 +195,7 @@ DOMPurify.addHook('uponSanitizeElement', function (node, data) {
195
195
return node .parentNode .removeChild (node);
196
196
}
197
197
try {
198
- var mental = MentalJS ().parse ({
198
+ let mental = MentalJS ().parse ({
199
199
options: {
200
200
eval: false ,
201
201
dom: true ,
@@ -212,7 +212,7 @@ DOMPurify.addHook('uponSanitizeElement', function (node, data) {
212
212
// Add a hook to sanitize all white-listed events with MentalJS
213
213
DOMPurify .addHook (' uponSanitizeAttribute' , function (node , data ) {
214
214
if (data .attrName .match (/ ^ on\w + / )) {
215
- var script = data .attrValue ;
215
+ let script = data .attrValue ;
216
216
try {
217
217
return (data .attrValue = MentalJS ().parse ({
218
218
options: {
@@ -228,7 +228,7 @@ DOMPurify.addHook('uponSanitizeAttribute', function (node, data) {
228
228
});
229
229
230
230
// Clean HTML string and write into our DIV
231
- var clean = DOMPurify .sanitize (dirty, config);
231
+ const clean = DOMPurify .sanitize (dirty, config);
232
232
```
233
233
234
234
### Hook to proxy all links [ Link] ( hooks-link-proxy-demo.html )
@@ -264,7 +264,7 @@ DOMPurify.addHook('afterSanitizeAttributes', function (node) {
264
264
});
265
265
266
266
// Clean HTML string and write into our DIV
267
- var clean = DOMPurify .sanitize (dirty);
267
+ const clean = DOMPurify .sanitize (dirty);
268
268
```
269
269
270
270
### Hook to proxy all HTTP leaks including CSS [ Link] ( hooks-proxy-demo.html )
@@ -277,28 +277,28 @@ This is the relevant code:
277
277
278
278
``` javascript
279
279
// Specify proxy URL
280
- var proxy = ' https://my.proxy/?url=' ;
280
+ const proxy = ' https://my.proxy/?url=' ;
281
281
282
282
// What do we allow? Not much for now. But it's tight.
283
- var config = {
283
+ const config = {
284
284
FORBID_TAGS : [' svg' ],
285
285
WHOLE_DOCUMENT : true ,
286
286
};
287
287
288
288
// Specify attributes to proxy
289
- var attributes = [' action' , ' background' , ' href' , ' poster' , ' src' , ' srcset' ]
289
+ const attributes = [' action' , ' background' , ' href' , ' poster' , ' src' , ' srcset' ]
290
290
291
291
// specify the regex to detect external content
292
- var regex = / (url\( "? )(?!data:)/ gim ;
292
+ const regex = / (url\( "? )(?!data:)/ gim ;
293
293
294
294
/**
295
295
* Take CSS property-value pairs and proxy URLs in values,
296
296
* then add the styles to an array of property-value pairs
297
297
*/
298
298
function addStyles (output , styles ) {
299
- for (var prop = styles .length - 1 ; prop >= 0 ; prop-- ) {
299
+ for (let prop = styles .length - 1 ; prop >= 0 ; prop-- ) {
300
300
if (styles[styles[prop]]) {
301
- var url = styles[styles[prop]].replace (regex, ' $1' + proxy);
301
+ let url = styles[styles[prop]].replace (regex, ' $1' + proxy);
302
302
styles[styles[prop]] = url;
303
303
}
304
304
if (styles[styles[prop]]) {
@@ -312,8 +312,8 @@ function addStyles(output, styles) {
312
312
* then create matching CSS text for later application to the DOM
313
313
*/
314
314
function addCSSRules (output , cssRules ) {
315
- for (var index = cssRules .length - 1 ; index >= 0 ; index-- ) {
316
- var rule = cssRules[index];
315
+ for (let index = cssRules .length - 1 ; index >= 0 ; index-- ) {
316
+ let rule = cssRules[index];
317
317
// check for rules with selector
318
318
if (rule .type == 1 && rule .selectorText ) {
319
319
output .push (rule .selectorText + ' {' );
@@ -336,8 +336,8 @@ function addCSSRules(output, cssRules) {
336
336
// check for @keyframes rules
337
337
} else if (rule .type === rule .KEYFRAMES_RULE ) {
338
338
output .push (' @keyframes ' + rule .name + ' {' );
339
- for (var i = rule .cssRules .length - 1 ; i >= 0 ; i-- ) {
340
- var frame = rule .cssRules [i];
339
+ for (let i = rule .cssRules .length - 1 ; i >= 0 ; i-- ) {
340
+ let frame = rule .cssRules [i];
341
341
if (frame .type === 8 && frame .keyText ) {
342
342
output .push (frame .keyText + ' {' );
343
343
if (frame .style ) {
@@ -365,7 +365,7 @@ function proxyAttribute(url) {
365
365
// Add a hook to enforce proxy for leaky CSS rules
366
366
DOMPurify .addHook (' uponSanitizeElement' , function (node , data ) {
367
367
if (data .tagName === ' style' ) {
368
- var output = [];
368
+ let output = [];
369
369
addCSSRules (output, node .sheet .cssRules );
370
370
node .textContent = output .join (' \n ' );
371
371
}
@@ -374,7 +374,7 @@ DOMPurify.addHook('uponSanitizeElement', function (node, data) {
374
374
// Add a hook to enforce proxy for all HTTP leaks incl. inline CSS
375
375
DOMPurify .addHook (' afterSanitizeAttributes' , function (node ) {
376
376
// Check all src attributes and proxy them
377
- for (var i = 0 ; i <= attributes .length - 1 ; i++ ) {
377
+ for (let i = 0 ; i <= attributes .length - 1 ; i++ ) {
378
378
if (node .hasAttribute (attributes[i])) {
379
379
node .setAttribute (
380
380
attributes[i],
@@ -385,12 +385,12 @@ DOMPurify.addHook('afterSanitizeAttributes', function (node) {
385
385
386
386
// Check all style attribute values and proxy them
387
387
if (node .hasAttribute (' style' )) {
388
- var styles = node .style ;
389
- var output = [];
390
- for (var prop = styles .length - 1 ; prop >= 0 ; prop-- ) {
388
+ let styles = node .style ;
389
+ let output = [];
390
+ for (let prop = styles .length - 1 ; prop >= 0 ; prop-- ) {
391
391
// we re-write each property-value pair to remove invalid CSS
392
392
if (node .style [styles[prop]] && regex .test (node .style [styles[prop]])) {
393
- var url = node .style [styles[prop]].replace (regex, ' $1' + proxy);
393
+ let url = node .style [styles[prop]].replace (regex, ' $1' + proxy);
394
394
node .style [styles[prop]] = url;
395
395
}
396
396
output .push (styles[prop] + ' :' + node .style [styles[prop]] + ' ;' );
@@ -405,7 +405,7 @@ DOMPurify.addHook('afterSanitizeAttributes', function (node) {
405
405
});
406
406
407
407
// Clean HTML string and write into our DIV
408
- var clean = DOMPurify .sanitize (dirty, config);
408
+ const clean = DOMPurify .sanitize (dirty, config);
409
409
```
410
410
411
411
### Hook to sanitize SVGs shown via an ` <img> ` tag. [ Link] ( hooks-svg-demo.html )
@@ -423,14 +423,14 @@ DOMPurify.addHook('afterSanitizeAttributes', function (node) {
423
423
});
424
424
425
425
// Clean SVG string and allow the "filter" tag
426
- var clean = DOMPurify .sanitize (dirty, { ADD_TAGS : [' filter' ] });
426
+ const clean = DOMPurify .sanitize (dirty, { ADD_TAGS : [' filter' ] });
427
427
428
428
// Remove partial XML comment left in the HTML
429
- var badTag = clean .indexOf (' ]>' );
430
- var pureSvg = clean .substring (badTag < 0 ? 0 : 5 , clean .length );
429
+ let badTag = clean .indexOf (' ]>' );
430
+ let pureSvg = clean .substring (badTag < 0 ? 0 : 5 , clean .length );
431
431
432
432
// Show sanitized content in <img> element
433
- var img = new Image ();
433
+ let img = new Image ();
434
434
img .src = ' data:image/svg+xml;base64,' + window .btoa (pureSvg);
435
435
document .getElementById (' sanitized' ).appendChild (img);
436
436
```
0 commit comments