Compression and security headers in NestJS - Step-by-Step Execution

Concept Flow - Compression and security headers

Start NestJS app

↓

Apply Compression Middleware

↓

Apply Security Headers Middleware

↓

Handle Incoming Requests

↓

Compress Response Data

↓

Add Security Headers to Response

↓

Send Response to Client

↓

End

The app starts, applies compression and security headers middleware, then processes requests by compressing responses and adding security headers before sending back to clients.

Execution Sample

NestJS

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as compression from 'compression';
import * as helmet from 'helmet';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.use(compression());
  app.use(helmet());
  await app.listen(3000);
}
bootstrap();

This code sets up a NestJS app that compresses responses and adds security headers to every HTTP response.

Execution Table

Step	Action	Middleware Applied	Response Effect	Client Receives
1	Start app	None	No compression or security headers	Raw response data
2	Apply compression middleware	compression()	Response data will be compressed	Compressed response data
3	Apply security headers middleware	helmet()	Security headers added to response	Response with security headers
4	Handle request	compression(), helmet()	Response compressed and secured	Compressed response with security headers
5	Send response	compression(), helmet()	Final response sent	Compressed and secure response
6	End	N/A	N/A	N/A

💡 App listens on port 3000, ready to compress and secure all responses

Variable Tracker

Variable	Start	After compression()	After helmet()	Final
app.middleware	[]	[compression()]	[compression(), helmet()]	[compression(), helmet()]
response.headers	{}	{'Content-Encoding': 'gzip'}	{'Content-Encoding': 'gzip', 'Security-Headers': 'set'}	{'Content-Encoding': 'gzip', 'Security-Headers': 'set'}
response.body	raw data	compressed data	compressed data	compressed data

Key Moments - 3 Insights

Why do we apply compression before security headers middleware?

Compression middleware modifies the response body to compress it, so it must run before security headers middleware which adds headers. This order ensures headers are added to the final compressed response as shown in steps 2 and 3 of the execution_table.

What happens if we don't use compression middleware?

Without compression middleware (step 2), responses are sent uncompressed (step 1), which can be slower to transfer. The execution_table shows raw response data sent without compression.

How do security headers protect the app?

Security headers added by helmet() (step 3) instruct browsers to improve security, like preventing cross-site scripting or clickjacking. The execution_table shows these headers added before sending the response.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what middleware is applied?

A compression() and helmet()

B Only compression()

C Only helmet()

D No middleware

💡 Hint

Check the 'Middleware Applied' column at step 3 in the execution_table

At which step does the response start being compressed?

A Step 1

B Step 2

C Step 4

D Step 5

💡 Hint

Look at the 'Response Effect' column in the execution_table to see when compression starts

If we remove helmet(), what changes in the response headers?

A No security headers added

B No 'Content-Encoding' header

C Response body is not compressed

D App will not start

💡 Hint

Check the 'response.headers' row in variable_tracker after applying helmet()

Concept Snapshot

NestJS Compression and Security Headers:
- Use compression() middleware to gzip responses
- Use helmet() middleware to add security headers
- Apply compression before helmet for correct header addition
- Both middlewares improve performance and security
- Add with app.use() before app.listen()

Full Transcript

This visual execution shows how a NestJS app applies compression and security headers middleware. First, the app starts with no middleware. Then compression middleware is added, which compresses response data. Next, helmet middleware adds security headers to the response. When handling requests, the app compresses the response body and adds security headers before sending it to the client. Variables like middleware list and response headers update step-by-step. Key points include the order of middleware application and the effect on response headers and body. The quizzes test understanding of middleware order, compression start, and security header presence.

Practice

1. What is the main purpose of using compression middleware in a NestJS application?

easy

A. To reduce the size of response data sent to clients

B. To add security headers to HTTP responses

C. To log incoming requests for debugging

D. To handle database connections efficiently

Solution

1. Step 1: Understand what compression middleware does

   The compression middleware compresses HTTP response bodies to reduce their size.

2. Step 2: Identify the effect on client-server communication

   Smaller response sizes mean faster data transfer and improved app speed.

3. Final Answer:

   To reduce the size of response data sent to clients -> Option A

4. Quick Check:

   Compression = smaller response size [OK]

Hint: Compression shrinks data sent to users for speed [OK]

Common Mistakes:

• Confusing compression with security features
• Thinking compression logs requests
• Assuming compression manages databases

2. Which of the following is the correct way to apply helmet middleware in a NestJS main.ts file?

easy

A. app.apply(helmet);

B. app.helmet();

C. helmet(app);

D. app.use(helmet());

Solution

1. Step 1: Recall the NestJS middleware usage pattern

   Middleware is applied using app.use() with the middleware function as argument.

2. Step 2: Check the syntax for helmet middleware

   The correct syntax is app.use(helmet()); to apply helmet with default settings.

3. Final Answer:

   app.use(helmet()); -> Option D

4. Quick Check:

   Middleware applied with app.use() [OK]

Hint: Use app.use() to add middleware like helmet [OK]

Common Mistakes:

• Calling helmet as a method on app
• Passing app as argument to helmet
• Using app.apply() which is invalid

3. Given this NestJS setup in main.ts:

import * as compression from 'compression';
import * as helmet from 'helmet';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.use(compression());
  app.use(helmet());
  await app.listen(3000);
}

What will be the effect on HTTP responses?

medium

A. No effect; middleware is not applied correctly

B. Responses will be compressed and have security headers added

C. Responses will only have security headers, no compression

D. Responses will only be compressed, no security headers

Solution

1. Step 1: Analyze middleware usage in the code

   Both compression() and helmet() are applied using app.use(), which is correct.

2. Step 2: Understand middleware effects

   Compression middleware compresses responses; helmet adds security headers.

3. Final Answer:

   Responses will be compressed and have security headers added -> Option B

4. Quick Check:

   Both compression and helmet applied = compressed + secure headers [OK]

Hint: Both middlewares applied means both effects present [OK]

Common Mistakes:

• Thinking only one middleware works at a time
• Assuming middleware needs special chaining
• Believing middleware is ignored without extra config

4. Identify the error in this NestJS main.ts snippet:

import helmet from 'helmet';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.use(helmet);
  await app.listen(3000);
}

medium

A. helmet is not called as a function before passing to app.use

B. helmet should be imported with * as helmet from 'helmet'

C. app.listen should be called before app.use

D. NestFactory.create requires an options object

Solution

1. Step 1: Check how helmet middleware is passed

   Middleware functions must be called to return a function; here helmet is passed without parentheses.

2. Step 2: Confirm correct usage

   The correct usage is app.use(helmet()); to apply helmet middleware.

3. Final Answer:

   helmet is not called as a function before passing to app.use -> Option A

4. Quick Check:

   Middleware must be called: helmet() [OK]

Hint: Always call middleware functions before app.use [OK]

Common Mistakes:

• Passing middleware reference without calling it
• Importing helmet incorrectly but that still works with default export
• Calling app.listen before middleware setup

5. You want to add compression and security headers in a NestJS app but only compress responses larger than 1KB and disable the X-Powered-By header. Which setup achieves this?

hard

A. app.use(compression({ minSize: 1024 })); app.use(helmet({ hidePoweredBy: true }));

B. app.use(compression({ threshold: 1024 })); app.use(helmet.hidePoweredBy());

C. app.use(compression({ threshold: 1024 })); app.use(helmet({ hidePoweredBy: true }));

D. app.use(compression()); app.use(helmet({ disablePoweredBy: true }));

Solution

1. Step 1: Configure compression threshold correctly

   The compression middleware option to set minimum size is threshold, so { threshold: 1024 } means compress responses over 1KB.

2. Step 2: Disable X-Powered-By header using helmet option

   Helmet's option to hide this header is hidePoweredBy: true.

3. Final Answer:

   app.use(compression({ threshold: 1024 })); app.use(helmet({ hidePoweredBy: true })); -> Option C

4. Quick Check:

   Compression threshold + hidePoweredBy option [OK]

Hint: Use compression threshold and helmet hidePoweredBy option [OK]

Common Mistakes:

• Using wrong option name like minSize or disablePoweredBy
• Calling helmet.hidePoweredBy() which does not exist
• Not setting threshold causing all responses compressed