Please add content-security-policy support

[LedPeach]

Welcome

• [X] Yes, I'm using the latest major release. Only such installations are supported.
• [X] Yes, I'm using the supported system. Only such systems are supported.
• [X] Yes, I have read all WIKI document,nothing can help me in my problem.
• [X] Yes, I've searched similar issues on GitHub and didn't find any.
• [X] Yes, I've included all information below (version, config, log, etc).

Description of the problem,screencshot would be good

Web panel does not load if I have the content-security-policy header in the nginx config Try add header add_header content-security-policy "default-src 'self';" always; browser will give out the following error when visiting the x-ui web panel: Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-xxx'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback. where as, there are no issues at all visiting the root address.

And if I disable this header: add_header content-security-policy "default-src 'self';" always; the web panel is working perfectly.

Version of xray-ui

xray-ui version 24.11.22
nginx version 1.18.0

xray-ui log reports or xray log

No error for x-ui.

[qist]

你可以在html 文件添加nonce

<style nonce="{{NONCE}}">
<script nonce="{{NONCE}}">

然后nginx 配置

# Nginx 配置
server {
    listen 443;
    server_name example.com;

    # 定义变量生成随机 nonce仅示例 后端生成并注入要等一段时间现在人很忙 
    set $nonce_value "nonce-$(openssl rand -base64 12 | tr -d '=+/')";

    location / {
        # 注入 CSP 头部，使用动态生成的 nonce
        add_header Content-Security-Policy "script-src 'self' '$nonce_value'; style-src 'self' '$nonce_value';";

        # 传递 nonce 到页面变量中（HTML 替换）
        sub_filter_once off; # 确保多处替换
        sub_filter "{{NONCE}}" $nonce_value; # 替换占位符为动态 nonce
    }

    # 确保 gzip 压缩对替换生效
    gzip off;
}
当然你也可以把那些css js 都抽出来写成文件就不用这么麻烦了。

[qist]

当然你也可以这样写test.com 你自己的域名

add_header Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval' https://test.com; script-src 'self' 'unsafe-inline' 'unsafe-eval'  https://test.com; img-src 'self'  https://test.com; style-src 'self' 'unsafe-inline'  https://test.com; font-src 'self'  https://test.com; frame-src  https://test.com; object-src 'none';"always;