Angular Interview Question 161-170

161.   What are the best practices for security in angular?

     Below are the best practices of security in angular,

     1. Use the latest Angular library releases

     2. Don't modify your copy of Angular

     3. Avoid Angular APIs marked in the documentation as “Security Risk.”

      

162.   What is Angular security model for preventing XSS attacks?

     Angular treats all values as untrusted by default. i.e, Angular sanitizes and escapes untrusted values When a value is inserted into the DOM from a template, via property, attribute, style, class binding, or interpolation.

      

163.   What is the role of template compiler for prevention of XSS attacks?

     The offline template compiler prevents vulnerabilities caused by template injection, and greatly improves application performance. So it is recommended to use offline template compiler in production deployments without dynamically generating any template.

      

164.   What are the various security contexts in Angular?

     Angular defines the following security contexts for sanitization,

     1. **HTML:** It is used when interpreting a value as HTML such as binding to innerHtml.

     2. **Style:** It is used when binding CSS into the style property.

     3. **URL:** It is used for URL properties such as <a href>.

     4. **Resource URL:** It is a URL that will be loaded and executed as code such as <script src>.

      

165.   What is Sanitization? Is angular supports it?

     **Sanitization** is the inspection of an untrusted value, turning it into a value that's safe to insert into the DOM. Yes, Angular suppports sanitization. It sanitizes untrusted values for HTML, styles, and URLs but sanitizing resource URLs isn't possible because they contain arbitrary code.

      

166.   What is the purpose of innerHTML?

     The innerHtml is a property of HTML-Elements, which allows you to set it's html-content programatically. Let's display the below html code snippet in a <div> tag as below using innerHTML binding,

     ```html

     <div [innerHTML]="htmlSnippet"></div>

     ```

     and define the htmlSnippet property from any component

     ```javascript

     export class myComponent {

       htmlSnippet: string = '<b>Hello World</b>, Angular';

     }

     ```

     Unfortunately this property could cause Cross Site Scripting (XSS) security bugs when improperly handled.

      

167.   What is the difference between interpolated content and innerHTML?

     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,

     ```html

     <p>Interpolated value:</p>

     <div >{{htmlSnippet}}</div>

     <p>Binding of innerHTML:</p>

     <div [innerHTML]="htmlSnippet"></div>

     ```

     and the property defined in a component.

     ```javascript

     export class InnerHtmlBindingComponent {

       htmlSnippet = 'Template <script>alert("XSS Attack")</script> <b>Code attached</b>';

     }

     ```

     Even though innerHTML binding create a chance of XSS attack, Angular recognizes the value as unsafe and automatically sanitizes it.

      

168.   How do you prevent automatic sanitization?

     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,

     i. Inject DomSanitizer: You can inject DomSanitizer in component as parameter in constructor

     ii. Mark the trusted value by calling some of the below methods

     1. bypassSecurityTrustHtml

     2. bypassSecurityTrustScript

     3. bypassSecurityTrustStyle

     4. bypassSecurityTrustUrl

     5. bypassSecurityTrustResourceUrl

     For example,The  usage of dagerous url to trusted url would be as below,

     ```javascript

     constructor(private sanitizer: DomSanitizer) {

       this.dangerousUrl = 'javascript:alert("XSS attack")';

       this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl);

     ```

      

169.   Is safe to use direct DOM API methods in terms of security?

     No,the built-in browser DOM APIs or methods don't automatically protect you from security vulnerabilities. In this case it is recommended to use Angular templates instead of directly interacting with DOM. If it is unavoidable then use the built-in Angular sanitization functions.

      

170.   What is DOM sanitizer?

     DomSanitizer is used to help preventing Cross Site Scripting Security bugs (XSS) by sanitizing values to be safe to use in the different DOM contexts.