@@ -95,7 +95,7 @@ h2#xss Preventing Cross-Site Scripting (XSS)
9595 The template below binds the value of `htmlSnippet`, once by interpolating it into an element's
9696 content, and once by binding it to the `innerHTML` property of an element.
9797
98- + makeExcerpt ('app/inner-html-binding.component.html' )
98+ + makeExample ('app/inner-html-binding.component.html' )
9999
100100:marked
101101 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)
104104 For the HTML to be interpreted, we must bind to an HTML property, such as `innerHTML`. But binding
105105 a potentially attacker controlled value into `innerHTML` would normally cause an XSS
106106 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+
108110:marked
109111 Angular recognizes the value as unsafe, and automatically sanitizes it. It removes the `<script>`
110112 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
139141 ### Server side XSS protection
140142
141143 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
143145 application; it gives the attacker full control over the application. To prevent this, make sure
144146 to use a templating language that automatically escapes values to prevent XSS vulnerabilities on
145147 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
168170 your intended use of the value. Imagine the following template needs to bind a URL to a
169171 `javascript:alert(...)` call.
170172
171- + makeExample('security/ts/app/bypass-security.component.html' , 'dangerous-url' )( format ="." )
173+ + makeExcerpt('app/bypass-security.component.html ()' , 'dangerous-url' )
174+
172175: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
174178 this, we can mark the URL value as a trusted URL using the `bypassSecurityTrustUrl` call:
175179
176- + makeExample('security/ts/app/bypass-security.component.ts' , 'trust-url' )( format ="." )
180+ + makeExcerpt('app/bypass-security.component.ts ()' , 'trust-url' )
181+
177182figure.image-display
178183 img( src ='/resources/images/devguide/security/bypass-security-component.png'
179184 alt ='A screenshot showing an alert box created from a trusted URL' )
185+
180186:marked
181187 If we need to convert user input into a trusted value, it can be convenient to do so in a
182188 controller method. The template below allows users to enter a YouTube video ID, and load the
@@ -185,8 +191,8 @@ figure.image-display
185191 would execute. So we call a method on the controller to construct a trusted video URL, which
186192 Angular then allows binding into `<iframe src>`.
187193
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' )
190196
191197.l-main-section
192198h2#http HTTP-level Vulnerabilities
0 commit comments