-
Notifications
You must be signed in to change notification settings - Fork 918
/
unsafe-html.ts
54 lines (47 loc) · 2 KB
/
unsafe-html.ts
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
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
import {isPrimitive} from '../lib/parts.js';
import {directive, NodePart, Part} from '../lit-html.js';
interface PreviousValue {
readonly value: unknown;
readonly fragment: DocumentFragment;
}
// For each part, remember the value that was last rendered to the part by the
// unsafeHTML directive, and the DocumentFragment that was last set as a value.
// The DocumentFragment is used as a unique key to check if the last value
// rendered to the part was with unsafeHTML. If not, we'll always re-render the
// value passed to unsafeHTML.
const previousValues = new WeakMap<NodePart, PreviousValue>();
/**
* Renders the result as HTML, rather than text.
*
* Note, this is unsafe to use with any user-provided input that hasn't been
* sanitized or escaped, as it may lead to cross-site-scripting
* vulnerabilities.
*/
export const unsafeHTML = directive((value: unknown) => (part: Part): void => {
if (!(part instanceof NodePart)) {
throw new Error('unsafeHTML can only be used in text bindings');
}
const previousValue = previousValues.get(part);
if (previousValue !== undefined && isPrimitive(value) &&
value === previousValue.value && part.value === previousValue.fragment) {
return;
}
const template = document.createElement('template');
template.innerHTML = value as string; // innerHTML casts to string internally
const fragment = document.importNode(template.content, true);
part.setValue(fragment);
previousValues.set(part, {value, fragment});
});