Skip to content

Commit fad74ed

Browse files
manthanankmanthanank
committed
chore: Update README.md with instructions for creating a new Angular project
1 parent 723446a commit fad74ed

File tree

1 file changed

+251
-0
lines changed

1 file changed

+251
-0
lines changed

‎README.md

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,26 @@ This repository contains a list of resources to learn Angular.
102102
- [Title Service](#title-service)
103103
- [Dynamic Title](#dynamic-title)
104104
- [Meta Service](#meta-service)
105+
- [Security](#security)
106+
- [Preventing cross-site scripting (XSS)](#preventing-cross-site-scripting-xss)
107+
- [Angular's cross-site scripting security model](#angulars-cross-site-scripting-security-model)
108+
- [Preventing cross-site scripting (XSS)](#preventing-cross-site-scripting-xss)
109+
- [Angular's cross-site scripting security model](#angulars-cross-site-scripting-security-model)
110+
- [Sanitization and security contexts](#sanitization-and-security-contexts)
111+
- [Sanitization example](#sanitization-example)
112+
- [Direct use of the DOM APIs and explicit sanitization calls](#direct-use-of-the-dom-apis-and-explicit-sanitization-calls)
113+
- [Trusting safe values](#trusting-safe-values)
114+
- [Content security policy](#content-security-policy)
115+
- [Enforcing Trusted Types](#enforcing-trusted-types)
116+
- [Use the AOT template compiler](#use-the-aot-template-compiler)
117+
- [Server-side XSS protection](#server-side-xss-protection)
118+
- [HTTP-level vulnerabilities](#http-level-vulnerabilities)
119+
- [Cross-site request forgery](#cross-site-request-forgery)
120+
- [HttpClient XSRF/CSRF security](#httpclient-xsrfcsrf-security)
121+
- [Configure custom cookie/header names](#configure-custom-cookieheader-names)
122+
- [Disabling XSRF protection](#disabling-xsrf-protection)
123+
- [Cross-site script inclusion (XSSI)](#cross-site-script-inclusion-xssi)
124+
- [Auditing Angular applications](#auditing-angular-applications)
105125
- [Standalone Components](#standalone-components)
106126
- [Angular Signals](#angular-signals)
107127
- [CLI Commands](#cli-commands)
@@ -4141,6 +4161,237 @@ this.metaService.removeTag("name='robots'");
41414161

41424162
[Back to top⤴️](#table-of-contents)
41434163

4164+
## Security
4165+
4166+
The security of an Angular application is a critical aspect that needs to be considered during development. Here are some best practices to enhance the security of your Angular application:
4167+
4168+
## Preventing cross-site scripting (XSS)
4169+
4170+
Cross-site scripting (XSS) is a security vulnerability that allows attackers to inject malicious scripts into web pages viewed by other users. To prevent XSS attacks in Angular applications, you can use the following best practices:
4171+
4172+
- Use Angular's built-in sanitization mechanisms to sanitize user input and prevent script injection.
4173+
- Avoid using unsafe methods like innerHTML and instead use Angular's data binding syntax to render dynamic content.
4174+
- Use Angular's built-in security features like Content Security Policy (CSP) to restrict the sources of scripts and other resources that can be loaded by your application.
4175+
- Enable strict mode in Angular templates to prevent template expressions from executing arbitrary code.
4176+
- Use Angular's HttpClient module to make HTTP requests and automatically sanitize responses to prevent XSS attacks.
4177+
4178+
## Angular's cross-site scripting security model
4179+
4180+
Angular provides a built-in security model to prevent cross-site scripting (XSS) attacks in applications. This security model includes the following features:
4181+
4182+
- Automatic sanitization of user input: Angular automatically sanitizes user input to prevent script injection and other security vulnerabilities.
4183+
- Strict mode in templates: Angular templates run in strict mode by default, which prevents template expressions from executing arbitrary code.
4184+
- Content Security Policy (CSP): Angular applications can use CSP to restrict the sources of scripts and other resources that can be loaded by the application.
4185+
- Trusted Types: Angular supports Trusted Types, a new web platform feature that helps prevent DOM-based XSS attacks by enforcing strict type checking on DOM APIs.
4186+
4187+
## Sanitization and security contexts
4188+
4189+
Angular provides a built-in sanitization mechanism to prevent cross-site scripting (XSS) attacks in applications. Sanitization is the process of cleaning user input to remove potentially dangerous content, such as script tags and event handlers. Angular uses security contexts to determine how to sanitize user input based on its intended use.
4190+
4191+
Angular provides the following security contexts for sanitization:
4192+
4193+
- HTML: Sanitizes user input for use in HTML contexts, such as rendering dynamic content in templates.
4194+
- Style: Sanitizes user input for use in CSS contexts, such as setting inline styles.
4195+
- Script: Sanitizes user input for use in script contexts, such as event handlers and script tags.
4196+
- URL: Sanitizes user input for use in URL contexts, such as setting href attributes.
4197+
- Resource URL: Sanitizes user input for use in resource URL contexts, such as loading external resources.
4198+
4199+
## Sanitization example
4200+
4201+
```typescript
4202+
import { Component } from '@angular/core';
4203+
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
4204+
4205+
@Component({
4206+
selector: 'app-root',
4207+
template: `<div [innerHTML]="safeHtml"></div>`
4208+
})
4209+
export class AppComponent {
4210+
safeHtml: SafeHtml;
4211+
4212+
constructor(private sanitizer: DomSanitizer) {
4213+
const untrustedHtml = '<img src=x onerror=alert(1)>';
4214+
this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(untrustedHtml);
4215+
}
4216+
}
4217+
```
4218+
4219+
## Direct use of the DOM APIs and explicit sanitization calls
4220+
4221+
Directly using the DOM APIs to manipulate the DOM can introduce security vulnerabilities in Angular applications. To prevent XSS attacks, avoid using unsafe methods like innerHTML and instead use Angular's built-in sanitization mechanisms to render dynamic content safely.
4222+
4223+
```typescript
4224+
import { Renderer2 } from '@angular/core';
4225+
4226+
constructor(private renderer: Renderer2, private sanitizer: DomSanitizer) { }
4227+
4228+
const div = this.renderer.createElement('div');
4229+
const unsafeContent = '<script>alert("XSS")</script>';
4230+
const sanitizedContent = this.sanitizer.sanitize(SecurityContext.HTML, unsafeContent);
4231+
this.renderer.setProperty(div, 'innerHTML', sanitizedContent);
4232+
document.body.appendChild(div);
4233+
```
4234+
4235+
## Trusting safe values
4236+
4237+
Angular provides a mechanism to trust safe values and bypass the built-in sanitization mechanisms when rendering trusted content. To trust a safe value, you can use the bypassSecurityTrustHtml, bypassSecurityTrustStyle, bypassSecurityTrustScript, bypassSecurityTrustUrl, and bypassSecurityTrustResourceUrl methods provided by the DomSanitizer service.
4238+
4239+
```typescript
4240+
const safeHtml = this.sanitizer.bypassSecurityTrustHtml('<b>Safe Content</b>');
4241+
```
4242+
4243+
## Content security policy
4244+
4245+
Content Security Policy (CSP) is a security feature that helps prevent cross-site scripting (XSS) attacks by restricting the sources of scripts and other resources that can be loaded by a web application. Angular applications can use CSP to define a policy that specifies which content is allowed to be loaded by the application.
4246+
4247+
To enable CSP in an Angular application, you can add a Content-Security-Policy header to the HTTP response from the server. The CSP header should include directives that restrict the sources of scripts, styles, images, fonts, and other resources that can be loaded by the application.
4248+
4249+
```typescript
4250+
Content-Security-Policy: default-src 'self'; script-src 'self' https://example.com; style-src 'self' https://example.com; img-src 'self' https://example.com; font-src 'self' https://example.com;
4251+
```
4252+
4253+
## Enforcing Trusted Types
4254+
4255+
Trusted Types is a new web platform feature that helps prevent DOM-based cross-site scripting (XSS) attacks by enforcing strict type checking on DOM APIs. Angular applications can use Trusted Types to ensure that only trusted values are passed to DOM APIs, preventing script injection and other security vulnerabilities.
4256+
4257+
To enable Trusted Types in an Angular application, you can configure the Trusted Types policy using the TrustedTypesConfig token provided by Angular. The policy can specify which types of values are considered trusted and enforce strict type checking on DOM APIs.
4258+
4259+
```typescript
4260+
import { InjectionToken } from '@angular/core';
4261+
4262+
export const TRUSTED_TYPES_CONFIG = new InjectionToken('TRUSTED_TYPES_CONFIG');
4263+
4264+
const trustedTypesConfig = {
4265+
createPolicy: (name, policy) => {
4266+
return policy;
4267+
}
4268+
};
4269+
```
4270+
4271+
```typescript
4272+
import { BrowserModule } from '@angular/platform-browser';
4273+
import { NgModule } from '@angular/core';
4274+
import { AppComponent } from './app.component';
4275+
import { TRUSTED_TYPES_CONFIG } from './trusted-types.config';
4276+
4277+
@NgModule({
4278+
declarations: [
4279+
AppComponent
4280+
],
4281+
imports: [
4282+
BrowserModule
4283+
],
4284+
providers: [
4285+
{ provide: TRUSTED_TYPES_CONFIG, useValue: trustedTypesConfig }
4286+
],
4287+
bootstrap: [AppComponent]
4288+
})
4289+
export class AppModule { }
4290+
```
4291+
4292+
## Use the AOT template compiler
4293+
4294+
The Angular Ahead-of-Time (AOT) template compiler compiles Angular templates at build time, which helps prevent cross-site scripting (XSS) attacks by statically analyzing the templates and generating optimized code. AOT compilation eliminates the need for the browser to compile templates at runtime, reducing the risk of template injection vulnerabilities.
4295+
4296+
To enable AOT compilation in an Angular application, you can use the ngc command to compile the application ahead of time. AOT compilation is recommended for production builds to improve performance, security, and compatibility with Content Security Policy (CSP) restrictions.
4297+
4298+
```bash
4299+
ng build --aot
4300+
```
4301+
4302+
## Server-side XSS protection
4303+
4304+
Server-side XSS protection is a security feature that helps prevent cross-site scripting (XSS) attacks by validating and sanitizing user input on the server before rendering it in the browser. To protect against XSS attacks, you can implement server-side input validation and sanitization to ensure that user input is safe and does not contain malicious content.
4305+
4306+
## HTTP-level vulnerabilities
4307+
4308+
Angular applications can be vulnerable to various HTTP-level attacks, such as cross-site request forgery (CSRF), cross-site scripting (XSS), and cross-site script inclusion (XSSI). To protect against these vulnerabilities, you can use Angular's built-in security features, such as HttpClient XSRF/CSRF protection, custom cookie/header names, and disabling XSRF protection.
4309+
4310+
## Cross-site request forgery
4311+
4312+
Cross-site request forgery (CSRF) is a security vulnerability that allows attackers to execute unauthorized actions on behalf of authenticated users. To prevent CSRF attacks in Angular applications, you can use Angular's built-in XSRF/CSRF protection mechanism to add a token to HTTP requests and validate it on the server.
4313+
4314+
```typescript
4315+
import { HttpClientModule } from '@angular/common/http';
4316+
import { HttpClientXsrfModule } from '@angular/common/http';
4317+
4318+
@NgModule({
4319+
imports: [
4320+
HttpClientModule,
4321+
HttpClientXsrfModule.withOptions({
4322+
cookieName: 'XSRF-TOKEN',
4323+
headerName: 'X-XSRF-TOKEN'
4324+
})
4325+
]
4326+
})
4327+
4328+
export class AppModule { }
4329+
```
4330+
4331+
## HttpClient XSRF/CSRF security
4332+
4333+
Angular's HttpClient module provides built-in support for cross-site request forgery (CSRF) protection using the XSRF/CSRF token mechanism. The HttpClientXsrfModule.withOptions method allows you to configure custom cookie and header names for the XSRF/CSRF token.
4334+
4335+
```typescript
4336+
import { HttpClientModule } from '@angular/common/http';
4337+
import { HttpClientXsrfModule } from '@angular/common/http';
4338+
4339+
@NgModule({
4340+
imports: [
4341+
HttpClientModule,
4342+
HttpClientXsrfModule.withOptions({
4343+
cookieName: 'XSRF-TOKEN',
4344+
headerName: 'X-XSRF-TOKEN'
4345+
})
4346+
]
4347+
})
4348+
4349+
export class AppModule { }
4350+
```
4351+
4352+
## Configure custom cookie/header names
4353+
4354+
Angular's HttpClient module allows you to configure custom cookie and header names for the XSRF/CSRF token using the HttpClientXsrfModule.withOptions method. By specifying custom names for the XSRF/CSRF token, you can enhance the security of your application and prevent CSRF attacks.
4355+
4356+
```typescript
4357+
import { HttpClientModule } from '@angular/common/http';
4358+
import { HttpClientXsrfModule } from '@angular/common/http';
4359+
4360+
@NgModule({
4361+
imports: [
4362+
HttpClientModule,
4363+
HttpClientXsrfModule.withOptions({
4364+
cookieName: 'XSRF-TOKEN',
4365+
headerName: 'X-XSRF-TOKEN'
4366+
})
4367+
]
4368+
})
4369+
4370+
export class AppModule { }
4371+
```
4372+
4373+
## Disabling XSRF protection
4374+
4375+
Angular's HttpClient module provides built-in support for cross-site request forgery (CSRF) protection using the XSRF/CSRF token mechanism. If you want to disable XSRF protection for specific requests, you can use the { withCredentials: true } option in the HttpClient request.
4376+
4377+
```typescript
4378+
import { HttpClient } from '@angular/common/http';
4379+
4380+
constructor(private http: HttpClient) { }
4381+
4382+
this.http.get('/api/data', { withCredentials: true });
4383+
```
4384+
4385+
## Cross-site script inclusion (XSSI)
4386+
4387+
Cross-site script inclusion (XSSI) is a security vulnerability that allows attackers to include external scripts in an application and execute malicious code. To prevent XSSI attacks in Angular applications, you can use Angular's built-in security features, such as HttpClient XSSI protection, to validate and sanitize external script responses.
4388+
4389+
## Auditing Angular applications
4390+
4391+
Auditing Angular applications is an essential step to identify and fix security vulnerabilities in the codebase. You can use various tools and techniques to audit Angular applications, such as security scanners, code reviews, penetration testing, and security best practices.
4392+
4393+
[Back to top⤴️](#table-of-contents)
4394+
41444395
## Standalone Components
41454396

41464397
A standalone component is a type of component which is not part of any Angular module. It provides a simplified way to build Angular applications.

0 commit comments

Comments
 (0)