${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``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
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://travis-ci.org/straker/html-tagged-template)
2 | [](https://coveralls.io/github/straker/html-tagged-template?branch=master)
3 |
4 | # Proposal
5 |
6 | Improve the DOM creation API so developers have a cleaner, simpler interface to DOM creation and manipulation.
7 |
8 | ## Installing
9 |
10 | `npm install html-tagged-template`
11 |
12 | or with Bower
13 |
14 | `bower install html-tagged-template`
15 |
16 | ## Usage
17 |
18 | ```js
19 | let min = 0, max = 99, disabled = true;
20 |
21 | // returns an tag with all attributes set
22 | // the use of ?= denotes an optional attribute which will only be added if the
23 | // value is true
24 | let el = html``;
25 | document.body.appendChild(el);
26 |
27 | // returns a DocumentFragment with two elements as children
28 | let el = html`