Refused to execute script because strict MIME type checking is enabled

Question

I have setup an NGINX reverse proxy to a web service (www.aaa.com) through another domain name (www.bbb.com) while adding a few additional pages to the latter.

Request come from www.bbb.com (nodejs app) but they need to look like they are coming from www.aaa.com or I will have a CORS (Cross-origin resource sharing) issue. Hence NGINX to tweak the headers.

NGINX config

worker_processes 1;
events {
    worker_connections 1024;
}
http {
    include mime.types;
    include servers/*;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 65;

    server {
        listen 443 ssl;
        server_name www.bbb.com;
        ssl_certificate /etc/pki/nginx/server.crt;
        ssl_certificate_key /etc/pki/nginx/private/server.key;
        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout 5m;
        ssl_ciphers HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers on;

        location / {
            proxy_set_header X-Real-IP 127.0.0.1;
            proxy_set_header Host www.aaa.com;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_pass https://www.aaa.com;
            proxy_http_version 1.1;
        }
    }
}

Looks like one of the resources doesn't get the correct MIME Type through the reverse proxy https://www.aaa.com/scripts/some.script.api.js

Error

Refused to execute script from 'https://www.bbb.com/scripts/some.script.api.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

text/html is incorrect indeed, I would be expecting application/javascript

1. Why is this happening? I figured that MIME Types are just set automatically? Could that be that www.aaa.com has implement some new CORS security rule?

2. Is there a way to tell NGINX to set the correct MIME Type for that particular file? I have tried a few things to no avail.

e.g.

add_header Content-Type application/javascript;

but I may have used wrong. Any pointers?

Similar issue described on another Stackoverflow question

Solution

You could try using http://nginx.org/r/default_type; another thing that comes to mind would be http://nginx.org/r/proxy_hide_headers.

I would also suggest that the first line of action would be to determine the root cause of this issue — is the incorrect MIME type coming from your upstream? Then look there.

Otherwise, my guess would be that the reason you're getting text/html is because something else is wrong with your configuration, and a 404 Not Found response gets generated for your .js file (or maybe even 403 Forbidden by the upstream, or 500 by nginx), thus resulting in the text/html MIME type.

Comments

[cnst]

Thanks for accept, and the bounty earlier. So, what was the root of the issue in the end?

[zabumba]

The issue had evolved to ancestor violates the following Content Security Policy directive: "frame-ancestors www.aaa.com. It would be too long to explain. HOWEVER your pointers lead me to hide the header containing that directive proxy_hide_header "X-Frame-Options"; and that resolved my issue.