Cloudflare 设置引用站点策略

发表于 阅读次数： 本文字数： 822 阅读时长 ≈ 1 分钟

前几日，把我的博客部署在 Cloudflare Pages 上面了。同时绑定了一个托管在 Cloudflare 上面的域名，到这里一切顺利。
但是当我兴致勃勃的打开博客的时候发现了一个问题，为什么图片全 403 了？

一开始想到了可能是我的 OSS 防盗链。跑去看了一下，我已经添加了对应的 Referer 域名。一开始还以为是添加 Referer 生效需要时间，于是乎过了几个小时再打开问题依旧。
最诡异的是，打开 Cloudflare Pages 默认的 pages.dev 域名的时候，图片就是正常的。排查了一下，然后就发现了端倪。
问题来自通过绑定的自定义域名访问的时候，图片请求的 Header 中没有 Referer 字段。众所周知，所谓的防盗链其实就是检查 Referer 字段是不是在白名单中。那么问题来这了，为什么 pages.dev 域名中请求图片有 Referer 但是自定义域名没有？
再次稍加观察发现了一个现象

原因就在这里

  • 自定义域名的引用站点策略为 same-origin
  • pages.dev 域名的引用站点策略为 strict-origin-when-cross-origin

就是因为浏览器的 同源策略(Same-Origin Policy) 因此自定义域名的请求图片的时候未带上 Referer
既然问题知道了，就可以解决了：只需要修改一下自定义域名的请求头就行了。

  1. 打开 Cloudflare 控制台，选择对应的域名
  2. 侧边栏选择 规则 → 创建规则 → 响应头转换规则
  3. 选择 向响应添加静态标头 模板
  4. 选择 自定义筛选表达式
  5. 编辑表达式 (http.request.full_uri wildcard "https://这里填写你自己的域名/*")
  6. 规则 添加静态响应头
    • cross-origin-resource-policy = cross-origin
    • referrer-policy = strict-origin-when-cross-origin

这样就可以了，此时再访问自定义域名，发现图片就正常携带了 Referer