WordPress可视化编辑器无法使用：CSP拦截blob框架

问题描述 #

基于WordPress搭建的网站，日常使用可视化编辑器编辑页面，时隔数周后再次使用时出现内容被拦截提示，切换至代码编辑器可正常使用，但可视化编辑器无法工作。

浏览器控制台报错信息 #

Refused to frame 'blob:https://xxxxxxxxxx/a2b69832-2d99-45dc-b760-766c6f933c04' because it violates the following Content Security Policy directive: "default-src *". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback. Note that '*' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches `self`'s scheme. The scheme 'blob:' must be added explicitly

已尝试的排查操作 #

• 停用所有插件（数量不多且数月未变更），问题未解决
• 确认WordPress无可用更新
• 服务器为Google Cloud免费层级

当前nginx.conf配置 #

server {
        listen 80;
        listen [::]:80;

        server_name xxxxxxxxxx;

        location ~ /.well-known/acme-challenge {
                allow all;
                root /var/www/html;
        }

        location / {
                rewrite ^ https://$host$request_uri? permanent;
        }
        client_max_body_size 2M;
}

server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name xxxxxxxxxx;

        index index.php index.html index.htm;

        root /var/www/html;

        server_tokens off;

        ssl_certificate /etc/letsencrypt/live/xxxxxxxxxx/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/xxxxxxxxxx/privkey.pem;

        include /etc/nginx/conf.d/options-ssl-nginx.conf;

        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;
        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

        location / {
                try_files $uri $uri/ /index.php$is_args$args;
        }

        location ~ \.php$ {
                try_files $uri =404;
                fastcgi_split_path_info ^(.+\.php)(/.+)$;
                fastcgi_pass wordpress:9000;
                fastcgi_index index.php;
                include fastcgi_params;
                fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                fastcgi_param PATH_INFO $fastcgi_path_info;
        }

        location ~ /\.ht {
                deny all;
        }
        
        location = /favicon.ico { 
                log_not_found off; access_log off; 
        }
        location = /robots.txt { 
                log_not_found off; access_log off; allow all; 
        }
        location ~* \.(css|gif|ico|jpeg|jpg|js|png)$ {
                expires max;
                log_not_found off;
        }
        client_max_body_size 2M;
}

解决方案 #

将nginx配置中443端口server块内的add_header Content-Security-Policy行替换为以下内容：

add_header Content-Security-Policy "default-src 'self' https: data: 'unsafe-inline' 'unsafe-eval'; frame-src 'self' https: blob:;" always;

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