CSP for mapbox gl js , App created with dockerize nodejs and nginx

Viewed 317

I'm trying to include CSP for Mapbox gl js in my nodejs app, where the map tile works properly on localhost but throw's issues in issues tab in chrome developer tool. And throw error on hosted website blob:https://example.com/ violates the Content-Security-Policy.

Issues tab in chrome developer tool in local environment


Indicate whether to send a cookie in a cross-site request by specifying its SameSite 
attribute

Because a cookie’s SameSite attribute was not set or is invalid, it defaults to
SameSite=Lax, which prevents the cookie from being sent in a cross-site request. 
This behavior protects user data from accidentally leaking to third parties and 
cross-site request forgery.

Resolve this issue by updating the attributes of the cookie:
Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. 
This enables third-party use.
Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in 
cross-site requests.

8 cookies
Name    Domain & Path
_mkto_trk   .mapbox.com/
_ga .mapbox.com/
mkjs_group_id   .mapbox.com/
optimizelyEndUserId .mapbox.com/
mkjs_user_id    .mapbox.com/
_uetvid .mapbox.com/
_cioid  .mapbox.com/
_gid    .mapbox.com/

Error in console

web_worker.js:9 Refused to create a worker from 
'blob:https://example.com/20d2ed71-b218-4a21-b74d-8913226b398e' because it violates 
the following Content Security Policy directive: "default-src * data: 'unsafe-eval' 
'unsafe-inline'".Note that 'worker-src' was not explicitly set, so 'default-src' 
is used as a fallback.
web_worker.js:9 Uncaught (in promise) DOMException: Failed to construct 
'Worker': Access to the script at 
'blob:https://example.com/20d2ed71-b218-4a21-b74d-8913226b398e' 
is denied by the document's Content Security Policy.

nginx-conf file

server {
        listen 80;
        listen [::]:80;
        server_name example.com www.example.com;

        location ~ /.well-known/acme-challenge {
          allow all;
          root /var/www/html;
        }

        location / {
                rewrite ^ https://$host$request_uri? permanent;
        }
}

server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name example.com www.example.com;

        server_tokens off;

        #SSL configuration here

        resolver 8.8.8.8;

        location / {
                try_files $uri @nodejs;
        }

        location @nodejs {
                proxy_pass http://nodejs:8080;
                add_header X-Frame-Options "SAMEORIGIN" always;
                add_header X-XSS-Protection "1; mode=block" always;
                add_header X-Content-Type-Options "nosniff" always;
                add_header Referrer-Policy "no-referrer-when-downgrade" always;
                #here is the CSP header
                add_header Content-Security-Policy "default-src * data: 'unsafe-eval' 'unsafe-inline'" always; 
                # add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
                # enable strict transport security only if you understand the implications
        }

        root /var/www/html;
        index index.html index.htm index.nginx-debian.html;
}

I've tried several dozen thing's but nothing work's. Include helmet js and also csp header in server function in server side but find no success.

1 Answers

You need to add blob: to your "all allowed" Content-Security-Policy.

The below should fix the issue for you:

add_header Content-Security-Policy "default-src * data: blob: 'unsafe-eval' 'unsafe-inline'" always;

(I am assuming this is not the CSP you are actually going to run, because what would be the point?)

Related