honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

post-review updates

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
public/docs/ts/latest/guide/security.jade
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 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. 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 :marked
Interpolated content is always escaped - the HTML is not interpreted, and the browser displays 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 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 a potentially attacker controlled value into `innerHTML` would normally cause an XSS
vulnerability. For example, code contained in a `<script>` tag would be executed. 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 :marked
Angular recognizes the value as unsafe, and automatically sanitizes it. It removes the `<script>` 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. 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 ### Server side XSS protection
HTML constructed on the server is vulnerable to injection attacks. Injecting template code into an 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 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 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 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 your intended use of the value. Imagine the following template needs to bind a URL to a
`javascript:alert(...)` call. `javascript:alert(...)` call.
+makeExample('security/ts/app/bypass-security.component.html', 'dangerous-url')(format=".") +makeExcerpt('app/bypass-security.component.html ()', 'dangerous-url')
:marked :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: 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 figure.image-display
img(src='/resources/images/devguide/security/bypass-security-component.png' img(src='/resources/images/devguide/security/bypass-security-component.png'
alt='A screenshot showing an alert box created from a trusted URL') alt='A screenshot showing an alert box created from a trusted URL')
:marked :marked
If we need to convert user input into a trusted value, it can be convenient to do so in a 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 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 would execute. So we call a method on the controller to construct a trusted video URL, which
Angular then allows binding into `<iframe src>`. Angular then allows binding into `<iframe src>`.
+makeExample('security/ts/app/bypass-security.component.html', 'iframe-videoid')(format=".") +makeExcerpt('app/bypass-security.component.html ()', 'iframe-videoid')
+makeExample('security/ts/app/bypass-security.component.ts', 'trust-video-url')(format=".") +makeExcerpt('app/bypass-security.component.ts ()', 'trust-video-url')
.l-main-section .l-main-section
h2#http HTTP-level Vulnerabilities h2#http HTTP-level Vulnerabilities