Hotlink protection for SVG using Cloudflare

[NickMNS]

As I'm sure many are aware Cloudflare offers a very simple to implement Hotlink protection as part of its Scrape-Shield features. The feature is included in the free account. But it only protects the most common image file formats.

Supported file extensions: gif, ico, jpg, jpeg, and png.

My site uses SVG extensively to create graphics, as such this feature is completely useless.

Another alternative for hotlink protection is to use workers (serverless JS web-worker located at the cloudflare nodes) to intercept requests as they come in and block the unwanted ones.
Here is the recipe proposed by cloudflare.
[developers.cloudflare.com...]

This basic recipe will block anything that has a hostname other that your own domain. This can be refined to exclude certain referrers and so on. But deploying such a solution requires a certain level of knowledge of Javascript. The big advantage of this solution over using the .htaccess file to block hotlinking is that it will block the requests before they get to your server. The other disadvantage is that there may be a cost depending on the number of requests.

The other solution I found is to use Firewall rules. I assume that this is essentially the same or similar to standard hotlink protection but it is customizable.

Here is the basic recipe I used:

http.request.method eq "GET" and http.request.full_uri contains ".svg"
and not (
 http.referer contains "www.example.com" 
 or http.referer contains "example.com" 
 or cf.client.bot
)

It blocks all GET requests for any uri containing .svg except for those that have my domain as the referrer or a included on Cloudlfare's white list of bots.
CF White List: [developers.cloudflare.com...]

Now I realize that this method is not perfect, and is in fact quite restrictive and may prevent people from sharing image through social-media (as neither FB, or Twitter on the white list. oddly Pinterest is?) but I think this approach is better than doing nothing and if issues arise I can always loosen some of the restrictions as time goes on. The nice thing about this method is that it can easily be changed with very little effort.

I just implemented this today no both my websites, I'll be watching it carefully moving forward.

Any feedback would be welcome.

[Dimitri]

Thank you for sharing it.

or a included on Cloudlfare's white list of bots. CF White List: [developers.cloudflare.com...]

There is the Pinterest bot in the white list :)

If you don't mind getting your images indexed, an alternative worth considering is embedding images directly into the web pages. At first I thought it was a bad idea, because it would make the page HTML too big, but , like for everything, nothing is better than experimenting , and I found a good compromise by combining image/webp;base64 + brotli compression over HTTP2 connection.

Another good (temporary) reason to use webp can also be that lot of automatic hotlinkers and scrappers are only looking for gif/jpeg/png files.

[NickMNS]

Embedding is a great option, I have used it before, but embedded images are not indexed in Google Image search (at least not SVG's).

[tangor]

Not using cloudfare at the moment, but thanks for the info, NickMNS!

I suspect we will all be there ... eventually.

[NickMNS]

Two weeks have gone by since implementing this. It seems to be working well here is breakdown:

- According to CF I'm blocking about 50 requests per day most of those tend to come from the same IP (that is with a 24 hour period blocked requests tend to all come from the same IP, but over the days the IP's and Geolocations are different).
- In GSC, the number of links from hotlinkers has dropped significantly. My total number of links has more than halved on my main site, on my smaller site all the links from the hotlinkers have been dropped from the report.
- I have tried to follow some of the links, and most are not displaying anything, but rather redirecting to spurious content sites. I'm not sure if this is the result of my blocking or simply part of their strategy, ie show some links for a while then redirect to spam.
- In terms of traffic, I have seen no change. Which suggest one of two things, either it is too soon to see an impact or two, Google has ignored all this cruft all along.