前端获取微信头像 base64 数据的踩坑实践

简介: 应用场景前端生成一张图片, 一般是基于页面的内容(DOM)生成一张用于分享的海报形式的图片(例如通过 html2canvas)。不过当分享的图片要包含微信用户的头像时(图片位于 thirdwx.qlogo.cn 域名,没有转存到自己的域名下),微信用户的头像图片相当于页面是跨域的。我们如何解决此场景下获取微信头像的问题。

应用场景


前端生成一张图片, 一般是基于页面的内容(DOM)生成一张用于分享的海报形式的图片(例如通过 html2canvas)。不过当分享的图片要包含微信用户的头像时(图片位于 thirdwx.qlogo.cn 域名,没有转存到自己的域名下),微信用户的头像图片相当于页面是跨域的。我们如何解决此场景下获取微信头像的问题。


原理


想要获取图片的 base64 数据, 我们大概都知道, 需要将图片绘制到 canvas 上, 再通过 toDataURL 方法拿到 DataURL 数据, 即 base64 的图片数据。


结论与重点


  • 图片必须支持 CORS 跨域。


  • 避免触发浏览器的缓存机制。以免浏览器拿到的是缓存数据而没有携带 CORS 策略

示例


遇到的坑


1. 当加载图片时, 如果开启了 crossOrigin 机制, 服务器必须遵循 CORS 规范, 返回 Access-Control-Allow-Origin 头, 否则会被浏览器阻止(cancel)掉, 触发 onerror 回调。


由于微信头像默认加载时不会返回 CORS 规范, 只有在请求时开启 Origin 才会返回 CORS 规范的内容。


在 PC 端浏览器上如果不使用 Disable cache, 会加载图片失败, 触发 onerror 回调因此在移动端浏览器上测试会发现也是触发的 onerror 回调(因为我们在页面中先预览了一次微信用户的头像)。


如果需要解决这个问题, 可以在第一次加载微信用户头像的时候就开启 crossOrigin 机制(但不排除命中其他应用种下的缓存)。 例如: <img src="http://thirdwx.qlogo.cn/xx/132" crossorigin="anonymous">


或者再次加载图片的时候带上随机参数, 避免浏览器缓存(这个方案更稳定靠谱)。


2. 加载跨域的图片时必须让浏览器执行跨域请求(CORS)(开启 crossOrigin 机制), 否则将跨域的图片绘制到 canvas 上会导致 canvas 被污染, 执行 canvas.toDataURL 会因为安全风险而导致执行失败抛出异常。


3. 开启 html2canvas 的 useCORS 选项, 理论上就是运用 CORS 机制跨域加载图片。但受缓存的影响,生成的图片会没有微信头像。


因此可以先自行获取到图片的 base64 数据, 替换掉图片的 src 避免产生跨域的问题。另外,如果开启了 allowTaint 选项, 会导致生成图片失败。


补充


关于在 HTTPS 的页面中加载 HTTP 的内容, 我们的印象中是所有的 HTTP 的内容都会被浏览器阻止。例如我们常见的 CSS/JS/XHR 都会被浏览器阻止, 浏览器会给出 ERROR 级别的错误。


注意: 早期的浏览器版本(我测试的 chrome 12 版本), 混合的 HTTP 内容都可以加载成功, 不会被浏览器屏蔽, 只是有警告。


但事实并不是这样的, 但发现图片内容是可以加载成功的, 不会被浏览器阻止, 由此可以推断出媒体类无代码执行权限的内容(即纯用于显示的内容)是不会被浏览器阻止的, 只是给出 WARN 级别的警告信息。



在开发的过程中需要生成带微信头像的图片, 在 PC 端(因为开发习惯了使用 Disable cache)测试都是可以的, 一到移动端就不行了, 试过很多办法后无果(〒_〒 绝望了...) 突发奇想将微信头像 URL 的 HTTPS 替换成 HTTP, 发现就能够获取到 base64 的数据了, 很是诡异. 现在理清楚背后的故事, 原来是缓存在作怪, 只要不触发浏览器的缓存就能够通过 CORS 跨域机制获取到图片的 base64 的数据。


相关文章
|
11月前
|
存储 监控 安全
前端框架的数据驱动方式如何保证数据的安全性?
总之,前端框架的数据驱动方式需要综合运用多种手段来保证数据的安全性。从传输、存储、访问控制到防范攻击等各个方面进行全面考虑和实施,以确保用户数据的安全可靠。同时,不断加强安全管理和技术创新,以应对不断变化的安全挑战。
365 60
|
5月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
301 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
4月前
|
JSON 安全 定位技术
微信附近人提取v3脚本, 微信附近人id提取技术插件,采集附近人wxid数据工具
本内容介绍微信“附近的人”功能的技术原理与实现方法,基于LBS服务,涉及位置模拟、协议分析及数据解析。通过修改GPS坐标或使用Frida等工具hook位置函数
|
4月前
|
数据安全/隐私保护
陌陌头像留V的最好方法,陌陌最新留QQ号技巧,陌陌动态最聪明的留微信
本资料分享社交平台隐秘留联系方式的方法,包含微信头像艺术化处理、二维码变形术,以及QQ号谐音替换、图片分割等技巧。
|
4月前
|
存储 缓存 运维
微信读书十周年,后台架构的技术演进和实践总结
微信读书经过了多年的发展,赢得了良好的用户口碑,后台系统的服务质量直接影响着用户的体验。团队多年来始终保持着“小而美”的基因,快速试错与迭代成为常态。后台团队在日常业务开发的同时,需要主动寻求更多架构上的突破,提升后台服务的可用性、扩展性,以不断适应业务与团队的变化。
146 0
|
7月前
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
6月前
|
小程序 关系型数据库 Java
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。
|
8月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
479 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
7月前
|
SQL 算法 API
微信基于 StarRocks 的实时因果推断实践
本文介绍了因果推断在业务中的应用,详细阐述了基于 StarRocks 构建因果推断分析工具的技术方案,通过高效算子的支持,大幅提升了计算效率。例如,t 检验在 6亿行数据上的执行时间仅需 1 秒。StarRocks 还实现了实时数据整合,支持多种数据源(如 Iceberg 和 Hive)的无缝访问,进一步增强了平台的灵活性与应用价值。
|
8月前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
353 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡

热门文章

最新文章