Next.js Discord

Discord Forum

Error with Content Security Policy directives and NextJS build

Answered
Alano Español posted this in #help-forum
Open in Discord
Alano EspañolOP
My SaaS works perfectly in development mode but when compiling it on my server all API paths give error 404 or 500 and I can't import scripts like Turnstile from Cloudlare (I use an image provided by NextJS from Docker).

And locally on my pc I have tried with the build and it doesn't even load the css.
Answered by adam.birds
Nice, but yeah I would still make thta change in nginx for security reasons.
View full answer

40 Replies

adam.birds
can you show us your docker files, otherwise we are just guessing in the wind.
this is in dev mode
this in production
adam.birds
Are you running behind a reverse proxy?
And do you have any middleware, if so can we see that?
Alano EspañolOP
Sure, I'll show you what I have
const cspHeader = `
    default-src * 'unsafe-inline' 'unsafe-eval' data: blob:;
    script-src * 'unsafe-inline' 'unsafe-eval';
    style-src * 'unsafe-inline';
    img-src * data: blob:;
    font-src * data:;
    connect-src *;
    frame-src *;
`;

const nextConfig = {
    reactStrictMode: false,
    output: "standalone",
    images: {
        unoptimized: true,
        remotePatterns: [
            {
                protocol: "https",
                hostname: "cdn3d.iconscout.com",
                port: "",
                pathname: "/**"
            },
            {
                protocol: "https",
                hostname: "avatars.githubusercontent.com",
                port: "",
                pathname: "/**"
            },
            {
                protocol: "https",
                hostname: "media.licdn.com",
                port: "",
                pathname: "/**"
            },
            {
                protocol: "https",
                hostname: "cdn.tpeoficial.com",
                port: "",
                pathname: "/**"
            }
        ]
    },
    async headers() {
        return [
            {
                source: "/(.*)",
                headers: [
                    {
                        key: "Content-Security-Policy",
                        value: cspHeader.replace(/\n/g, "")
                    }
                ]
            }
        ]
    }
};

export default nextConfig;
(The CSP thing I put it after seeing all those errors to try to fix it but it doesn't work.)
adam.birds
I'm thinking possibly something do with this line as it seems only access to /api is being affected;

if (path.startsWith("/api")) {
        if (!(req.headers.get("referer") || "").startsWith(process.env.NODE_ENV === "production" ? "https://dymo.tpeoficial.com" : "http://localhost:3000")) return NextResponse.json({ error: "Access denied" }, { status: 403 });
    }
I'd chin this off if it hasn't done anything too;

async headers() {
        return [
            {
                source: "/(.*)",
                headers: [
                    {
                        key: "Content-Security-Policy",
                        value: cspHeader.replace(/\n/g, "")
                    }
                ]
            }
        ]
    }
adam.birds
Is it running behind nginx? If so do you have an nginx config you can show?
adam.birds
Hmm, I don't think any of this would cause it but have noticed a few things i would change

First thing, unrelated, is that I would create a separate server block with default_server that 404s anything doesn't match your server_name dymo.tpeoficial.com;

I've also never set these lines before with nextjs as don't believe they are needed, you just need the proxy;

root /var/www/dymo.tpeoficial.com;
index index.html index.htm index.nginx-debian.html;


Hopefully someone else can spot the error.
Alano EspañolOP
It's just in case it doesn't find the files, but I already have several apps deployed like this and there is no problem.
Alano EspañolOP
The truth is that I don't know what causes it.
@Alano Español Would you know what it could be?
adam.birds
I acn't see anthing obvious from all the above. Hopefully somebody else may have an idea.
@adam.birds I acn't see anthing obvious from all the above. Hopefully somebody else may have an idea.
Alano EspañolOP
Hopefully because it is a project that we have been working on for months and now the build is happening.
@Alano Español Hopefully because it is a project that we have been working on for months and now the build is happening.
adam.birds
I asked GPT and it reckons the culprit is this part (https://chatgpt.com/share/67b802e9-b040-8011-a2ef-b33217293fec):
if (path.startsWith("/api")) {
  if (
    !(req.headers.get("referer") || "").startsWith(
      process.env.NODE_ENV === "production"
        ? "https://dymo.tpeoficial.com"
        : "http://localhost:3000"
    )
  ) {
    return NextResponse.json({ error: "Access denied" }, { status: 403 });
  }
}


As if the referer header isn't there its getting denied and although you are erroring with a 403, that could get changed downstream. So I would log out the referer, to see what that is actually coming through. For example the nginx proxy could be stripping it. Its not really the best way to verify its coming from your domain.

This would be a better prevention:

First thing, unrelated, is that I would create a separate server block with default_server that 404s anything doesn't match your server_name dymo.tpeoficial.com;
adam.birds
Nginx should be what is blocking requests not to your domain. And then maybe look at a better way of adding extra verification in the app itself.
adam.birds
So you want your nginx config to be like this:

# Block requests to the VPS IP
server {
    listen 80 default_server
    listen [::]:80 default_server;
    listen 443 ssl default_server;
    listen [::]:443 ssl default_server;
    
    server_name _;
    
    return 444;
}

# Main server configuration
server {
    # HTTP
    listen 80;
    listen [::]:80;
    
    # HTTPS
    listen 443 ssl;
    listen [::]:443 ssl;
    
    # SSL Configuration
    ssl_certificate /etc/nginx/ssl/tpeoficial.com_ssl_certificate.cer;
    ssl_certificate_key /etc/nginx/ssl/_.tpeoficial.com_private_key.key;
    ssl_trusted_certificate /etc/nginx/ssl/_.tpeoficial.com_ssl_certificate_INTERMEDIATE.cer;
    
    # SSL Security Settings
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;
    
    # Basic Settings
    server_name dymo.tpeoficial.com;
    root /var/www/dymo.tpeoficial.com;
    index index.html index.htm index.nginx-debian.html;
    
    # Proxy Settings
    location / {
        proxy_pass http://127.0.0.1:3003;
        proxy_http_version 1.1;
        
        # Headers
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        
        # WebSocket support
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        
        # CORS headers
        add_header Access-Control-Allow-Credentials "true" always;
        add_header Access-Control-Expose-Headers "Content-Range" always;
        
        proxy_pass_request_headers on;
        
        # Timeouts
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }
}


To move the default_servers onto the block route. As otherwise your nginx is redirecting any domain request to the application, whereas this config will only accept your domain name
@adam.birds So you want your nginx config to be like this: # Block requests to the VPS IP server { listen 80 default_server listen [::]:80 default_server; listen 443 ssl default_server; listen [::]:443 ssl default_server; server_name _; return 444; } # Main server configuration server { # HTTP listen 80; listen [::]:80; # HTTPS listen 443 ssl; listen [::]:443 ssl; # SSL Configuration ssl_certificate /etc/nginx/ssl/tpeoficial.com_ssl_certificate.cer; ssl_certificate_key /etc/nginx/ssl/_.tpeoficial.com_private_key.key; ssl_trusted_certificate /etc/nginx/ssl/_.tpeoficial.com_ssl_certificate_INTERMEDIATE.cer; # SSL Security Settings ssl_protocols TLSv1.2 TLSv1.3; ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384; ssl_prefer_server_ciphers off; # Basic Settings server_name dymo.tpeoficial.com; root /var/www/dymo.tpeoficial.com; index index.html index.htm index.nginx-debian.html; # Proxy Settings location / { proxy_pass http://127.0.0.1:3003; proxy_http_version 1.1; # Headers proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Forwarded-Host $host; proxy_set_header X-Forwarded-Server $host; # WebSocket support proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; # CORS headers add_header Access-Control-Allow-Credentials "true" always; add_header Access-Control-Expose-Headers "Content-Range" always; proxy_pass_request_headers on; # Timeouts proxy_connect_timeout 60s; proxy_send_timeout 60s; proxy_read_timeout 60s; } } To move the default_servers onto the block route. As otherwise your nginx is redirecting any domain request to the application, whereas this config will only accept your domain name
Alano EspañolOP
I understand, but do you think it affects?
@Alano Español I understand, but do you think it affects?
adam.birds
Well it means you can potentially remove that referer check which is most likely causing your issues. And letting any request to your app is a security risk
Alano EspañolOP
I've solved it apparently, it was a liberry error when compiling, I don't believe it.
@Alano Español I've solved it apparently, it was a liberry error when compiling, I don't believe it.
adam.birds
Nice, but yeah I would still make thta change in nginx for security reasons.
Answer
@adam.birds Nice, but yeah I would still make thta change in nginx for security reasons.
Alano EspañolOP
By the way it was 6 AM here in Spain and I was going to sleep, in the end I got it, it was several things together, thank you very much for your help @adam.birds
Original message was deleted
Alano EspañolOP
will not let me do it
adam.birds
You need to right click one of my messages to mark as solution
@adam.birds You need to right click one of my messages to mark as solution
Alano EspañolOP
Oh perfect, thank you!