这是什么？

只是随便搜集的一些头像接口，全部来自于我手机里目前安装的大部分APP服务。其中无 Web 标识的头像，如果你能看得见，那么证明该服务商并没有做严格的SSL校验，导致逆向极其简单。无该标识的默认为移动APP。以下所有资源均来自我个人使用的账号

一些小发现

• 微软（Microsoft）的头像非常严格，使用Cookie校验，不能直接访问
• 微信、支付宝，TapTap，钉钉不采用Web协议，故抓不到包
• 小黑盒，网易云音乐，酷安，作业帮，豆包，肯德基，库街区都采用了严格的SSL校验，不能直接访问
• 下述图片，除了TapTap校验Referer，其他都没有校验Referer，故可以直接访问。不过就算校验Referer也是徒劳

头像	描述
	QQ
	OPPO（Web）
	Google（Web）
	小米（Web）
	京东（Web）
	高德地图（Web）
	美团
	淘宝
	拼多多
	GitHub（Web）
	Telegram（Web）
	WPS（Web）
	闲鱼
	好游快爆
	网易云音乐（Web）
	KOOK
	TapTap（Web）
	（微信）公众号助手
	百度网盘
	Steam（Web）

这表明了什么？

对于图片，音乐，影片等静态资源，若直接使用 img audio video 等标签，无需CORS即可将远端资源在任意网页上展示。这是W3C规范的一部分，详情请参考 HTML5 嵌入内容

当然，如果您是一个网站的维护者，您可能不想让陌生人直接将你的资源展示给别人看，或者怕被刷出账单，下面我将简单说明哪些措施是有效的，哪些是掩耳盗铃

首先我们来分辨一下您手动做服务端的防盗链和浏览器CORS的区别：

浏览器CORS是客户端行为，当某个行为被对端CORS策略拒绝，浏览器会阻止响应体。而服务端防盗链是在您的后端上编写一些小脚本，用以拒绝非法访问。前者会在用户浏览器弹出CORS错误，而后者会在用户浏览器显示错误状态码，如500，401，403，这取决于您的实现

是否可以尝试设置Referer白名单来拒绝非法访问？ 没用 因为Referer在浏览器中是可以伪造或者不发送的。详见 HTML 5 引用来源策略

您应该做的事情稍微有些复杂，如将API放到Cookie（登录，非游客权限）中，并且让后端处理Cookie的发放与吊销。就像微软那样

又或者说，您只想要用户仅能通过浏览器单独查看图片，而不让 任何人（包括您） 引用图片到网站中，您可以使用 Accept 请求头 白名单，您可以尝试比较一下这两个 Accept 请求头 ，前者是直接访问图片浏览器自动发送的，而后者是引用时发送的

text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7

image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8

最后，如果您想做到图片必须是 游客访问 ，又不想让他人滥用。可以使用CORP（Cross-Origin-Resource-Policy）

只需要在别人拉取图片时返回一个CORP响应头，如： Cross-Origin-Resource-Policy: same-origin

另外，CORP不仅能保护图片，它可以保护一切东西，下面是一个简单的示意图 浏览器拉取资源 -> 请求资源，检查响应头 -> CORP（给不给用，默认给用） -> CORS（给不给JS读，默认不给） -> 返回

当CORP响应头返回的策略中和将要拉取资源的源不匹配，浏览器会阻止资源在页面加载，但并不会阻断原始请求

设置后跨站引用会被浏览器阻止

• Chromium（Edge/Chrome）

另外提一嘴，Chromium 最近推了一个更新，导致CORS/CORP错误默认不显示在控制台，需要勾选 显示控制台中的CORS错误 控制台功能参考  |  Chrome DevTools  |  Chrome for Developers

• Firefox