跨境独立站图片防盗链海外CDN配置方案

## 为什么你的独立站需要配置图片防盗链 如果你运营跨境独立站（比如 Shopify、WooCommerce 或者自建站），图片资源很容易被其他网站直接引用。盗链不仅消耗你的 CDN 流量，增加服务器成本，还可能导致原图加载变慢。通过海外 CDN（如 CloudFlare）配置图片防盗链，可以只允许你自己的域名引用图片，从根本上解决这个问题。 ## 准备工作：你需要哪些条件 - 一个已解析到 CDN 的独立站域名（例如 `yourstore.com`） - CDN 账号：推荐 CloudFlare（免费版即支持基础防盗链功能），其他海外 CDN 如 AWS CloudFront、Fastly 也有类似功能 - 源站服务器（虚拟主机、VPS 或对象存储）已配置好图片资源，且域名已接入 CDN - 浏览器开发者工具或 `curl` 命令用于测试 ## 关键操作：在 CloudFlare 上开启 Hotlink Protection 以 CloudFlare 为例（最常用的免费海外 CDN），步骤如下： 1. 登录 CloudFlare 控制台，选择你的域名。 2. 进入 **Scrape Shield**（抓取保护）页面。 3. 找到 **Hotlink Protection** 开关，点击启用。 4. 在 **Allowed websites** 中输入你的独立站域名（例如 `yourstore.com`），如果需要支持子域名，可以填写 `*.yourstore.com`。每行一个域名。 5. 如果希望允许搜索引擎爬虫抓取图片（不影响 SEO），可以勾选 **Skip image from known bots**。 6. 点击 **Save** 保存。 **注意**：这个功能会检查 HTTP Referer 头。如果请求没有 Referer（比如直接打开图片链接或某些 RSS 阅读器），可能被拦截。下面的避坑部分会说明如何处理。 如果你使用其他海外 CDN（如 AWS CloudFront），可以通过添加 Referer 白名单的自定义响应头或结合 Lambda@Edge 实现类似效果，但 CloudFlare 是最简单的方案之一。 ## 避坑指南：空 Referer、国内访问与缓存问题 ### 1. 空 Referer 导致正常用户无法访问图片 直接通过浏览器地址栏打开图片链接时，不会发送 Referer，会被 Hotlink Protection 当作恶意请求拦截。解决办法：在 CloudFlare 的 **Page Rules** 中添加一条规则，为图片路径（例如 `/wp-content/uploads/`）设置 **Cache Level: Standard** 并启用 **Hotlink Protection: Off** 来避开？但这样防盗链会失效。更合理的做法是在独立站内所有图片使用网页内嵌（如 `` 标签），不要对外直链。如果必须允许空 Referer，可考虑使用 Worker 脚本做更精细的控制（本文不展开）。 ### 2. 国内访问被误拦 如果你的独立站也面向国内用户，且国内 CDN（如又拍云、腾讯云CDN）与海外 CDN 双栈部署，需要分别在两个 CDN 上配置防盗链。对于 CloudFlare，国内用户访问可能经过中转，Referer 可能丢失或改变，建议针对国内用户单独使用国内 CDN，并关闭 CloudFlare 的防盗链（或者通过 UA 判断）。一般跨境独立站主要面向海外，国内用户较少，可忽略此问题。 ### 3. 图片被缓存后防盗链不生效 CDN 节点会缓存图片。当盗链者引用的图片已经被 CDN 缓存时，即使你后开启防盗链，旧缓存依然可被访问。需要 **手动清除 CDN 缓存**（CloudFlare 可以在 **Caching > Purge Everything** 清空所有缓存）。同时建议为图片设置较短的缓存时间，或者使用带版本号的 URL。 ## 验证方法：如何确认防盗链已生效 ### 方法一：浏览器开发者工具（推荐） 1. 打开你的独立站首页，按 F12 打开开发者工具。 2. 切换到 **Network** 标签，刷新页面，过滤图片类型。 3. 点击任意图片，查看 **Headers** 中的 Referer 是否显示为你的域名。 4. 另开一个标签页，直接访问同一张图片的 URL（不带 Referer），如果返回 403 错误或 CloudFlare 的拦截页，说明防盗链生效。 ### 方法二：curl 命令测试 在本地终端执行（替换为你的图片地址和允许的域名）： ```bash # 模拟正常请求（带 Referer） curl -H "Referer: https://yourstore.com" -I https://cdn.yourstore.com/wp-content/uploads/1.jpg # 输出应显示 200 OK # 模拟盗链（不带 Referer） curl -I https://cdn.yourstore.com/wp-content/uploads/1.jpg # 输出应显示 403 Forbidden（或被重定向到默认防盗链图片） ``` 如果第二个命令返回 200，说明防盗链未生效，请检查 CloudFlare 设置或缓存问题。 --- 如果你正在处理跨境独立站图片防盗链海外CDN配置，建议先按本文步骤完整执行，再根据自己的环境做微调。遇到异常时，优先检查 Referer 规则和 CDN 缓存是否已清除。如果使用了多个 CDN 或特殊架构，可以在评论区留言讨论。