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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
<!DOCTYPE html>
<html>
<head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testcases.sub.js"></script>
</head>
<body>
<script>
function buildNode(element_name, markup) {
const e = document.createElement(element_name);
e.innerHTML = markup;
return e;
}
function assert_node_equals(node1, node2) {
assert_true(node1 instanceof Node && node1.isEqualNode(node2),
`Node[${node1.innerHTML}] == Node[${node2.innerHTML}]`);
}
for (const context of ["script", "iframe", "object", "div"]) {
const should_fail = context != "div";
test(t => {
let elem = document.createElement(context);
let probe_fn = _ => elem.setHTML("<div>Hello!</div>", new Sanitizer());
if (should_fail) {
assert_throws_js(TypeError, probe_fn);
} else {
probe_fn();
}
assert_equals(should_fail, !elem.firstChild);
}, `${context}.setHTML should ${should_fail ? "fail" : "pass"}.`);
}
for(const context of ["div", "template", "table"]) {
const elem1 = document.createElement(context);
const elem2 = document.createElement(context);
for (const probe of ["<em>Hello</em>", "<td>data</td>"]) {
elem1.setHTML(probe, new Sanitizer());
elem2.innerHTML = probe;
test(t => {
assert_node_equals(elem2, elem1);
}, `Sanitizer: <${context}>.setHTML("${probe}", ...) obeys parse context.`);
}
}
for (const testcase of testcases) {
const element = document.createElement("template");
test(t => {
let s = new Sanitizer(testcase.config_input);
element.setHTML(testcase.value, {sanitizer: s });
assert_node_equals(buildNode(element.localName, testcase.result), element);
}, "Sanitizer: Element.setHTML with config: " + testcase.message);
}
[
undefined,
{},
{ sanitizer: new Sanitizer() },
{ sanitizer: undefined },
{ avocado: new Sanitizer() },
].forEach((options, index) => {
test(t => {
const e = document.createElement("div");
e.setHTML("<em>bla</em><script>bla<" + "/script>", options);
assert_equals(e.innerHTML, "<em>bla</em>");
}, `Sanitizer: Element.setHTML options dictionary #${index} uses default.`);
});
[
"tomato",
{ sanitizer: null },
{ sanitizer: "avocado" },
{ sanitizer: { allowElements: [ "a", "b", "c" ] } },
].forEach((options, index) => {
test(t => {
assert_throws_js(TypeError, _ => {
document.createElement("div").setHTML("bla", options);
});
}, `Sanitizer: Element.setHTML invalid options dictionary #${index}`);
});
test(t => {
const sanitizer = new Sanitizer({allowElements: ["b"]});
const element = document.createElement("div");
// WebIDL magic: An IDL dictionary is mapped to a JS object. Thus, a plain
// Sanitizer instance will be accepted as an options dictionary. However,
// it will then try to read the .sanitizer property of the Sanitizer, and
// since that doesn't usually exist will treat it as an empty dictionary.
//
// Ref: https://webidl.spec.whatwg.org/#es-dictionary
// Sanitizer instance in the dictionary: Config is applied.
element.setHTML("<em>celery</em>", {sanitizer: sanitizer});
assert_equals(element.innerHTML, "celery");
// Same Sanitizer instance, passed directly: Is like an empty dictionary
// and config is not applied.
element.setHTML("<em>celery</em>", sanitizer);
assert_equals(element.innerHTML, "<em>celery</em>");
// Sanitizer-ception: Set the Sanitizer as the .sanitizer property on itself.
// Now the config is applied. It's magic. Just not the good kind of magic.
sanitizer.sanitizer = sanitizer;
element.setHTML("<em>celery</em>", sanitizer);
assert_equals(element.innerHTML, "celery");
}, "Sanitizer: Element.setHTML with sanitizer instance.");
</script>
</body>
</html>
|
