post-review updates
Also cleaned up `makeExample`s (changing most to `makeExcerpt`).
This commit is contained in:
parent
705d8c50fd
commit
7d50fa9302
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue