How to add HTML data to image?

[Guest]

I have seen sites like Tenor GIF use this to Protect images, when you Open the image URL (https://media1.tenor.com/images/9e3a0083a37d03274c0f733fbcf389ba/tenor.gif) Looks like an image, but it has HTML also baked in, 

 

 

How is it done? I would assume some form of javascript or Node?

[Ominous]

You've got it the wrong way around, they're just serving a normal page with an image on it.  "/9e3a0083a37d03274c0f733fbcf389ba/tenor.gif" are just route parameters which are being added to an <img> element:

I'm guessing media1.tenor.com points to an NGINX server which only serves static content.

[badreg]

9 hours ago, Souffle said:

You've got it the wrong way around, they're just serving a normal page with an image on it.  "/9e3a0083a37d03274c0f733fbcf389ba/tenor.gif" are just route parameters which are being added to an <img> element:

I'm guessing media1.tenor.com points to an NGINX server which only serves static content.

By default, a GET request to "/images/9e3a0083a37d03274c0f733fbcf389ba/tenor.gif" returns an HTML page, which sends another GET request with different request headers to the same URL, which returns the image itself.

 

First request and response:

:authority: media1.tenor.com
:method: GET
:path: /images/9e3a0083a37d03274c0f733fbcf389ba/tenor.gif
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9

................

content-length: 2180
content-type: text/html; charset=utf-8

Second GET request and response:

:authority: media1.tenor.com
:method: GET
:path: /images/9e3a0083a37d03274c0f733fbcf389ba/tenor.gif
accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8

................

content-length: 3119003
content-type: image/gif

There is definitely something server side going on. Removing text/html from the Accept request header will return the gif immediately when loading the image URL directly. curl (which uses Accept: */* by default) will also return the gif.

 

It seems that the server is exploiting the fact that all modern browsers have "text/html" in the headers by default, and simply uses this as a check. If the Accept header contains this string, it means that the request was initialized via the address bar of the browser or via an HTML <a> element, so the server returns an HTML page to the user. The second request was initialized through an <img> element, which has different default Accept types, and the server returns the actual image.

[maplepants]

@badreg is 100% right about what's happening here. Many web developers, especially ones whose main work focuses on UI design, can get so use to nginx and apache web servers that it feels like all a webserver really does is troll a directory and server up files.

 

However, that's just one way webservers can work. Take a look at this python webserver(https://pythonbasics.org/webserver/), it's super bare bones and building up a basic website out of a python3 webserver is, in my opinion, a great way to improve your understanding of how webservers work.