|
172 | 172 | |164| [What are the various security contexts in Angular?](#what-are-the-various-security-contexts-in-Angular)|
|
173 | 173 | |165| [What is Sanitization? Is angular supports it?](#what-is-sanitization?Is-angular-supports-it)|
|
174 | 174 | |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)| |
177 | 177 | |169| [](#)|
|
178 | 178 | |170| [](#)|
|
179 | 179 |
|
|
2539 | 2539 |
|
2540 | 2540 | **[⬆ Back to Top](#table-of-contents)**
|
2541 | 2541 |
|
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. |
2544 | 2557 | **[⬆ Back to Top](#table-of-contents)**
|
2545 | 2558 |
|
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 | + ``` |
2547 | 2576 |
|
2548 | 2577 | **[⬆ Back to Top](#table-of-contents)**
|
2549 | 2578 |
|
|
0 commit comments