`UNTRUSTED DATA` | HTML Entity Encoding |
8 | | String | Safe HTML Attributes | `` | `clickme` | URL Encoding |
10 | | String | Untrusted URL in a SRC or HREF attribute | `clickme``` | `Selection` | ```` | `UNTRUSTED HTML` | HTML Validation (JSoup, AntiSamy, HTML Sanitizer) |
14 | | String | DOM XSS | ``;
98 | ```
99 |
100 | - Except for alphanumeric characters, escape all characters less than 256 with the \xHH format to prevent switching out of the data value into the script context or into another attribute. DO NOT use any escaping shortcuts like \" because the quote character may be matched by the HTML attribute parser which runs first. These escaping shortcuts are also susceptible to "escape-the-escape" attacks where the attacker sends \" and the vulnerable code turns that into \\" which enables the quote.
101 |
102 | ### References
103 |
104 | 1. https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet#RULE_.233_-_JavaScript_Escape_Before_Inserting_Untrusted_Data_into_JavaScript_Data_Values
105 |
106 | ## As CSS Content
107 |
108 | ```js
109 | html``;
110 | ```
111 |
112 | - Please note there are some CSS contexts that can never safely use untrusted data as input - EVEN IF PROPERLY CSS ESCAPED! You will have to ensure that URLs only start with "http" not "javascript" and that properties never start with "expression".
113 | - Except for alphanumeric characters, escape all characters with ASCII values less than 256 with the \HH escaping format. DO NOT use any escaping shortcuts like \" because the quote character may be matched by the HTML attribute parser which runs first. These escaping shortcuts are also susceptible to "escape-the-escape" attacks where the attacker sends \" and the vulnerable code turns that into \\" which enables the quote.
114 | - If attribute is quoted, breaking out requires the corresponding quote. All attributes should be quoted but your encoding should be strong enough to prevent XSS when untrusted data is placed in unquoted contexts. Unquoted attributes can be broken out of with many characters including [space] % * + , - / ; < = > ^ and |. Also, the tag will close the style block even though it is inside a quoted string because the HTML parser runs before the JavaScript parser. Please note that we recommend aggressive CSS encoding and validation to prevent XSS attacks for both quoted and unquoted attributes.
115 |
116 | ### References
117 |
118 | 1. https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet#RULE_.234_-_CSS_Escape_And_Strictly_Validate_Before_Inserting_Untrusted_Data_into_HTML_Style_Property_Values
119 |
120 | ## Mix
121 |
122 | ```js
123 | html`${text} `;
124 | ```
125 |
126 | - ${attr}=${value} ${var} is difficult – was ${var} suppose to be part of ${attr} or it's own attribute?
127 | - unless the attribute was quoted, any whitespace will be treated as a new attribute, so in the example above ${var} would be a new attribute
128 |
129 | # References
130 |
131 | 1. https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet
132 |
133 | # Idea on how to combine E4H principles and contextual auto escaping
134 |
135 | 1. replace all substitutions with placeholder values (their index in the array)
136 | 2. create DOM as normal using HTML parser (no chance for XSS since there is no user generated expression)
137 | - will need to check for correct closing tags/attributes or something so the HTML parser doesn't freak out
138 | 3. with the DOM created, we can use setAttribute() for safely encoding attribute values (prevent attribution injection) and use contextual auto escaping to figure out the rest
--------------------------------------------------------------------------------
/test/htmlPaser.test.js:
--------------------------------------------------------------------------------
1 | describe('HTML parser', function() {
2 |
3 | it('should return null for empty string', function() {
4 | var el = html``;
5 |
6 | expect(el).to.be.empty;
7 | });
8 |
9 | it('should create a text node', function() {
10 | var el = html`foobar`;
11 |
12 | // correct node
13 | expect(el.nodeType).to.equal(3);
14 | expect(el.nodeValue).to.equal('foobar');
15 |
16 | // no extraneous side-effects
17 | expect(el.parentElement).to.be.null;
18 | });
19 |
20 | it('should create a single node', function() {
21 | var el = html``;
22 |
23 | // correct node
24 | expect(el.nodeName).to.equal('SPAN');
25 |
26 | // no extraneous side-effects
27 | expect(el.attributes.length, 'more than 1 attribute').to.equal(0);
28 | expect(el.children.length, 'more than 1 child').to.equal(0);
29 | expect(el.parentElement).to.be.null;
30 | expect(el.textContent).to.be.empty;
31 | });
32 |
33 | it('should create a single node when no closing tag is provided', function() {
34 | var el = html``;
35 |
36 | // correct node
37 | expect(el.nodeName).to.equal('SPAN');
38 |
39 | // no extraneous side-effects
40 | expect(el.attributes.length, 'more than 1 attribute').to.equal(0);
41 | expect(el.children.length, 'more than 1 child').to.equal(0);
42 | expect(el.parentElement).to.be.null;
43 | expect(el.textContent).to.be.empty;
44 | });
45 |
46 | it('should create a single node with attributes', function() {
47 | var el = html``;
48 |
49 | // correct node
50 | expect(el.nodeName).to.equal('INPUT');
51 |
52 | // correct attributes
53 | expect(el.attributes.length).to.equal(7);
54 | expect(el.type).to.equal('number');
55 | expect(el.min).to.equal('0');
56 | expect(el.max).to.equal('99');
57 | expect(el.name).to.equal('number');
58 | expect(el.id).to.equal('number');
59 | expect(el.className).to.equal('number-input');
60 | expect(el.disabled).to.equal(true);
61 |
62 | // no extraneous side-effects
63 | expect(el.children.length).to.equal(0);
64 | expect(el.parentElement).to.be.null;
65 | expect(el.textContent).to.be.empty;
66 | });
67 |
68 | it('should create a single node with children', function() {
69 | var el = html`Hello`;
70 |
71 | // correct container node
72 | expect(el.nodeName).to.equal('DIV');
73 | expect(el.attributes.length).to.equal(1);
74 | expect(el.className).to.equal('container');
75 | expect(el.children.length).to.equal(1);
76 | expect(el.parentElement).to.be.null;
77 | expect(el.textContent).to.equal('Hello');
78 |
79 | // correct row node
80 | var row = el.firstChild;
81 | expect(row.nodeName).to.equal('DIV');
82 | expect(row.attributes.length).to.equal(1);
83 | expect(row.className).to.equal('row');
84 | expect(row.children.length).to.equal(1);
85 | expect(row.parentElement).to.equal(el);
86 | expect(row.textContent).to.equal('Hello');
87 |
88 | // correct col node
89 | var col = row.firstChild;
90 | expect(col.nodeName).to.equal('DIV');
91 | expect(col.attributes.length).to.equal(1);
92 | expect(col.className).to.equal('col');
93 | expect(col.children.length).to.equal(1);
94 | expect(col.parentElement).to.equal(row);
95 | expect(col.textContent).to.equal('Hello');
96 |
97 | // correct leaf node
98 | var leaf = col.firstChild;
99 | expect(leaf.nodeName).to.equal('DIV');
100 | expect(leaf.attributes.length).to.equal(0);
101 | expect(leaf.children.length).to.equal(0);
102 | expect(leaf.parentElement).to.equal(col);
103 | expect(leaf.textContent).to.equal('Hello');
104 | });
105 |
106 | it('should create sibling nodes', function() {
107 | var nodes = html`Hello `;
89 |
90 | // correct heading node
91 | expect(el.nodeName).to.equal('H1');
92 | expect(el.attributes.length).to.equal(0);
93 | expect(el.children.length).to.equal(1);
94 | expect(el.parentElement).to.be.null;
95 | expect(el.textContent).to.equal('Hello');
96 |
97 | // correct span node
98 | var span = el.firstChild;
99 | expect(span.nodeName).to.equal('SPAN');
100 | expect(span.attributes.length, 'more than 1 attribute').to.equal(0);
101 | expect(span.children.length, 'more than 1 child').to.equal(0);
102 | expect(span.parentElement).to.equal(el);
103 | expect(span.textContent).to.equal('Hello');
104 | });
105 |
106 | it('should substitute in script tags', function() {
107 | var el = html``;
108 |
109 | // correct script node
110 | expect(el.nodeName).to.equal('SCRIPT');
111 | expect(el.attributes.length).to.equal(0);
112 | expect(el.children.length).to.equal(0);
113 | expect(el.parentElement).to.be.null;
114 | expect(el.textContent).to.equal('x = 99');
115 | });
116 |
117 | it('should allow optional attributes', function() {
118 | var el = html``;
119 |
120 | expect(el.hasAttribute('disabled')).to.be.true;
121 | expect(el.getAttribute('disabled')).to.equal('');
122 |
123 | var notDisabled = false;
124 | el = html``;
125 |
126 | expect(el.hasAttribute('disabled')).to.be.false;
127 | });
128 | });
--------------------------------------------------------------------------------
/test/xss.test.js:
--------------------------------------------------------------------------------
1 | var counter = 0;
2 |
3 | describe('XSS Attack Vectors', function() {
4 | // Modified XSS String
5 | // (Source: https://developers.google.com/closure/templates/docs/security#example)
6 | var xss = "javascript:/*/**/ /";
7 |
8 | afterEach(function() {
9 | counter++;
10 | });
11 |
12 | it('should prevent injection to element innerHTML', function() {
13 | var el = html`${xss}
`;
14 | document.body.appendChild(el);
15 | });
16 |
17 | it('should prevent injection to non-quoted element attributes', function() {
18 | var el = html``;
19 | document.body.appendChild(el);
20 | });
21 |
22 | it('should prevent injection to single quoted element attributes', function() {
23 | var el = html``;
24 | document.body.appendChild(el);
25 | });
26 |
27 | it('should prevent injection to double quoted element attributes', function() {
28 | var el = html``;
29 | document.body.appendChild(el);
30 | });
31 |
32 | it('should prevent injection as a javascript quoted string', function() {
33 | var el = html``;
34 | document.body.appendChild(el);
35 | });
36 |
37 | it('should prevent injection on one side of a javascript quoted expression', function() {
38 | var el = html``;
39 | document.body.appendChild(el);
40 | });
41 |
42 | it('should prevent injection into inlined quoted event handler', function() {
43 | var el = html`XSS <p> tag`;
44 | document.body.appendChild(el);
45 | el.click();
46 | });
47 |
48 | it('should prevent injection into quoted event handler', function() {
49 | var el = html`XSS <p> tag`;
50 | document.body.appendChild(el);
51 | el.click();
52 | });
53 |
54 | it('should prevent injection into CSS unquote property', function() {
55 | var el = html``;
56 | document.body.appendChild(el);
57 | });
58 |
59 | it('should prevent injection into CSS quoted property', function() {
60 | var el = html``;
61 | document.body.appendChild(el);
62 | });
63 |
64 | it('should prevent injection into CSS property of HTML style attribute', function() {
65 | var el = html``;
66 | document.body.appendChild(el);
67 | });
68 |
69 | it('should prevent injection into query params of HTML urls', function() {
70 | var el = html``;
71 | document.body.appendChild(el);
72 | el.click();
73 | });
74 |
75 | it('should prevent injection into HREF attribute of tag', function() {
76 | var el = html`XSS'ed Link`;
77 | document.body.appendChild(el);
78 | el.click();
79 | });
80 |
81 | it('should prevent against clobbering of /attributes/', function() {
82 | var el = html``;
86 | document.body.appendChild(el);
87 |
88 | // el.submit() does not trigger a submit event, so we need to click the submit button
89 | // @see http://stackoverflow.com/questions/11557994/jquery-submit-vs-javascript-submit
90 | el.querySelector('input[type="submit"]').click();
91 | });
92 |
93 | it('should prevent injection out of a tag name by throwing an error', function() {
94 | var func = function() {
95 | var el = html`