@@ -95,7 +95,7 @@ h2#xss Preventing Cross-Site Scripting (XSS)
95
95
The template below binds the value of `htmlSnippet`, once by interpolating it into an element's
96
96
content, and once by binding it to the `innerHTML` property of an element.
97
97
98
- + makeExcerpt ('app/inner-html-binding.component.html' )
98
+ + makeExample ('app/inner-html-binding.component.html' )
99
99
100
100
:marked
101
101
Interpolated content is always escaped - the HTML is not interpreted, and the browser displays
@@ -104,7 +104,9 @@ h2#xss Preventing Cross-Site Scripting (XSS)
104
104
For the HTML to be interpreted, we must bind to an HTML property, such as `innerHTML`. But binding
105
105
a potentially attacker controlled value into `innerHTML` would normally cause an XSS
106
106
vulnerability. For example, code contained in a `<script>` tag would be executed.
107
- + makeExample('security/ts/app/inner-html-binding.component.ts' , 'inner-html-controller' )( format ="." )
107
+
108
+ + makeExcerpt('app/inner-html-binding.component.ts ()' , 'inner-html-controller' )
109
+
108
110
:marked
109
111
Angular recognizes the value as unsafe, and automatically sanitizes it. It removes the `<script>`
110
112
tag but keeps safe content, such as the text content of the `<script>` tag, or the `<b>` element.
@@ -139,7 +141,7 @@ figure.image-display
139
141
### Server side XSS protection
140
142
141
143
HTML constructed on the server is vulnerable to injection attacks. Injecting template code into an
142
- Angular application is the same as injecting executable code (e.g., JavaScript) into the
144
+ Angular application is the same as injecting executable code into the
143
145
application; it gives the attacker full control over the application. To prevent this, make sure
144
146
to use a templating language that automatically escapes values to prevent XSS vulnerabilities on
145
147
the server. Do not generate Angular templates on the server side using a templating language, this
@@ -168,15 +170,19 @@ h2#bypass-security-apis Trusting Safe Values
168
170
your intended use of the value. Imagine the following template needs to bind a URL to a
169
171
`javascript:alert(...)` call.
170
172
171
- + makeExample('security/ts/app/bypass-security.component.html' , 'dangerous-url' )( format ="." )
173
+ + makeExcerpt('app/bypass-security.component.html ()' , 'dangerous-url' )
174
+
172
175
:marked
173
- Normally, Angular would automatically sanitize the URL and disable the dangerous code. To prevent
176
+ Normally, Angular automatically sanitizes the URL, disables the dangerous code and,
177
+ in development mode, logs this action to the console. To prevent
174
178
this, we can mark the URL value as a trusted URL using the `bypassSecurityTrustUrl` call:
175
179
176
- + makeExample('security/ts/app/bypass-security.component.ts' , 'trust-url' )( format ="." )
180
+ + makeExcerpt('app/bypass-security.component.ts ()' , 'trust-url' )
181
+
177
182
figure.image-display
178
183
img( src ='/resources/images/devguide/security/bypass-security-component.png'
179
184
alt ='A screenshot showing an alert box created from a trusted URL' )
185
+
180
186
:marked
181
187
If we need to convert user input into a trusted value, it can be convenient to do so in a
182
188
controller method. The template below allows users to enter a YouTube video ID, and load the
@@ -185,8 +191,8 @@ figure.image-display
185
191
would execute. So we call a method on the controller to construct a trusted video URL, which
186
192
Angular then allows binding into `<iframe src>`.
187
193
188
- + makeExample( 'security/ts/ app/bypass-security.component.html' , 'iframe-videoid' ) ( format = "." )
189
- + makeExample( 'security/ts/ app/bypass-security.component.ts' , 'trust-video-url' ) ( format = "." )
194
+ + makeExcerpt( ' app/bypass-security.component.html () ' , 'iframe-videoid' )
195
+ + makeExcerpt( ' app/bypass-security.component.ts () ' , 'trust-video-url' )
190
196
191
197
.l-main-section
192
198
h2#http HTTP-level Vulnerabilities
0 commit comments