post-review updates

Also cleaned up `makeExample`s (changing most to `makeExcerpt`).
This commit is contained in:
Patrice Chalin 2016-06-30 09:35:06 -07:00 committed by Naomi Black
parent 705d8c50fd
commit 7d50fa9302
1 changed files with 14 additions and 8 deletions

View File

@ -95,7 +95,7 @@ h2#xss Preventing Cross-Site Scripting (XSS)
The template below binds the value of `htmlSnippet`, once by interpolating it into an element's
content, and once by binding it to the `innerHTML` property of an element.
+makeExcerpt('app/inner-html-binding.component.html')
+makeExample('app/inner-html-binding.component.html')
:marked
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)
For the HTML to be interpreted, we must bind to an HTML property, such as `innerHTML`. But binding
a potentially attacker controlled value into `innerHTML` would normally cause an XSS
vulnerability. For example, code contained in a `<script>` tag would be executed.
+makeExample('security/ts/app/inner-html-binding.component.ts', 'inner-html-controller')(format=".")
+makeExcerpt('app/inner-html-binding.component.ts ()', 'inner-html-controller')
:marked
Angular recognizes the value as unsafe, and automatically sanitizes it. It removes the `<script>`
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
### Server side XSS protection
HTML constructed on the server is vulnerable to injection attacks. Injecting template code into an
Angular application is the same as injecting executable code (e.g., JavaScript) into the
Angular application is the same as injecting executable code into the
application; it gives the attacker full control over the application. To prevent this, make sure
to use a templating language that automatically escapes values to prevent XSS vulnerabilities on
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
your intended use of the value. Imagine the following template needs to bind a URL to a
`javascript:alert(...)` call.
+makeExample('security/ts/app/bypass-security.component.html', 'dangerous-url')(format=".")
+makeExcerpt('app/bypass-security.component.html ()', 'dangerous-url')
:marked
Normally, Angular would automatically sanitize the URL and disable the dangerous code. To prevent
Normally, Angular automatically sanitizes the URL, disables the dangerous code and,
in development mode, logs this action to the console. To prevent
this, we can mark the URL value as a trusted URL using the `bypassSecurityTrustUrl` call:
+makeExample('security/ts/app/bypass-security.component.ts', 'trust-url')(format=".")
+makeExcerpt('app/bypass-security.component.ts ()', 'trust-url')
figure.image-display
img(src='/resources/images/devguide/security/bypass-security-component.png'
alt='A screenshot showing an alert box created from a trusted URL')
:marked
If we need to convert user input into a trusted value, it can be convenient to do so in a
controller method. The template below allows users to enter a YouTube video ID, and load the
@ -185,8 +191,8 @@ figure.image-display
would execute. So we call a method on the controller to construct a trusted video URL, which
Angular then allows binding into `<iframe src>`.
+makeExample('security/ts/app/bypass-security.component.html', 'iframe-videoid')(format=".")
+makeExample('security/ts/app/bypass-security.component.ts', 'trust-video-url')(format=".")
+makeExcerpt('app/bypass-security.component.html ()', 'iframe-videoid')
+makeExcerpt('app/bypass-security.component.ts ()', 'trust-video-url')
.l-main-section
h2#http HTTP-level Vulnerabilities