This afternoon, some friends in the group and moments complained that the pictures in Gitee’s chart bed could not be opened

In this article, I https://gitee.com/Topcvan/js-notes-img/raw/master/%E5%AE%8F%E4%BB%BB%E5%8A%A1%E9%98%9F%E5%88%97.png the image, for example, Let’s recreate what happened.

Preventing hotlinking

I think, this must be suddenly added anti-theft chain, take a look at the principle of anti-theft chain:

Referer refers to the address of the source page of the current request page, which is used to determine the source of the current page. Picture anti-theft chain by judgingRefererWhether to target the site and replace the image with a forbidden logo image.

Referer is actually a misspelling of the word referrer

For example, in this gitee event, when all images on the Gitee site are loaded, the browser will add a request header to the image by default: referer: https://gitee.com/. Other sites that carry the referer header field that is not Gitee’s will return a placeholder image.

However, in general, anti-theft link pictures can be opened directly in the browser picture, because in the browser directly opened, will not carryrefererRequest header field, which is cleared by the anti-chain configuration.

If so, if on a personal website, you can bypass the anti-theft Settings by configuring all image requests without the Referer request header field through the Referrer Policy.

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

To this end, I specially made two web pages, according to the mdNICE web site pictures have been set up to prevent theft, a comparison:

  • Add the head, successfully bypassed the hotlinking prevention Settings: vercel – API. Shanyue. Vercel. The app/referrer
  • Don’t add the head, the picture is 403 access denied: vercel – API. Shanyue. Vercel. App/referrer/fo…

Oh yes, when opening two urls at this time, remember to disable caching in the browser console :(PS: add a Vary: referer to prohibit this kind of problem)

However, this doesn’t work for Gitee!

Gitee’s anti-theft measures

However, Gitee’s anti-theft measures are more stringent:

Pictures in Gitee, if they do not carry the referer, will also be processed to prevent theft

For this, I did a controlled experiment based on the referer field.

CURL cURL cURL cURL cURL cURL cURL cURL cURL cURL cURL

$ curl 'https://gitee.com/Topcvan/js-notes-img/raw/master/%E5%AE%8F%E4%BB%BB%E5%8A%A1%E9%98%9F%E5%88%97.png' \
  --compressed
Copy the code

CURL cURL cURL cURL cURL cURL cURL cURL cURL

$ curl 'https://gitee.com/Topcvan/js-notes-img/raw/master/%E5%AE%8F%E4%BB%BB%E5%8A%A1%E9%98%9F%E5%88%97.png' \
  -H 'Referer: https://gitee.com/' \
  --compressed
Warning: Binary output can mess up your terminal. Use "--output -" to tell
Warning: curl to output it to your terminal anyway, or consider "--output
Warning: <FILE>" to save to a file.
Copy the code

Screenshot below:

Replace an img SRC address with a gitee image address in the official website.

evaluation

Logically speaking, prevent leathing chain also is to avoid the resource such as the picture in the website to be embezzled in great quantities, and cause a great server charge. But Gitee has a better approach:

  1. A month’s notice and a smooth transition would not have caused such a stir
  2. The anti-theft policy is so strict that even the browser cannot open the image directly

Even if the nuggets like this, in the lower right corner to add their own watermark!