Sakurairo项目中Referrer Policy导致的CDN跨域访问问题分析

问题背景

在Sakurairo项目的steam库模板和追番模板中，开发者发现了一个与Referrer Policy相关的跨域访问问题。当站点与CDN服务处于不同域名下时，某些网络请求由于设置了same-origin作为Referrer Policy，导致浏览器在跨域请求CDN资源时不发送referer标头，进而触发CDN的安全限制机制。

技术原理

Referrer Policy的作用

Referrer Policy是HTTP头部的一个安全特性，用于控制浏览器在请求中发送Referer标头的行为。它决定了何时以及如何将当前页面的URL信息传递给第三方站点。常见的Referrer Policy值包括：

• no-referrer：完全不发送Referer标头
• same-origin：仅在同源请求时发送
• strict-origin-when-cross-origin：跨域时只发送源信息(协议+域名+端口)

跨域访问与CDN安全

现代CDN服务通常通过Referer标头来实现防盗链功能，只允许特定来源的请求访问资源。当请求缺少Referer标头或标头不符合预期时，CDN会拒绝服务，返回403等错误状态码。

问题表现

在Sakurairo项目的特定模板中，部分资源请求(如CSS、JS和字体文件)被设置为same-origin的Referrer Policy。当这些资源托管在与主站不同域的CDN上时：

1. 浏览器不会在请求中包含Referer标头
2. CDN服务检测到缺少Referer标头
3. CDN拒绝提供资源(返回403错误)
4. 页面样式和功能受到影响(背景图缺失、字体加载失败、交互功能失效)

解决方案

最佳实践

正确的做法是将Referrer Policy设置为strict-origin-when-cross-origin，这是目前推荐的默认值。这种策略：

1. 同源请求时发送完整URL
2. 跨域请求时只发送源信息(协议+域名+端口)
3. 降级到HTTPS时(从HTTPS到HTTP)不发送任何Referer信息

实现方式

在HTML中可以通过以下方式全局设置：

<meta name="referrer" content="strict-origin-when-cross-origin">

或者在JavaScript中针对特定请求设置：

fetch(url, {
  referrerPolicy: 'strict-origin-when-cross-origin'
});

技术影响

修复此问题后，项目将获得以下改进：

1. 跨域CDN资源能够正常加载
2. 保持了合理的安全级别
3. 符合现代Web安全最佳实践
4. 提升了用户体验的一致性

总结

这个案例展示了Web安全策略在实际项目中的微妙影响。Referrer Policy的正确配置对于依赖CDN的现代Web应用至关重要。Sakurairo项目通过调整这一策略，解决了跨域资源加载问题，同时也为其他类似项目提供了有价值的参考。