小程序与移动端图片上传那些事

2022年7月14日,深圳一场绝世晚霞突然出现,而随手拍的一张照片上传到相册,却发现了一些问题,于是回来继续研究,顺便对相册的文件上传做个踩坑总结。

图片上传在各种程序开发中是一个再常见不过的需求。PC端由于对文件管理比较专业和成熟,一个 <input file> 直接搞定,但在移动端,却变得复杂起来。主要来说:第一是格式增多,兼容性难保证,各厂家均有自己的转换思路。第二是出于隐私保护,索性抹去了 EXIF。即刻相簿在做这件事情的时候也是不断的摸索中前进,被坑过数次。

对于相册程序而言,我们需要的是“完整”的“原图”,这里有两层含义,第一是包含完整的 EXIF 信息,从而绘制出带相机型号以及拍摄参数的分享图,第二是未经格式转换和机内后期的原始图像,尽可能的保存原始数据,当然,这一点倒影响其次。

即刻相簿是一个以微信小程序为主的相册,自然首先用到的是微信官方提供的上传功能,即 wx.chooseImage() 和 wx.chooseMedia() 很不幸的是这两者均不能满足要求,均抹去了 EXIF,转换成了 JPG,视频经微信压缩,画质掉渣到不可接受。

后来采用内嵌 webview,通过 H5 页面来实现上传,这样 file 的选择权就完全交由手机系统来决定,随后的测试中发现,在 iOS 系统中,相机拍摄格式中选择了“高效”,即 HEIF 格式时,上传时依然会转换成 JPEG,并抹去 EXIF,但拍摄 ProRAW 格式在自动转换 JPEG 的时候又能保留 EXIF,拍摄格式选择“兼容性最佳”,同样也能保留 EXIF,真是迷之操作。

(iOS 似乎在自动转换的过程中存在 Bug,将方向6转换成1的过程中没有更改宽高像素,导致画面比例错误。在选择照片中选择大、中、小,会丢失方向,竖拍图直接横着显示。前者解决办法判断宽度是否小于高度,竖拍一般宽度小于高度,后者基本无解,估计没多少人会去选大小吧)

既然是 webview,也想过能否在前段通过 JavaScript 来预先获取 EXIF,于是使用了 exif-reader.js 来读取 EXIF,很不幸测试结果中和上述表现一致。很好理解,因为在选择文件那一刻,就已经转换一个临时的 JPEG,开发者侧是无法感知这一过程。

另外有趣的是,手机上将 HEIF 图片通过分享存储到“文件”中,再在上传页面选择“选取文件”找到刚才的文件,是可以上传原始的 HEIC 格式文件并且保留了完整的 EXIF。

综上所述,即刻相簿也提供了PC端上传方式,来避开这些“限制”,以上测试基于 iPhone 13 Pro 系统 iOS 15.5。看来迟早得上 native app。

密钥安全那些事

借着此次上海公安数据库疑似泄密事件,好好梳理下项目中是如何确保密钥安全。密钥大多指 Key-Value 键值对、公私钥、Token 等,从早期的代码中硬编码,到配置文件硬编码,再到各种的配置中心的诞生,例如:携程 Apollo 或者 HashiCorp Vault。不断的演变进化中,安全性与灵活性也极大的提高。

硬编码时代:密钥控制权将完全由开发者决定,一旦代码泄露则密钥也一并泄露,即便泄露不是源代码,而是编译后的 Class 文件,Jar、War 包等也是可以轻松反编译得到源码,所以是最不可靠的方案,实际项目中应绝对禁止,且应在 CI 流程中加入 Checkmarx SAST 检测告警,以避免疏忽大意而导致泄露。配置文件只可存放用于测试的配置,例如连接本地数据库的用户密码,在 CI 流程中进行动态替换,这样一来,密钥则可交由运维人员来管理,与开发者完全隔离。

微服务时代:随着配置项的增多,管理职权分离后,密钥如何存储,更新,授权,管理等一些列问题也孕育而生。携程 Apollo 则是一个较好的解决方案,目前也是国内项目大多数的选择。自身的稳定性,灵活性都还做的不错,有着不错的 Web UI,与 Spring Boot 集成也非常简单。

云原生时代:随着 Kubernetes 的加入,DevOps 发生了较大的变化,对容器而言,推荐使用 Secret 和 ConfigMap 来存放密钥和键值对。同时众多角色的加入,如何安全存放密钥、安全使用密钥以及更好的与基础平台整合,对密钥管理又提出了更高要求。HashiCorp Vault 则是不二之选,通过一套复杂的加密机制可以确保在公有云上能够安全的存储机密信息,且支持密钥轮转,在 CD 流程中拉取密钥挂载到容器中使用,对服务来说可以做到完全透明,缺点是无法实时更改。

当然除了密钥需要正确保管外,环境有效隔离才是最后一道屏障,面对层出不穷的数据泄密事件,无论是有意还是无意,黑客行为,或许应该思考本身是否有必要收集和存储?去中心化的互联网架构或许是未来的出路?

docs:

https://www.vaultproject.io/docs/what-is-vault