Laravel中Blade页面添加脚本遭CSP拦截的解决方案咨询

一、修复CSP脚本限制问题 #

你的核心报错是CSP的script-src规则阻止了脚本加载，可通过以下方式在开启CSP的前提下允许自定义脚本：

1. 针对第三方在线聊天脚本（CDN加载） #

如果你的聊天脚本是从外部CDN（如https://your-chat-provider.com）加载的，直接在.env文件中添加该源到CSP的脚本白名单：

APP_CSP_ENABLED=true
APP_CSP_SCRIPT_SRC="https://your-chat-provider.com 'self'"

• 'self'保留现有同域脚本的访问权限，避免影响应用原有功能。

2. 针对内联聊天脚本 #

如果是直接写在Blade里的内联脚本，有两种安全的白名单方式：

方式A：使用脚本哈希

浏览器开发者工具的Console报错中会直接给出该内联脚本的SHA哈希值（格式类似'sha256-xxxxxx'），复制后添加到.env：

APP_CSP_SCRIPT_SRC="'self' 'sha256-abcdef123456...'"

• 注意：脚本内容修改后哈希会失效，需要重新生成。

方式B：使用Nonce（随机数）

适合需要动态修改内联脚本的场景：

1. 在app/Providers/AppServiceProvider.php的boot方法中生成随机nonce并共享给视图：

use Illuminate\Support\Facades\View;
use Illuminate\Support\Str;

public function boot()
{
    $cspNonce = Str::random(32);
    View::share('cspNonce', $cspNonce);
    // 更新CSP配置，加入nonce规则
    config(['app.csp_script_src' => "'self' 'nonce-$cspNonce'"]);
}

2. 在Blade页面的脚本标签中添加nonce属性：

<script nonce="{{ $cspNonce }}">
// 你的自定义聊天脚本内容
</script>

二、解决本地脚本的404问题 #

由于app目录的请求会被重定向到public，不要将脚本放在app/Modules/KnowledgeBase/下，必须放到public/modules/knowledgebase/目录（该目录是符号链接，可正常访问），然后在Blade中通过asset()函数引用：

<script src="{{ asset('modules/knowledgebase/chat-script.js') }}" nonce="{{ $cspNonce }}"></script>

三、验证配置 #

1. 打开浏览器开发者工具→Network标签，查看页面响应头中的Content-Security-Policy，确认script-src包含你配置的规则。
2. 刷新页面，检查Console是否还有CSP相关报错。

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