生产服务器上Laravel Livewire与CSP内容安全策略兼容问题

环境配置 #

开发环境 #

• 操作系统：Laragon本地开发环境
• Web服务器：Nginx
• Laravel版本：10
• Livewire版本：3.4
• NPM版本：9.8.1
• Node.js版本：18.18.2
• Vite版本：3.0.2
• 测试浏览器：Chrome

生产环境 #

• 操作系统：Ubuntu 20.04.6 LTS
• Web服务器：Nginx v1.18.0
• Laravel版本：10
• Livewire版本：3.4
• NPM版本：10.7.0
• Node.js版本：20.13.1
• Vite版本：3.2.10
• 测试浏览器：Chrome

问题详情 #

生产环境访问应用时，出现与Livewire JavaScript文件相关的错误：

警告信息：

Alpine Expression Error: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' http: https: ws: wss: data: blob: 'unsafe-inline'".

Expression: "tableWrapper($wire, )"

错误信息：

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' http: https: ws: wss: data: blob: 'unsafe-inline'".

at new AsyncFunction (<anonymous>)
at safeAsyncFunction (livewire.js?id=239a5c52:1254:21)
at generateFunctionFromString (livewire.js?id=239a5c52:1264:16)
at generateEvaluatorFromString (livewire.js?id=239a5c52:1269:16)
at normalEvaluator (livewire.js?id=239a5c52:1234:111)
at evaluateLater (livewire.js?id=239a5c52:1224:12)
at evaluate (livewire.js?id=239a5c52:1220:5)
at Function.<anonymous> (livewire.js?id=239a5c52:3491:17)
at flushHandlers (livewire.js?id=239a5c52:1358:48)
at stopDeferring (livewire.js?id=239a5c52:1363:7)

Nginx配置 #

生产服务器的Nginx配置如下：

server {
listen 443 ssl http2;
server_name system.example.com;
set $base /app/system;
root $base/public;

add_header Content-Security-Policy "default-src 'self' http: https: ws: wss: data: blob: 'unsafe-inline'";

include nginxconfig.io/ssl.conf;
include nginxconfig.io/security.conf;

access_log /var/log/nginx/system-access.log combined buffer=512k flush=1m;
error_log /var/log/nginx/system-error.log warn;

index index.php;

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

include nginxconfig.io/general.conf;

location ~ \.php$ {
    fastcgi_pass unix:/var/run/php/php-fpm.sock;
    include nginxconfig.io/php_fastcgi.conf;
}

location = /livewire/livewire.js {
    expires off;
    try_files $uri $uri/ /index.php?$query_string;
}
}

server {
    listen 80;
    server_name system.example.com;

    location / {
        return 301 https://system.example.com$request_uri;
    }
}

已尝试方案 #

1. 在CSP头中添加'unsafe-eval'：

add_header Content-Security-Policy "default-src 'self' http: https: ws: wss: data: blob: 'unsafe-inline' 'unsafe-eval'";

2. 验证服务器上已存在所需文件。

以上方案均未解决问题，恳请指导如何正确配置Livewire以适配严格的CSP，或提供无需使用'unsafe-eval'的替代方案。

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