Angular 4 handle XSS CSRF Attacks

How To Handle XSS or CSRF Attacks in Angular 4 ?

How does Angular 4 handle with XSS or CSRF Attacks?
A Cross-Site Scripting (XSS) attack is a type of injection that can be carried out to users understanding of a website. The attackers inject to client-side scripts into web pages which are viewed by users.
Attacker access to the user’s cookies, session Ids, passwords and other private data and this XSS attacks are affect your website. The XSS attacks are common in web browsers.

Stayed Informed Angular 4 docs and Angular 5 docs

How can XSS be done in an Angular application?

There are some ways to do attack in an Angular application.
HTML 
Attributes – 
<div [innerHTML]="UNTRUSTED"></div> 
OR <input value="UNTRUSTED">

Style<div [style]="height:UNTRUSTED"></div>

URL <a [href]="UNTRUSTED-URL"></a> 
OR <script [src]="UNTRUSTED-URL"></script> 
OR <iframe src="UNTRUSTED-URL" />

GET Parameter<a href="/user?id=UNTRUSTED">link</a>

JavaScript Variable<script> var value='UNTRUSTED';</script>

How can we fix it?
HTML Attributes -
Problem -
<div [innerHTML]="UNTRUSTED"></div> 
OR <input value="UNTRUSTED">
Solution - Convert to HTML entities

Style -
Problem -
<div [style]="height:UNTRUSTED"></div>

Solution -CSS hex encode the value.

URL -
Problem -
<a [href]="UNTRUSTED-URL"></a>
OR <script [src]="UNTRUSTED-URL"></script> 
OR <iframe src="UNTRUSTED-URL" />

Solution - Prevent JavaScript from running by using a protocol handler.

GET Parameter –
Problem -
<a href="/users?id=UNTRUSTED">link</a>

Solution - URL encodes the user data and prevents the use of ampersand as it may lead to parameter pollution issues.

JavaScript Variable –
Problem -
<script>var value='UNTRUSTED';</script>

Solution - Quote around variable and hex encode. Prevent line breaks.

How Angular Apps Prevent this Attack?
To block Cross-Site-Scripting attacks, we must prevent the malicious code from application DOM.

When a value is inserted into the DOM from a template using the property, style, class binding, attribute, or interpolation, Angular sanitizes and escapes untrusted values.

Example –
@NgModule({
  providers: [
    BROWSER_SANITIZATION_PROVIDERS
    ...
  ],
  exports: [CommonModule, ApplicationModule]
})

I hope you are enjoying with this post! Please share with you friends. Thank you so much!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.