Reasons and anti-theft chain

Reason: Accessing a picture link provided by a third party API in the H5 project returns 403 error, but entering the URL into the browser’s search bar can be successfully accessed. Baidu after some time, to understand that is the third party picture links to do anti-theft chain processing.

Anti-theft: The rule of anti-theft is to judge the referer information in the request first, and if the source of the request is not in the white list, return 403 or the corresponding processing (redirect to another image, etc.). Common configurations in nginx are as follows:

The location ~ * \. (GIF | JPG | jpeg | PNG | BMP | SWF | FLV) ${valid_referers none blocked domain name/IP; If ($invalid_referer) {rewrite ^/ https://xxxxx/404.png; # 403 return; }}Copy the code

The solution

There is a problem must be solved, so I baidu again after some success to find a solution.

Method one:

Just add the following code to the HTML head:

<meta name="referrer" content="no-referrer" />
Copy the code

Here are some values of Referrer-Policy in MDN

The title meaning
no-referrer The entire Referer head will be removed. Access source information is not sent with the request.
no-referrer-when-downgrade With the same level of security, the address of the referenced page is sent (HTTPS->HTTPS), but not in degraded cases (HTTPS->HTTP).
origin In any case, send only the source of the file as the reference address. For example,example.com/page.htmlwillexample.com/As a reference address.
origin-when-cross-origin For same-origin requests, the full URL is sent as the reference address, but for non-same-origin requests only the source of the file is sent.
same-origin A reference address is sent for same-origin requests, but no reference address information is sent for non-same-origin requests.
strict-origin With the same level of security, the source of the sent file is used as the reference address (HTTPS->HTTPS), but not in degraded cases (HTTPS->HTTP).
strict-origin-when-cross-origin For same-origin requests, the full URL is sent as the reference address; With the same level of security, the source of the sent file is used as the reference address (HTTPS->HTTPS); Do not send this header in degraded case (HTTPS->HTTP).
unsafe-url For both same-origin and non-same-origin requests, send the full URL (with parameter information removed) as the reference address.

More detailed documentation: Referrer-Policy

After setting the above code, you can access the image link successfully (hey hey, really easy).

Just when I thought the problem was solved perfectly, “The merchant parameter is wrong, please contact the merchant to solve it” appeared in the wechat payment of the project. It can be seen from the wechat payment document that the referer of h5 payment was empty, as shown in the figure:

Therefore, global meta cannot be used to access anti-theft images. We can set the referrer of a single tag to achieve this:

<img referrer="no-referrer|origin|unsafe-url" src="{{src}}"/>
Copy the code

Note that this method does not support GIF images and can only display static images.

Method 2:

Proxy images, using images.weserv.nl, so you can access images elegantly.

GetImage (url){// Pass in the current image link, return an unrestricted path if(url! == undefined){ return url.replace(/^(http)[s]*(\:\/\/)/,'https://images.weserv.nl/? url='); }}Copy the code

Images.weserv.nl is a website that can cache, direct link Google, Drive, OneDrive and other Images using CloudFlare’S CDN. At the same time, it released such source code, which can be created by itself, used for image storage, etc. Support IPv6.

Image. Weserv. Nl document

Image.weserv.nl open source address

conclusion

Happy Dragon Boat Festival!