Scribd
Upload
4 views

Security features comparison - Angular-React

The document outlines key security features for web applications, including input validation, XSS and CSRF protection, HTTP request/response protection, Content Security Policy, and dependency protection. It highlights built-in security measures provided by Angular and React, such as input validation, automatic token generation for CSRF, and dependency injection to enhance security. Best practices for authentication and authorization are also discussed, emphasizing the importance of managing dependencies securely to minimize vulnerabilities.

Uploaded by

liam.xmachina
Copyright
© © All Rights Reserved
Available Formats
Download as XLSX, PDF, TXT or read online on Scribd
4 views

Security features comparison - Angular-React

The document outlines key security features for web applications, including input validation, XSS and CSRF protection, HTTP request/response protection, Content Security Policy, and dependency protection. It highlights built-in security measures provided by Angular and React, such as input validation, automatic token generation for CSRF, and dependency injection to enhance security. Best practices for authentication and authorization are also discussed, emphasizing the importance of managing dependencies securely to minimize vulnerabilities.

Uploaded by

liam.xmachina
Copyright
© © All Rights Reserved
Available Formats
Download as XLSX, PDF, TXT or read online on Scribd
You are on page 1/ 6

# Key security features

Input Validation
How do we prevent attacks that exploit input
validation vulnerabilities to inject malicious
code or data into the application?

Cross-Site Scripting (XSS) Protection


How do we prevent attacks that won't accept
2 malicious client-side scripts to a user's web
browser for execution?

Cross-Site Request Forgery (CSRF) Protection


How do we prevent attack where a malicious
website tricks a user's browser into sending an
authorized HTTP request to a website that the
3 user is already authenticated with?

HTTP Request/Response Protection


What additional security measures can be used
when communicating with backend API services
to increase protection?

4
Content Security Policy (CSP)
What additional security measures are needed
to implement security standards/policies that
help in preventing code injection attacks and
other cross-site scripting (XSS) attacks?

Dependency Protection
What additional security mechanism help
ensure that all dependencies are resolved
appropriately and securely, avoiding risks that
can be introduced by manually managing
dependencies?

Authentication & Authorization

Security Reference
Angular
It has built-in input validation that verifies user input on the client
side before sending it to the server using reactive forms or
template-driven forms.

Use:
import { ReactiveFormsModule } from '@angular/forms';

-or-

import { FormsModule } from '@angular/forms';

It offers built-in XSS security by automatically escaping untrusted


input and sanitizing user input before rendering it in the DOM.

It provides built-in CSRF prevention by automatically creating a


unique/distinct token for each request and validating it on the
server side.

Use:
import {HttpClientXsrfModule} from
'@angular/common/http'

It provides built-in HTTP interceptors that can be used to


intercept and modify both incoming and outgoing HTTP requests
and responses. With this, security mechanisms like adding custom
headers, token authentication, or request throttling can be put
into place.

Use:
import {
HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} from '@angular/common/http';
It provides buit-in support for Content Security Policy (CSP),
allowing developers to specify a policy that limits the sources of
content that an application may load.

1. Enable CSP:
<meta http-equip="content-security-policy" content="default-
src 'self ...'">

2. Adding CSP Headers:


import { HttpHeaders } from '@angular/common/http';

const headers = new HttpHeaders({


'Content-Security-Policy': "default-src 'self'"
});

By ensuring that all dependencies are handled correctly and


securely, Angular's Dependency Injection(DI) system works to
avoid vulnerabilities from being introduced by manually managing
dependencies.

Use:
filename: data.service.ts
import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root';
});

export class DataService {


...

The @Injectable() decorator indicate that this service can be


injected into other components.

Angular provides buit-in support for authentication and


authorization through its router module, which can be used to
control access to different parts of the application based on user
roles and permissions.

See:
Angular Router Module

Angular Security Best Practices


React

Can use React's own 'dangerouslySetInnerHTML'


feature or third-party libraries such as DOMPurify.

Can use third-party libraries such as 'axios' or 'fetch'


to intercept and modify outgoing and incoming HTTP
requests and responses.

See:
https://github.com/axios/axios
Benefits of Dependency Injection
1. Modularization - assist your application's attack surface be smaller. You may lessen the
effects of any possible security flaws by segmenting your code into smaller, more focused
modules.

2. Encapsulation - DI helps to enforce encapsulation, which means that components can only
access services and other dependencies that are explicitly injected into them. The possibility of
code injection attacks is decreased.

3. Centralized Configuration - DI allows you to manage and update your dependencies more
easily over time by centralizing the setup of all of your application's dependencies in one
location.

You might also like