-
Notifications
You must be signed in to change notification settings - Fork 0
/
backticks.html
104 lines (91 loc) · 3.19 KB
/
backticks.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Backticks to Escape Attribute Values</title>
<style type="text/css">
.no {
color: black;
background: #cef;
}
.yes {
color: black;
background: #fdb;
}
td, th {
padding: 0.15em 0.3em;
}
</style>
</head>
<body>
<h1>Backticks to Escape Attribute Values</h1>
<p>If you browser supports using backticks to support
escaping attribute values,
the button below should trigger an alert dialog when clicked.
</p>
<button rel=button onclick=`alert( 'Yes,' + " Your browser supports backtick-escaped HTML element attribute values." ); return false;`>Click to Test</button>
<p>This looks like this: <code><button onclick=`alert( 'single quotes '+"and double quotes within the attribute value" );`> …</code></p>
<p>This has implications for XSS (cross-site scripting)
attacks and prevention. Not all XSS prevention/scrubbing/sanitization
libraries treat backticks specially, and many if not most
HTML-escape routines fail to escape backticks.
</p>
<p>My understanding of the HTML specification is that backticks
are not valid delimiters and should be treated like any other normal character
(meaning, not one of <code>< > " '</code>)
in an HTML document.
</p>
<p>For reference, the following button uses double quotes to do the same thing.</p>
<button rel=button onclick="alert("This button just uses normal, double-quote attribute delimiters." ); return false;">Click to Test</button>
<p>(This page has the HTML5 doctype.)</p>
<p><small>Available at <a href="https://dl.dropbox.com/u/105727/web/backticks.html">https://dl.dropbox.com/u/105727/web/backticks.html</a>,
now <a href="https://alanhogan.github.io/web-experiments/backticks.html">https://alanhogan.github.io/web-experiments/backticks.html</a>
</small></p>
<h3>Results</h3>
<table border="1" style="border-collapse: collapse;">
<tbody>
<tr>
<th scope=row>Chrome 10</th>
<td class="no">Backticks Not Supported</td>
</tr>
<tr>
<th scope=row>Firefox 3.6</th>
<td class="no" rowspan="2">Backticks Not Supported</td>
</tr>
<tr>
<th scope=row>Firefox 4</th>
</tr>
<tr>
<th scope=row>Internet Explorer 6</th>
<td class="yes" rowspan="4">Backticks Supported</td>
</tr>
<tr>
<th scope=row>Internet Explorer 7</th>
</tr>
<tr>
<th scope=row>Internet Explorer 8</th>
</tr>
<tr>
<th scope=row>Internet Explorer 9</th>
</tr>
<tr>
<th scope=row>Internet Explorer 10</th>
<td class="no" rowspan="2">Backticks Not Supported</td>
</tr>
<tr>
<th scope=row>Internet Explorer 11</th>
</tr>
<tr>
<th scope=row>Edge (<span title="Yes it is">It’s Notally Not IE™</span>)</th>
<td class="no">Backticks Not Supported</td>
</tr>
<tr>
<th scope=row>Opera 11</th>
<td class="no">Backticks Not Supported</td>
</tr>
</tbody>
</table>
<p><a href="https://alanhogan.com/contact?from=backticks.html">Contact the test author here.</a></p>
</body>
</html>