Skip to content

Commit f7356b1

Browse files
committed
Add prevention of automatic sanitization
1 parent e0990a4 commit f7356b1

File tree

1 file changed

+34
-5
lines changed

1 file changed

+34
-5
lines changed

README.md

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -172,8 +172,8 @@
172172
|164| [What are the various security contexts in Angular?](#what-are-the-various-security-contexts-in-Angular)|
173173
|165| [What is Sanitization? Is angular supports it?](#what-is-sanitization?Is-angular-supports-it)|
174174
|166| [What is the purpose of innerHTML?](#what-is-the-purpose-of-innerhtml)|
175-
|167| [](#)|
176-
|168| [](#)|
175+
|167| [What is the difference between interpolated content and innerHTML?](#what-is-the-difference-between-interpolated-content-and-innerhtml)|
176+
|168| [How do you prevent automatic sanitization?](#how-do-you-prevent-automatic-sanitization)|
177177
|169| [](#)|
178178
|170| [](#)|
179179

@@ -2539,11 +2539,40 @@
25392539
25402540
**[⬆ Back to Top](#table-of-contents)**
25412541
2542-
167. ### ?
2543-
2542+
167. ### What is the difference between interpolated content and innerHTML?
2543+
The main difference between interpolated and innerHTML code is the behavior of code interpreted. Interpolated content is always escaped i.e, HTML isn't interpreted and the browser displays angle brackets in the element's text content. Where as in innerHTML binding, the content is interpreted i.e, the browser will convert < and > characters as HTMLEntities. For example, the usage in template would be as below,
2544+
```html
2545+
<p>Interpolated value:</p>
2546+
<div >{{htmlSnippet}}</div>
2547+
<p>Binding of innerHTML:</p>
2548+
<div [innerHTML]="htmlSnippet"></div>
2549+
```
2550+
and the property defined in a component.
2551+
```javascript
2552+
export class InnerHtmlBindingComponent {
2553+
htmlSnippet = 'Template <script>alert("XSS Attack")</script> <b>Code attached</b>';
2554+
}
2555+
```
2556+
Even though innerHTML binding create a chance of XSS attack, Angular recognizes the value as unsafe and automatically sanitizes it.
25442557
**[⬆ Back to Top](#table-of-contents)**
25452558
2546-
168. ### ?
2559+
168. ### How do you prevent automatic sanitization?
2560+
Sometimes the applications genuinely need to include executable code such as displaying <iframe> from an URL. In this case, you need to prevent automatic sanitization in Angular by saying that you inspected a value, checked how it was generated, and made sure it will always be secure. Basically it involves 2 steps,
2561+
i. Inject DomSanitizer: You can inject DomSanitizer in component as parameter in constructor
2562+
ii. Mark the trusted value by calling some of the below methods
2563+
2564+
1. bypassSecurityTrustHtml
2565+
2. bypassSecurityTrustScript
2566+
3. bypassSecurityTrustStyle
2567+
4. bypassSecurityTrustUrl
2568+
5. bypassSecurityTrustResourceUrl
2569+
2570+
For example,The usage of dagerous url to trusted url would be as below,
2571+
```javascript
2572+
constructor(private sanitizer: DomSanitizer) {
2573+
this.dangerousUrl = 'javascript:alert("XSS attack")';
2574+
this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl);
2575+
```
25472576
25482577
**[⬆ Back to Top](#table-of-contents)**
25492578

0 commit comments

Comments
 (0)