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.
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?
Problem -
<div [innerHTML]="UNTRUSTED"></div> OR <input value="UNTRUSTED">
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
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.
Example
–
export
const
BROWSER_SANITIZATION_PROVIDERS: Array<any>
= [
{provide: Sanitizer,
useExisting: DomSanitizer},
{provide: DomSanitizer,
useClass: DomSanitizerImpl},
];
@NgModule({
providers: [
BROWSER_SANITIZATION_PROVIDERS
...
],
exports: [CommonModule,
ApplicationModule]
})
export
class BrowserModule
{}
DOM sanitization - Use to clean untrusted parts
of values -
export
enum SecurityContext
{ NONE, HTML, STYLE, SCRIPT, URL, RESOURCE_URL }
export
abstract class
DomSanitizer implements
Sanitizer {
abstract sanitize(context:
SecurityContext, value:
SafeValue|string|null):
string|null;
abstract bypassSecurityTrustHtml(value: string): SafeHtml;
abstract bypassSecurityTrustStyle(value: string): SafeStyle;
abstract bypassSecurityTrustScript(value: string): SafeScript;
abstract bypassSecurityTrustUrl(value: string): SafeUrl;
abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl;
}
The DOM Sanitize Methods –
sanitize(ctx:
SecurityContext, value: SafeValue|string|null):
string|null
{
if (value
== null) return
null;
switch (ctx)
{
case SecurityContext.NONE:
return
value as
string;
case SecurityContext.HTML:
if (value
instanceof SafeHtmlImpl)
return value.changingThisBreaksApplicationSecurity;
this.checkNotSafeValue(value,
'HTML');
return sanitizeHtml(this._doc,
String(value));
case SecurityContext.STYLE:
if (value
instanceof SafeStyleImpl)
return value.changingThisBreaksApplicationSecurity;
this.checkNotSafeValue(value,
'Style');
return sanitizeStyle(value
as string);
case SecurityContext.SCRIPT:
if (value
instanceof SafeScriptImpl)
return value.changingThisBreaksApplicationSecurity;
this.checkNotSafeValue(value,
'Script');
throw new
Error('unsafe
value used in a script context');
case SecurityContext.URL:
if (value
instanceof SafeResourceUrlImpl
|| value instanceof
SafeUrlImpl) {
// Allow resource
URLs in URL contexts, they are strictly more trusted.
return
value.changingThisBreaksApplicationSecurity;
}
this.checkNotSafeValue(value,
'URL');
return sanitizeUrl(String(value));
case SecurityContext.RESOURCE_URL:
if (value
instanceof SafeResourceUrlImpl)
{
return
value.changingThisBreaksApplicationSecurity;
}
this.checkNotSafeValue(value,
'ResourceURL');
throw new
Error(
'unsafe value used
in a resource URL context (see http://g.co/ng/security#xss)');
default:
throw new
Error(`Unexpected
SecurityContext ${ctx}
(see http://g.co/ng/security#xss)`);
}
}