如何提取Instagram头像图片并嵌入HTML的img标签

你没法直接把这个链接放到img标签里用，本质是两个限制：

1. Instagram的CDN配置了防盗链规则，会校验请求的Referer来源，非Instagram自家域名的请求直接返回403拒绝
2. 你拿到的这个CDN链接是临时签名链接，链接里的oe参数是过期时间戳、oh是校验签名，有效期通常只有几小时到数天，过期之后就算你是从Instagram页面访问也会失效，根本不是永久可访问的资源地址

• 生产环境优先选：服务端代理缓存
  不要在前端直接引用Instagram的CDN地址，在自己的服务端新增一个头像拉取接口：
  1. 调用时通过合法渠道（官方接口或合规的公开数据获取方式）拿到对应账号最新的有效临时头像CDN链接
  2. 服务端发起请求拉取图片时，带上正常浏览器访问的请求头（合法User-Agent、匹配的Referer），拿到图片二进制流
  3. 可以把图片缓存到自己的对象存储/本地服务器，避免每次都重复请求IG接口，前端直接把img的src指向你自己的服务端地址即可
     这种方式不会触发防盗链拦截，也不会因为临时链接过期导致头像加载失败。
• 本地临时调试用：关闭Referer上报
  只是本地测试临时看效果的话，可以给img标签添加referrerpolicy属性，告诉浏览器请求资源时不要携带Referer头，部分场景下可以绕过防盗链校验：

  <img src="你的Instagram头像CDN链接" referrerpolicy="no-referrer" alt="IG用户头像">
  

  注意：这个方法完全不适合生产环境，稳定性极差，Instagram随时可能调整防盗链规则拦截这类请求，加上临时链接本身会过期，上线用百分百会出加载故障。
• 正式商用场景：走官方API
  面向线上用户的正式项目，直接接入Meta官方的Instagram Basic Display API，按照平台规则合规获取用户头像等公开信息，从根源上避免触发反爬、资源访问限制，也符合平台服务条款要求。

不要尝试在前端直接写JS跨域请求Instagram CDN资源绕限制，浏览器跨域安全策略会直接拦截这类请求，而且直接外链盗用Instagram CDN资源也违反平台使用规则，有被封禁访问的风险。

内容的提问来源于stack exchange，提问作者pama