Summary of the problem of missing Referer (WeChat H5 payment)

                                                                                                               

Recently, the company has applied for WeChat’s H5 payment. The relevant payment documents can be found here https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4. Payment has been initiated after the release. Error The merchant parameter format is wrong, please contact the merchant to solve it According to the official WeChat document, the error message should be referer. So after locating it, I found that referer is lost. Record the problem-solving process.

What is Referer

HTTP Referer is part of the HTTP request header header information when the browser sends it to the web server When making a request, I usually bring Referer

to tell the server which page I am linking from, so that the server can obtain some information for processing.

For example, under the console of the Chrome browser, we can see information similar to the following under Request Headers

Provisional headers are shown
Accept: 
/
Origin: local.test5.show
Referer: local.test5.show/test/show
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36

where Referer is this attribute. The correct English spelling of

Referer is referrer. Due to spelling errors in the early HTTP specifications, it was a mistake to maintain backward compatibility

The role of Referer

Anti-hotlinking

For example, if you find that you are loading your own resources and the referer is not your own site, you can block it

Prevent malicious requests

This is the same as above

Advanced Usage

For example, WeChat H5 payment also requires this, I don’t know what they do (hhh

Referer is missing

Regarding the problem of Referer being lost, first of all, the referer is sent to the server by the client's browser, and can be obtained on the client through document.referrer, which means that the referer is actually sent It is a browser behavior, and the decision of whether to send it or not is in the hands of the browser. Although this is said, the HTTP protocol has strict regulations on the circumstances under which the browser should send it and under what circumstances it should not send it.

Summarize several situations in which Referer is lost

1. When a website uses the refresh field to jump, most browsers do not send referer

2 .When a user clicks a link from an HTTPS website to another HTTP website, the referer

is not sent. In 3.html5, the rel = "noreferrer" of the a tag allows the browser not to send the referer

4. If you use the Data URI scheme link, the browser will not send the referer

5. Using Content Security Policy, you can also prevent the browser from sending the referer

6. In html Use the meta tag in the header to control not allowing the browser to send referer

Automatically generate URL links HTTPS changes to HTTP

Sometimes it is necessary to generate some URL links in the API project Return but the server has been configured to support HTTPS, and the URL generated when accessing through HTTPS is still HTTP

Regarding this problem, it is actually the server configuration The problem is similar to the following

Returning to the WeChat payment problem I encountered, after tracking a circle of browser jumps, I found that the property was in the second case, jumping from the HTTPS site to the HTTP site, and the Referer was lost. [ps: The other way around, from HTTP to HTTPS, is no problem. Referer will be lost] It is hidden deep in the middle

Of course I didn't notice this problem at first because there was no problem from the front-end request to the API. All projects have deployed HTTPS across the board, and the Referer information is also carried. Then to the last step of WeChat The Referer was lost when requesting the payment URL.

Later I found that when requesting the API project, the API project returned a URL to the front end. This URL was generated by the back-end code according to the rules (action auxiliary in Laravel Function) There is nothing wrong with this function itself, but the generated URL link is HTTP, causing trouble again! ! !

The API project is configured with an HTTPS request but the generated URL is HTTP. The problem is here. I asked the operation and maintenance brother for assistance and finally found out that it was a problem configured in the Nginx reverse proxy.

nginx server configuration fragment is as follows :

location / {
    proxy_pass http://114.114.114.114:80;
  }

You can see that the proxy_pass parameter points to the HTTP protocol, so the URLs obtained in the background are all HTTP protocols.

Set the proxy to https://114.114. 114.114:443; The problem will be solved

Recommended: "WeChat Development Tutorial"

The above is the detailed content of Summary of the problem of missing Referer (WeChat H5 payment). For more information, please follow other related articles on the PHP Chinese website!