我今天想到一个用图片传递数据的另类应用场景,分享给大家。

在Android系统中,很多App为了在网页里实现一些客户端的功能,往往会在客户端开启一个本地HTTP服务。通过在网页中调用这个服务的不同接口,可以轻松实现原本无法实现的功能。本文不讨论这种做法本身,只说存在的问题:随着越来越多Web产品升级到HTTPS,通过JSONP或XHR2与HTTP服务交互就行不通了。

现代浏览器(Chrome、Firefox、Safari、Microsoft Edge),基本上都遵守了W3C的Mixed Content规范,将Mixed Content分为Optionally-blockable和Blockable两类:

Optionally-blockable类Mixed Content包含那些危险较小,即使被中间人篡改也无大碍的资源。现代浏览器默认会加载这类资源,同时会在控制台打印警告信息。这类资源包括:

  • 通过标签加载的图片(包括 SVG 图片);
  • 通过 <video> / <audio> 和 <source> 标签加载的视频或音频;
  • 预读的(Prefetched)资源;
    除此之外所有的 Mixed Content 都是 Blockable,浏览器必须禁止加载这类资源。所以现代浏览器中,对于 HTTPS 页面中的 JavaScript、CSS 等 HTTP 资源,一律不加载,直接在控制台打印错误信息。

Android 各版本的 Chrome,Android 5+ 的 Webview 都遵守了 Mixed Content 规范。也就是说除非将本地 HTTP 服务升级为 HTTPS,否则在 HTTPS 网页中通过 JSONP 或 XHR2 调用本地服务,默认都会被阻止。就像这样:

1584632576(1).jpg

而且,这个问题解决起来并不容易:

  • 本地 HTTP 服务目的是为了在不可控浏览器中实现一些特定功能(可控浏览器直接注入 JS 接口即可),也就意味着无法通过修改浏览器安全设置绕过这个问题;
  • 本地 HTTP 服务使用的是本地 IP(如 127.0.0.1),无法通过 CA 申请合法证书;
  • 如果自己签发证书,需要 root 权限修改系统受信任证书列表,否则不被信任照样会被拦截;
  • 使用解析到本地 IP 的公开域名,可以解决证书合法性问题,但这么做需要把证书私钥内置在客户端,风险很大;
  • 这个问题也无法通过服务端代理中转来解决;
    那么,有没有其它数据交互方案可以绕过 Mixed Content 限制呢?显然,图片类 HTTP 资源属于 Optionally-blockable 类 Mixed Content,现代浏览器默认不阻止他们加载,只会在控制台打印警告,地址栏不显示小绿锁而已,可以好好利用。

所以,网页端单向通知 App,不需要拿返回值时,直接把本地接口请求改用 Image 发送即可。

如果需要返回值,那就可以用我之前的方案将文本编为图片,成功加载后解码图片即可还原内容。这里要注意一点:给图片响应配置 CORS 头之后(并且在请求图片时加上 img.crossOrigin = '*'),才能在 Canvas 中读到它的像素点数据。

标签: none

添加新评论