How to redirect if user direct access to image file by browser?

How do I redirect if a user tries to direct access image files from browser only?

How to redirect from

https://img.example.com/c/600x1200_90_webp/img-master/img/2022/01/03/08/04/54/95259215_p0_master1200.jpg

to

https://example.com/detail?id=95259215

The filename will always be different but it will always have _p0_master1200.jpg at the end so I want that trimmed off.

Greetings,

Thank you for asking.

If example.com is your domain name and using Cloudflare, and if you have got a hostname (DNS record) A img which is proxied and set to :orange: you can achieve this by using Cloudflare Page Rules and “Forwarding URL - 301 Redirection”.

See the example on the screenshot from below:

2 Likes

I think OP is asking about hotlink protection.

To protect image resources from being accessed directly or from being used on other websites. I think he wants to be able to use the images in web pages but not allow people to open the images in a new tab directly.

OP, please confirm what your question is.

Yes I want to protect image from being accessed directly so I would want it to redirect to where the image is embedded

2 Likes

First, remove the incorrect solution you have marked because this thread will not get attention if people think it’s already solved.

Second I’d ask why you are wanting to prevent your images from being accessed directly? I don’t ask to discourage you from implementing “Hotlink Protection” but rather to ensure we are creating the right solution for your problem.

There are a few ways to accomplish Hotlink Protection so if you can first give me detailed information about all scenarios that you want Hotlink Protection for.

Please quote my questions below with your answers:

Q: I want to prevent people from downloading & republishing my website images. (yes/no/other)

Q: I want to allow some images (for example my logo image) to be used on websites. (yes/no/other)

Q: I want to allow Google, Bing, and other search engines to include my images in the Image Search results. (yes/no/other)

Q: I want to allow people on my website to right-click open image in new tab. (yes/no/other)

Q: When somebody opens an image link from an external website (including Google), I want my website to show them another page instead of the image (keep URL), or redirect them to another page (change URL)

It can be marked as solution by an MVP also , How can you come to a conclusion he marked it as a solution

That is only a small remark to OP so that their question gets attention. If it was indeed marked as solution by an @MVP incorrectly then an MVP can also edit my comment to remove the that remark. Please do not confuse the matter with unnecessary comments aside from the question.

Tagging an MVP without a Proper Reason is Wrong

Oh , You never did that Right ? :dotted_line_face:

Yes

Yes

Yes

Yes

Redirect them to another page

Sorry about the delay, I didn’t see your response until now.

I have 2 more questions.

What is the reason for these requirements for hotlink protection? (Photography business, designer, what)

What software are you using on your website? (e.g. WordPress).

Thanks :+1:

@user2765

To redirect traffic to where the image is originally embedded so they can see more info about the image.

VueJS

I have being having a play with this using (what is apparently my Swiss Army knife) a combination of URL Rewrite Transform Rules and a Page Rule. I think you need to be on a Business Plan for this to work, as you need Regex Capability

In the Transform Rule, match something like this:
(not http.referer matches "^https://example.com" and http.request.uri.path matches "^/c/(.*)_p0_master1200.jpg$")
With a Dynamic Path Rewrite like this:
regex_replace(http.request.uri.path, "^/c/(.+)_p0_master1200.jpg$", "/img/${1}")

Then a basic Page rule to match https://example.com/img/* forwarding to https://example.com/detail?id=${1}

On my test domain I get these results:

% curl https://example.com/c/95259215_p0_master1200.jpg --silent -H "Referer: http://example.net" -o /dev/null --dump-header - 
HTTP/2 404

~ % curl https://example.com/c/95259215_p0_master1200.jpg --silent -H "Referer: https://example.com" -o /dev/null --dump-header -
HTTP/2 301
location: https://example.com/detail?id=95259215

You will obviously need to adjust the path matching and regex to match your situation.

1 Like

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.