Nginx部署应用遇Content Security Policy脚本加载拒绝问题

DevOps 小满

2026-6-17

问题描述

部署应用时遇到CSP（内容安全策略）报错：

firebase-messaging-sw.js:1 拒绝加载脚本'https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js'，原因是违反了以下Content Security Policy指令："default-src 'self' 'unsafe-inline' 'unsafe-eval' googleapis.com gstatic.com jsdelivr.net"。注意'script-src-elem'未明确设置，因此使用'default-src'作为回退。

以下是当前的Nginx配置：

upstream svc_sftesting {
  ip_hash;
  server testing-develop.svc:3344 max_fails=2 fail_timeout=15s;
}

log_format apm '"$time_local" client=$remote_addr '
               'method=$request_method request="$request" '
               'request_length=$request_length '
               'status=$status bytes_sent=$bytes_sent '
               'upstream_addr=$upstream_addr '
               'upstream_status=$upstream_status '
               'request_time=$request_time '
               'upstream_response_time=$upstream_response_time '
               'upstream_connect_time=$upstream_connect_time '
               'upstream_header_time=$upstream_header_time';

server {
  listen 3000;
  server_name testing.com;


  add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
  add_header X-Content-Type-Options nosniff;
  add_header X-Frame-Options SAMEORIGIN;
  add_header X-XSS-Protection "1; mode=block";

  # Header Content Security Policy
  add_header Content-Security-Policy "default-src 'self' googleapis.com gstatic.com jsdelivr.net; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.gstatic.com https://www.googleapis.com; script-src-elem 'self' https://www.gstatic.com; connect-src 'self' https://fcm.googleapis.com https://www.googleapis.com; worker-src 'self' blob: https://www.gstatic.com https://www.googleapis.com;" always;

  add_header Referrer-Policy "origin-when-cross-origin" always;
  add_header Feature-Policy "camera 'none'; geolocation 'none'; microphone 'none'; payment 'none'; usb 'none'" always;

  server_tokens off;
  add_header Server "Hidden" always;
  proxy_hide_header X-Powered-By;

  error_page 400 403 404 500 502 503 504 /error.html;

  location = /error.html {
    internal;
    root /app;
  }

  client_max_body_size 100M;
  root /app;
  index index.html;

  access_log /dev/stdout apm;
  error_log /dev/stderr;

  location /nginx_status {
    stub_status on;
    access_log off;
    allow all;
  }

  location = /robots.txt {
    return 301 http://$host;
  }

  location / {
    add_header Set-Cookie "Path=/; Secure; HttpOnly; SameSite=Strict";
    try_files $uri $uri/ /index.html =404;
  }

  location /firebase-messaging-sw.js {
    alias /app/public/firebase-messaging-sw.js;  
    default_type "application/javascript";
    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.gstatic.com https://www.googleapis.com; worker-src 'self' blob: https://www.gstatic.com;" always; 
    try_files $uri =404;
  }

  location /services/ {
    proxy_cache_revalidate on;
    proxy_cache_min_uses 3;
    proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
    proxy_cache_background_update on;
    proxy_cache_lock on;

    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_connect_timeout 600s;
    proxy_read_timeout 5400s;
    proxy_send_timeout 5400s;

    proxy_cookie_path / "/; Secure; HttpOnly; SameSite=Strict";

    proxy_pass http://svc_sftesting/;
  }
}

解决方案

报错核心原因：/firebase-messaging-sw.js对应的CSP配置中，default-src仅限制为'self'，且未明确指定script-src-elem规则，浏览器回退使用default-src时，不允许加载https://www.gstatic.com域名下的脚本。

修改location /firebase-messaging-sw.js中的CSP配置，确保目标域名被允许：

location /firebase-messaging-sw.js {
    alias /app/public/firebase-messaging-sw.js;  
    default_type "application/javascript";
    # 调整CSP规则，添加必要的域名权限
    add_header Content-Security-Policy "default-src 'self' https://www.gstatic.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.gstatic.com https://www.googleapis.com; script-src-elem 'self' https://www.gstatic.com; worker-src 'self' blob: https://www.gstatic.com;" always; 
    try_files $uri =404;
}

关键修改点：

给default-src添加https://www.gstatic.com，确保回退规则下允许该域名的资源加载
明确设置script-src-elem包含https://www.gstatic.com，直接指定脚本元素的加载权限，避免依赖回退逻辑

修改完成后，执行nginx -s reload重新加载配置即可解决脚本被阻止的问题。

内容的提问来源于stack exchange，提问作者Irkham 11