What
Is Cross Site Scripting (XSS) Attack?
The Cross Site Scripting (XSS) attack is a type
of injection and attackers inject your web applications using the client side
scripts and malicious code into web pages.
An attacker can insert vulnerability scripts and
malicious code in your web applications.
The Cross Site Scripting (XSS) attacks are common
on web browsers and it carried out on websites around 84% (approximately).
How
To Preventing Cross Site Scripting (XSS) in Angular?
How Angular Protects Us
From XSS Attacks?
The Cross Site Scripting (XSS) attack is a type
of injection and attackers inject your web applications using the client side
scripts and malicious code into web pages.
An attacker can insert vulnerability scripts and
malicious code in your web applications.
The Angular treats all values as untrusted by
default. This is the great advantages of Angular.
When a value is Inserted Vulnerability into the
DOM from –
1. A
Template
2. Property
3. Attribute
4. Style
5. Class
Binding
6. Interpolation
7. And
so on.
Angular recognizes the value as unsafe and
automatically sanitizes and removes the script
tag and other security
vulnerabilities.
Angular provides built-in, values as untrusted by default, anti XSS and CSRF/XSRF protection.
The CookieXSRFStrategy
class takes care of preventing XSS and CSRF/XSRF attacks.
The DomSanitizationService
takes care of removing the dangerous bits in order to prevent XSS attacks.
Angular
applications must follow the same security principles as regular web
applications -
1. You
should avoid direct use of the DOM APIs.
2. You
should enable Content Security Policy (CSP) and configure your web server to
return appropriate CSP HTTP headers.
3. You
should Use the offline template compiler.
4. You
should Use Server Side XSS protection.
5. You
should Use DOM Sanitizer.
6. You
should Preventing CSRF or XSRF attacks.
Angular
defines the following security -
HTML is used when interpreting a value as HTML
i.e.
<div
[innerHTML]="UNTRUSTED"></div>
OR
<input
value="UNTRUSTED">
Style is used when binding CSS into the style
property i.e.
<div
[style]="height:UNTRUSTED"></div>
URL is used for URL properties i.e.
<a
[href]="UNTRUSTED-URL"></a>
OR
<script
[src]="UNTRUSTED-URL"></script>
OR
<iframe
src="UNTRUSTED-URL"
/>
Resource URL is a URL that will be loaded and
executed i.e.
<script>var
value='UNTRUSTED';</script>
<p
class="e2e-inner-html-interpolated">{{htmlSnippet}}</p>
<p
class="e2e-inner-html-bound"
[innerHTML]="htmlSnippet"></p>
I hope you are enjoying with this post! Please share with you friends. Thank you so much!