Speedtest Tracker 项目 HTTPS 环境下资源加载问题解决方案

问题背景

在 Speedtest Tracker 项目中，当用户通过反向代理配置 HTTPS 访问时，可能会遇到混合内容（Mixed Content）问题。具体表现为网页可以正常加载，但字体文件和网站图标等静态资源无法正确加载，浏览器控制台会显示相关错误。

问题现象

用户在使用反向代理（如 Traefik、HAProxy 或 Synology NAS 内置反向代理）配置 HTTPS 访问 Speedtest Tracker 时，HTML 页面中包含的静态资源链接仍然使用 HTTP 协议：

<link rel="icon" href="http://<host:port>/img/speedtest-tracker-icon.png">
<link href="http://<host:port>/fonts/inter/inter.css" rel="stylesheet">

这会导致浏览器因安全策略阻止加载这些资源，影响页面正常显示。

根本原因

该问题源于 Laravel 框架生成的静态资源 URL 没有自动适应 HTTPS 协议。在反向代理场景下，虽然用户通过 HTTPS 访问，但应用内部生成的资源链接仍保持 HTTP 协议。

解决方案

1. 配置 ASSET_URL 环境变量

Laravel 框架提供了 ASSET_URL 环境变量来指定静态资源的基础 URL。在 Docker 配置中添加以下环境变量：

environment:
  - ASSET_URL=https://your-domain.com

此配置会强制所有静态资源使用 HTTPS 协议加载。

2. 保留 APP_URL 配置

虽然 ASSET_URL 解决了静态资源加载问题，但建议同时保留 APP_URL 配置：

environment:
  - APP_URL=https://your-domain.com
  - ASSET_URL=https://your-domain.com

APP_URL 在以下场景中仍然有用：

• 系统通知和电子邮件中的链接生成
• 其他需要完整应用 URL 的场景

3. 反向代理配置建议

在反向代理配置中，确保：

1. 不要包含端口号（除非使用非标准端口）
2. 正确设置 Host 头
3. 确保代理传递正确的协议信息

实施示例

完整的 Docker Compose 配置示例：

services:
  speedtest-tracker:
    image: lscr.io/linuxserver/speedtest-tracker:latest
    container_name: speedtest-tracker
    ports:
      - 8080:80
      - 8443:443
    environment:
      - PUID=1000
      - PGID=1000
      - APP_KEY=base64:your-app-key
      - APP_URL=https://your-domain.com
      - ASSET_URL=https://your-domain.com
      - DB_CONNECTION=sqlite
      - TZ=Your/Timezone
      - APP_TIMEZONE=Your/Timezone
      - DISPLAY_TIMEZONE=Your/Timezone
      - SPEEDTEST_SCHEDULE=0 * * * *
      - SPEEDTEST_SERVERS=your-preferred-servers
      - PRUNE_RESULTS_OLDER_THAN=0
    volumes:
      - /path/to/config:/config
    restart: unless-stopped

验证方法

配置完成后，可以通过以下方式验证：

1. 使用浏览器开发者工具检查网络请求，确认所有资源都通过 HTTPS 加载
2. 检查页面源代码，确认资源链接已使用 HTTPS 协议
3. 确保没有混合内容警告出现在浏览器控制台

总结

通过合理配置 ASSET_URL 和 APP_URL 环境变量，可以有效解决 Speedtest Tracker 在 HTTPS 反向代理环境下的静态资源加载问题。这种配置方式不仅适用于 Speedtest Tracker，也适用于其他基于 Laravel 框架的应用在类似环境下的部署。