Plausible Analytics中WebSocket跨域访问问题的分析与解决

问题背景

在使用Plausible Analytics自托管部署时，当BASE_URL配置与实际访问域名不匹配时，系统会出现WebSocket连接403错误。这个问题主要影响两类场景：

1. 开发环境下使用localhost访问但配置了其他域名
2. 生产环境中使用反向代理时域名配置不一致

技术原理

该问题的本质是Phoenix框架的WebSocket安全机制在起作用。Phoenix默认会检查WebSocket连接的Origin头，确保其与配置的BASE_URL一致，这是防止跨站WebSocket劫持(CSWSH)的重要安全措施。

错误日志中明确显示：

Could not check origin for Phoenix.Socket transport.
Origin of the request: http://localhost:8000

解决方案

推荐方案：正确配置BASE_URL

确保环境变量中的BASE_URL与实际访问地址完全一致，包括：

• 协议(http/https)
• 域名
• 端口(如非标准端口)

例如：

BASE_URL=https://analytics.example.com

高级配置：自定义check_origin

对于特殊场景(如多域名访问)，可以通过修改Phoenix的Endpoint配置，显式指定允许的origin列表：

config :plausible, PlausibleWeb.Endpoint,
  check_origin: ["https://example.com", "//another.com:888"]

容器部署注意事项

使用Docker部署时需特别注意：

1. 修改.env文件后必须重建容器
2. 不能仅使用docker compose restart，而应该：

docker compose up -d --force-recreate

Nginx反向代理配置要点

正确的Nginx配置应确保WebSocket连接能正确传递：

location = /live/websocket {
    proxy_pass http://backend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $host;
}

安全提醒

虽然可以通过禁用origin检查来快速解决问题，但这会带来安全风险：

• 可能允许恶意网站通过WebSocket窃取数据
• 建议仅在测试环境临时使用

总结

Plausible Analytics的WebSocket访问控制是重要的安全特性。正确的解决方法是确保BASE_URL配置与实际访问地址一致，而非简单地禁用安全检查。对于复杂部署场景，应通过check_origin参数精细控制访问权限，在安全性和灵活性之间取得平衡。