微信H5支付在chrome浏览器调不起来

项目中有使用到微信H5支付的模块,但在有些手机的Webview调不起微信支付,我猜想这应该是跟浏览器内核有关,所以就研究了一下微信H5支付兼容的问题。

新版本的浏览器会提示

I/chromium: [INFO:CONSOLE(64)] "Unsafe JavaScript attempt to initiate navigation for frame with URL 'http://xxx.com' from frame with URL 'https://wx.tenpay.com/xxxxxx'. The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor has it received a user gesture.

I/chromium: [INFO:CONSOLE(64)] "Uncaught SecurityError: Failed to set the 'href' property on 'Location': The current window does not have permission to navigate the target frame to 'weixin://wap/pay?prepayid=1234'.", source: 'https://wx.tenpay.com/xxxxxx'

大概意思是:浏览器监测到了iframe中存在不安全的链接正在尝试进行导航。
iframe默认情况下:

在html5页面中,可以使用iframe的sandbox属性,<iframe src="https://wx.tenpay.com?prepay_id=11111">如果未添加sandbox属性,或者添加了sandbox但是后面不加任何值,就代表采用默认的安全策略,即:iframe的页面将会被当做一个独自的源,同时不能提交表单,以及执行javascript脚本,也不能让包含iframe的父页面导航到其他地方,所有的插件,如flash,applet等也全部不能起作用。简单说iframe就只剩下一个展示的功能,正如他的名字一样,所有的内容都被放入了一个单独的沙盒。

sandbox包含的属性及作用:

allow-forms 允许进行提交表单
allow-scripts 运行执行脚本
allow-same-origin 允许同域请求,比如ajax,storage
allow-top-navigation 允许iframe能够主导window.top进行页面跳转
allow-popups 允许iframe中弹出新窗口,比如,window.open,target=”_blank”
allow-pointer-lock 在iframe中可以锁定鼠标,主要和鼠标锁定有关

在iframe加上这个代码之后sandbox="allow-scripts allow-top-navigation allow-same-origin",刷新页面再测,就可以正常跳转了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容