codeql/javascript/ql/src/Security/CWE-079/UnsafeJQueryPlugin.qhelp at c70997febfc4ea1f4e1ca7f4b11d58f2947892ee · github/codeql · GitHub

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
<!DOCTYPE qhelp PUBLIC
"-//Semmle//qhelp//EN"
"qhelp.dtd">
<qhelp>

	<overview>
		<p>

			Library plugins, such as those for the jQuery library, are often
			configurable through options provided by the clients of the
			plugin.

			Clients, however, do not know the implementation details of the
			plugin, so it is important to document the capabilities of each
			option.  Of particular importance is the documentation for the plugin
			options that the client is responsible for sanitizing.

			Otherwise, the plugin may write user input (for example, a URL query
			parameter) to a web page without properly sanitizing the input first,
			which allows for a cross-site scripting vulnerability in the client
			application through dynamic HTML construction.

		</p>
	</overview>

	<recommendation>
		<p>

			Document all options that can lead to cross-site scripting
			attacks, and guard against unsafe inputs where dynamic HTML
			construction is not intended.

		</p>
	</recommendation>

	<example>
		<p>

			The following example shows a jQuery plugin that selects a DOM
			element, and copies its text content another DOM element.  The
			selection is performed by using the plugin option
			<code>sourceSelector</code> as a CSS selector.

		</p>

		<sample src="examples/UnsafeJQueryPlugin.js" />

		<p>

			This is however not a safe plugin, since the call to
			<code>jQuery</code> interprets <code>sourceSelector</code> as HTML if
			it is a string that starts with <code>&lt;</code>.

		</p>

		<p>

			Instead of documenting that the client is responsible for
			sanitizing <code>sourceSelector</code>, the plugin can use
			<code>jQuery.find</code> to always interpret
			<code>sourceSelector</code> as a CSS selector:

		</p>

		<sample src="examples/UnsafeJQueryPlugin_safe.js" />


	</example>

	<references>
		<li>
			OWASP:
			<a href="https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet">DOM based
			XSS Prevention Cheat Sheet</a>.
		</li>
		<li>
			OWASP:
			<a href="https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet">XSS
			(Cross Site Scripting) Prevention Cheat Sheet</a>.
		</li>
		<li>
			OWASP
			<a href="https://www.owasp.org/index.php/DOM_Based_XSS">DOM Based XSS</a>.
		</li>
		<li>
			OWASP
			<a href="https://www.owasp.org/index.php/Types_of_Cross-Site_Scripting">Types of Cross-Site
			Scripting</a>.
		</li>
		<li>
			Wikipedia: <a href="http://en.wikipedia.org/wiki/Cross-site_scripting">Cross-site scripting</a>.
		</li>
		<li>
			jQuery: <a href="https://learn.jquery.com/plugins/basic-plugin-creation/">Plugin creation</a>.
		</li>
		<li>
			Bootstrap:	<a href="https://github.com/twbs/bootstrap/pull/27047">XSS vulnerable bootstrap plugins</a>.
		</li>
	</references>
</qhelp>