支持跨域请求和忽略证书错误的移动端浏览器

背景

对于前端开发者,通过参数 --disable-web-security 启动桌面版 Chrome “跨域浏览器”模式,可以说是再熟悉不过的日常操作。

那么有没有可能在手机浏览器中也实现同样的效果?更好的是,能够同时支持安卓和苹果手机系统。好消息是,经过一个周末的努力,跨时空App 已支持这一特性。新版本近期提交审核,目前可安装苹果内测版(TestFlight)和安卓开发版本进行体验。

应用场景

安全测试,生产问题排查,开发调试,后台管理系统,web小工具。

风险提示

同源策略和SSL证书验证,无疑是实现浏览器安全的重要基石。犹如牛顿三定律之于现代物理学。提供此功能仅用于学习和方案可行性探索,使用即表示已知晓潜在风险,勿用于生产用途!

验证方式

通过 PC 浏览器访问测试链接 t.kainy.cn/cors-demo

我们会跳转到 jsbox.kainy.cn 域下的代码调试页面,在这里可以方便的编辑想要执行的 js 语句,并查看运行结果。

通过截图左上方的代码可以看出,在这个页面发起两个请求,分别请求 URL https://gitee.com/robots.txthttps://httpbin.org/anything ,并将数据输出到左下方的控制台。

在截图右边,是我们熟悉的“开发者工具”。通过网络面板看到,https://gitee.com/robots.txt 请求被同源策略拦截了,而 https://httpbin.org/anything 请求由于设置了 CORS 允许,正常返回结果。这里说明一下, httpbin 是一个 HTTP Request & Response Service ,你可以向它发送请求,然后它会按照指定的规则返回响应,/anything 的意思是,返回 httpbin 服务器所接收到本次请求的所有信息。

再看截图左下角,只输出了 httpbin 返回的信息,而 gitee 的请求由于被拦截了,没有被输出。后续在 跨时空App 中访问,有输出 gitee 的信息,说明绕过同源策略成功。

通过 跨时空App 测试页面

为方便访问,将测试页 URL 生成如上二维码,使用 跨时空App 扫码访问。

在截图下半部分可以看到,两个接口请求都有返回信息。gitee 的请求返回内容和直接访问 https://gitee.com/robots.txt 读取的一致,你也可以修改成其他链接试试。修改后点击右上角“运行”按钮即可。

忽略证书错误

打开 https://badssl.com 链接,访问截图部分的链接即可验证。测试页列出了各种证书错误的场景,普通浏览器无法打开,而关闭证书校验的 跨时空App 则畅通无阻。

对于证书错误的网页,我们可以通过点击“仍然访问”,继续访问。但如果 cdn 域名证书或者接口域名证书错误,则需要一一访问域名,并点击“仍然访问”,这种情形下忽略证书报错就特别有用。

实现方式

对于 webview 中跨域请求被拦截的问题,为了尽可能少影响到正常的请求,只有在检测到 webview 中跨域失败的情况时,才将请求参数传递给 App ,调用原生方法,发起 http 请求。原生方法不存在跨域限制,从而达到绕过限制的目的。在 跨时空App 中,识别原生请求也很容易,当页面中间出现若隐若现的菊花在转圈,说明是原生请求正在工作。

忽略证书错误则比较简单,直接改 webview 的初始化配置即可。

UI 和功能微改进

除了以上两个对于开发调试比较有用的特性外,跨时空还有不少基于自己的理解和使用习惯而做的改进。总的来说,跨时空浏览器就是基于最基础的 webview 做加法,将最常用的功能集成进来,改进原则是“足够用,尽量少”,从而确保没有非必要的功能和性能拖累。

举几个例子:

  • 取消地址栏 —— 就我自己使用手机浏览器的情况来看,直接在地址栏编辑 URL 的时候少之又少。如果在电脑旁,直接通过桌面浏览器构建好,并访问确认,然后生成二维码,手机扫码会更高效;如果不在电脑边,一般也是复制出网址,到备忘录或其他 App 进行多行编辑,再粘贴回浏览器访问 —— 在单行地址栏里编辑总觉得束手束脚。基于这个使用习惯,跨时空将扫码按钮放在全局的右上角位置,以及长按桌面图标的菜单里,方便触达。同时,在 App 切换到前台时,解析剪贴板内容,如果是网址,则弹窗确认是否访问,同时提取网页信息展示。

  • 网页信息预览弹窗 —— 通过扫码,或者剪贴板解析到网址,并不会直接通过 webview 打开网址,而是弹窗展示从 URL 落地页中解析出来的信息,如 URL 、网页标题、简介、缩略图。这样的好处是:在实际访问前,大致了解所访问网页的情况,毕竟肉眼几乎无法从二维码中识别到任何信息。另外,对于重定向的网址,也可以复制到原始链接,而不是跳转后的页面链接。

  • 下载功能 —— webview 不自带下载功能,需要自己实现。跨时空的处理是:判断到下载操作后,提示确认是否唤起系统默认浏览器完成下载,因为下载功能的实现涉及网络和文件操作等流程,尤其是大文件下载,各种麻烦。这种低频,但又必须的功能,就交给系统自带浏览器来处理。

  • 多标签页模式 —— 测试过程中发现安卓手机,webview 中通过 js 方法 window.open 打开新窗口时,在 onCreateWindow 中获取到的 URL 是 null 。解决方法是,启动一个无头 webview ,使用 onLoadStart 监听 URL 变化,非 “about:blank” 则为真实的 URL,这时候再启动主浏览进程。

此外 H5 中 App Scheme 链接的跳转,定位权限的获取,都需要自己实现,这里不多展开。

交流反馈群

有更好建议,或者使用中遇到问题,都欢迎留言或加群讨论 😄

跨时空APP交流群

附:chrome mobile 开启跨域的方法

网上找到的一个方法,有兴趣可以试试。用到了 adb ,目测只支持安卓手机。

创建chrome-command-line文件

创建一个文件,编辑:

chromium-browser --disable-web-security --user-data-dir="/data/user/0/com.android.chrome/app_chrome/Default"

将文件导入手机

通过adb命令,将上述4步骤创建的文件推送到手机 /data/local/tmp目录下。

adb push 路径/chrome-command-line /data/local/tmp

chrome浏览器设置

浏览器访问 chrome://flags ,开启 enable-command-line-on-non-rooted-devices 设置。手动从设置里面强行停止应用后重新启动。
随后访问 chrome://version ,查看命令行,看是否出现命令:--disable-web-security 若出现则代表ok了。

分享到:

评论完整模式加载中...如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理