Dynamic IP Address Handling in Content Security Policy (CSP) with Helmet in a NestJS Backend

Question

Question:

I am working on a web application with a React frontend and a NestJS backend. The backend uses Helmet to manage the Content Security Policy (CSP).

My frontend needs to connect to an API hosted on a physical scanner with a dynamic IP address (assigned via DHCP). The scanner's IP address is stored in the database and fetched dynamically by the frontend.

Current Setup:

Backend CSP Configuration with Helmet:

import helmet from 'helmet'

const defaultDirectives = helmet.contentSecurityPolicy.getDefaultDirectives()

app.use(
    helmet({
        contentSecurityPolicy: {
            useDefaults: true,
            reportOnly: false,
            directives: {
                ...defaultDirectives,
                'connect-src': ["'self'", '172.x.x.x'], // Static IP set here
                'script-src': ["'self'", '*.openstreetmap.org'],
                'img-src': ["'self'", 'data:', 'blob:', '*.openstreetmap.org'],
                'style-src': ["'self'", "'unsafe-inline'", 'fonts.googleapis.com'],
                'font-src': ["'self'", 'fonts.gstatic.com']
            }
        },
        crossOriginEmbedderPolicy: false,
        crossOriginOpenerPolicy: false,
        crossOriginResourcePolicy: false,
    })
)

Issue:

When the scanner's IP address changes (e.g., from 172.x.x.x at work to 192.x.x.x at home), I encounter the following error:

Refused to connect to 'http://192.x.x.x/api/connect' because it violates the following Content Security Policy directive: "connect-src 'self' 172.x.x.x".

It seems that the CSP configured in the backend is too restrictive, and I'm unsure how to set the IP address dynamically based on the scanner's changing IP.

Additionally, it feels like the backend's Helmet CSP configuration might be overriding the frontend's policy, leading to this issue.

What I’ve Tried

I attempted to set the connect-src directive in CSP to allow the scanner's IP (172.x.x.x), but this does not account for the dynamic nature of the scanner's IP address.
I tried using a meta tag for the CSP in the frontend, but it didn't resolve the issue because the backend CSP is overriding it, not sure about this one.

My Questions:

How can I handle a dynamically changing IP address in the CSP using Helmet in NestJS?
Is there a way to update the connect-src directive dynamically based on the IP stored in the database?
Would disabling the CSP for connect-src (e.g., using '*' or 'unsafe-inline') be a valid approach without compromising too much security?
What would be the best practice to maintain security while allowing these dynamic connections?

Any insights or suggestions would be greatly appreciated! 😊

Evan Hahn · Accepted Answer · 2025-02-21 20:15:07Z

0

Helmet maintainer here. Let's answer your four questions.

To answer your first two questions, here's how you'd dynamically set the connect-src directive.

I'd start by writing some generic middleware that stores the dynamic IP address. It might look something like this:

app.use((req, res, next) => {
  res.locals.scannerIpAddress = dynamicallyFetchIpAddress();
  next();
});

Then you can set the Content-Security-Policy dynamically:

app.use(
  helmet({
    contentSecurityPolicy: {
      // ...
      directives: {
        ...defaultDirectives,
        "connect-src": [
          "'self'",
          (req, res) => res.locals.scannerIpAddress,
        ],
        // ...
      },
    },
    // ...
  }),
);

Your third question is about disabling connect-src entirely. This could impact security because a rogue script could connect to some malicious server. However, it's up to you whether that's an acceptable risk.

Your final question is about best security practices while allowing these dynamic connections. You'd want to make sure that the scanner IP address is safe and correct.

answered Feb 21 at 20:15

Evan Hahn

12.8k10 gold badges44 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ZeeTix Feb 25 at 14:14

Thank you for sharing your solution! I tried this solution and it worked perfectly for me. For my case I combined both of your example.

Collectives™ on Stack Overflow

Dynamic IP Address Handling in Content Security Policy (CSP) with Helmet in a NestJS Backend

Question:

Current Setup:

Backend CSP Configuration with Helmet:

Issue:

What I’ve Tried

My Questions:

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Question:

Current Setup:

Backend CSP Configuration with Helmet:

Issue:

What I’ve Tried

My Questions:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related