题记

—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每⼀天。

重要消息

精通点的可以查看这里精述 https://gitbook.cn/gitchat/author/5ae043915efcf9715e37c733

Flutter 从入门实践到开发一个APP之UI基础篇视频https://edu.csdn.net/course/detail/25543

flutter从入门到精通系列文章https://blog.csdn.net/zl18603543572/article/details/93532582

1 引言

场景描述：在APP 中使⽤webView 显示第三⽅H5, H5中涉及到微信⽀付流程，⽆法正常⽀付，提示 "商家参数格式有误，请联系商家解决"。

参照微信H5 ⽀付开发官⽅⽂档

https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_1

描述⼀

androidwebview閰嶇疆,androidwebview璋冭瘯

⼀般提示出错，我们可以先去微信商户管理平台查看配制，

https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2F

当然出错后，也不急着去商户后台去查看配制，因为在开发微信⽀付功能初期这些都是已经配制好的，当然是在其平台⽐如浏览器、Ios UIWebview 等都可以正常的调起⽀付，那说明在商户后台的配制是没有问题的，不过我们也可以再次去查看⼀下商户后台配制的具体值。

描述⼆

androidwebview閰嶇疆,androidwebview璋冭瘯

参照微信H5 ⽀付开发官⽅⽂档常⻅问题

https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4

1 引⾔

1.1 线索分析

在⽹络发⽣变动的情况会出现此提示之⼀

androidwebview閰嶇疆,androidwebview璋冭瘯

也有提到 "如果是APP⾥调起H5⽀付，需要在webview中⼿动设置referer"，具体内容如下

androidwebview閰嶇疆,androidwebview璋冭瘯

那么到这⾥，我们可以⼿动的在 Android WebView 中添加头 referer ,这个请求头

简⾔之，HTTP Referer是header的⼀部分，当浏览器向web服务器发送请求的时候，⼀般会带上Referer，告诉服务器我是从哪个⻚⾯链接过来的，服务器籍此可以获得⼀些信息⽤于处理。⽐如从我主⻚上链接到⼀个朋友那⾥，他的服务器就能够从HTTP Referer中统计出每天有多少⽤户点击我主⻚上的链接访问他的⽹站。
Referer其实应该是英⽂单词Referrer，不过拼错的⼈太多了，所以编写标准的⼈也就将错就错了

在安卓WebView中⼿动配制请求头 referer

然后再次使⽤安卓 WebView 来加载 H5 项⽬，然后发起微信⽀付，然后发起成功

分析：

当没有在Android WebView 中添加头 referer 请求头，同样的 H5 项⽬，分别在在 Android WebView 、浏览器、ios UIWebVie 中访问打开，浏览器、ios UIWebVie 中，都可以正常调起⽀付，只有 Android WebView中微信⽀付调起失败，提示商家参数格式有误

当在Android WebView 中添加头 referer（这个值对应的微信商户平台后台配制的值）请求头，再次访问同样的 H5 项⽬，再次调起微信⽀付，成功。

然后使⽤抓包⽅式进⼀步分析：

在浏览器中对其加载⽹络分析

androidwebview閰嶇疆,androidwebview璋冭瘯

然后在 Android WebView 、ios UIWebView 中加载H5 项⽬然后对 Android ios中的WebView 配制抓包代替，然后访问 H5 项⽬

androidwebview閰嶇疆,androidwebview璋冭瘯

得出结论请求头 referer 并没有丢失，然后进⼀步抓包分析得出结论在 Android ios 中加载 H5 项⽬，请求头 referer配制的信息与商户管理后台配制的⼀⾄，并没有丢失或者是配制错误（当然在ios UIWebView 能⽀付成功也可以说明）

那么问题来了，在Android WebView 中如果不配制请求头 referer 调起失败，我们需要找出原因

在 Android WebView 中没有设置 referer 请求 header 前

        mWebView.setWebViewClient(new WebViewClient() {
            @Override

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                
                //使用WebView加载显示url
                view.loadUrl(url);
                //返回true
                return true;
            }
            
            
            // Handle API 21+
            @TargetApi(Build.VERSION_CODES.LOLLIPOP)
            @Override
            public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
                ///获取请求uir
                String url = request.getUrl().toString();
                ///获取RequestHeader中的所有 key value
                Map<String, String> lRequestHeaders = request.getRequestHeaders();
                for (Map.Entry<String, String> lStringStringEntry : lRequestHeaders.entrySet()) {
                    Log.d("测试header", lStringStringEntry.getKey() + "  " + lStringStringEntry.getValue());
                }
                return super.shouldInterceptRequest(view, request);
            }
        });

然后在控制台中查看调起⽀付那⼀下请求的信息

androidwebview閰嶇疆,androidwebview璋冭瘯

对应的抓包⼯具中数据

androidwebview閰嶇疆,androidwebview璋冭瘯

分析数据得出：发起微信⽀付时 referer 丢失

https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id= 后⾯省略

然后在 Android 中⼿动配制 referer 后，H5 微信⽀付调起成功，抓包数据

androidwebview閰嶇疆,androidwebview璋冭瘯

        
        mWebView.setWebViewClient(new WebViewClient() {
        
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                
                try {
                    if (url.startsWith("http:") || url.startsWith("https:")) {
                        HashMap<String, String> lStringStringHashMap = new HashMap<>();
                        if (!TextUtils.isEmpty(mReffer)) {
                            lStringStringHashMap.put("referer", mReffer);
                            view.loadUrl(url, lStringStringHashMap);
                        } else {
                            view.loadUrl(url, lStringStringHashMap);
                        }
                    } else {
                        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
                        startActivity(intent);
                    }
                    return true;
                } catch (Exception e) {
                
                }
                //使用WebView加载显示url
                view.loadUrl(url);
                //返回true
                return true;
            }
            
            @Override
            public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
                handler.proceed();
            }
            
            
            // Handle API 21+
            @TargetApi(Build.VERSION_CODES.LOLLIPOP)
            @Override
            public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
                ///获取请求uir
                String url = request.getUrl().toString();
                ///获取RequestHeader中的所有 key value
                Map<String, String> lRequestHeaders = request.getRequestHeaders();
                Log.e("测试URI",url);
                for (Map.Entry<String, String> lStringStringEntry : lRequestHeaders.entrySet()) {
                    Log.d("测试header", lStringStringEntry.getKey() + "  " + lStringStringEntry.getValue());
                }
                if (lRequestHeaders.containsKey("Referer")) {
                    mReffer = lRequestHeaders.get("Referer");
                }
                return super.shouldInterceptRequest(view, request);
            }
        });

结论来了：在调微信 H5 ⽀付

https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb

请求头 referer 丢失。

关于 Referer 丢失的问题

⾸先 referer 是由客户端的浏览器发送到服务器上，且在客户端可以通过 document.referrer 来获取，也就是说referer的发送实际上是⼀个浏览器⾏为，发送与否的决定权是在浏览器⼿⾥。虽然这样说，但是HTTP协议对什么情况下，浏览器该发送，什么情况下不该发送有着严格的规定。

1.当⽹站使⽤refresh字段进⾏跳转的时候，⼤多数浏览器不发送referer
2.从⽤户从⼀个HTTPS的⽹站点击链接到另⼀个HTTP的⽹站时，不发送referer
3.html5中，a标签的rel = "noreferrer", 可以让浏览器不发送referer
4.使⽤Data URI scheme链接的，浏览器也不发送referer
5.使⽤Content Security Policy, 也可以让浏览器不发送referer
6.在html头部中使⽤meta标签来控制不让浏览器发送referer
7.在发起⽀付的时候 android WebView 过滤了 referer，解决⽅式就是

///在H5项目中发起支付时 
https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb

///一般可使用 但会导致 在 android WebView 中丢失referer
<script type="text/javascript">
window.location.href="https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?支付信息";
</script>

下⾯两种⽅式 android WebView 中不会丢失referer

<body>
    <form name="form"> 
    </form> 
 </body>

<scrip>
    document.form.method= "post";     
    document.form.action= "https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?支付信息 ";
    document.form.submit(); 
</scrip>

jQuery动态创建form表单提交

    var action='https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?支付信息 ' 
    var form = $("<form></form>")
    form.attr('action', action)
    form.attr('method', 'post')
    //追加到body，不显示，然后提交
    form.appendTo("body")
    form.css('display', 'none')
    form.submit()

2.2 分析⼀ HTTPS变HTTP

有时候需要在API项⽬中⽣成⼀些URL链接返回但是服务器端已经配置了⽀持HTTPS，通过HTTPS访问的时候⽣成的URL仍然是HTTP

从 HTTPS 站点跳到 HTTP 站点丢失了 Referer，反过来从HTTP到HTTPS是没问题的不会丢失 Referer

从前端请求到 API 整个都没有问题全部项⽬已经全线部署了 HTTPS , Referer 信息也有携带然后只有到最后⼀步微信的⽀付请求URL的时候 Referer 就丢失了

android webview闂 (androidwebview閰嶇疆)

1 引言

描述⼀

描述⼆

1 引⾔

1.1 线索分析

分析：

关于 Referer 丢失的问题

2.2 分析⼀ HTTPS变HTTP