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.