How To Hide The Image Source Of An Html Img Tag From Web Users Using Php

I want to display a picture using html img tag, but the problem is when I click inspect on google chrome it shows me the source:

Solution 1:

A very simple, if I get your idea correctly, is to use base64:

<Imgalt="avatar"src="data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

You will hide the source (link to the avatar), but there are some tradeoffs in this case:

• increased traffic
• computing the string (serverside)

Solution 2:

Directory:

- public_html
 - images
  - foo.png

When working with URL's you do not need to directly access the file, ie:

/images/foo.png

You can use something known as a RBAC, or Role Based Access Control. The idea is that the file location is hidden, or not known to the front end user, instead its location is dynamically mapped through a database.

tbl_images
 - image_id primary key auto_increment
 - directory_location
 - permission_id

tbl_permissions
 - permission_id primary key auto_increment
 - user_id
 - can_view booleandefault0

So now what we have is a way of controlling how the front end user see's the file simply by referencing the model and using a controller:

classImage_Controller{
    publicfunctionrender($image_id) {
        $stmp = SomeDatabaseConnection::getInstance()
            ->prepare('SELECT perm.can_view, img.directory_location, img.permission_id FROM img tbl_images INNER JOIN perm tbl_permissions ON img.permission_id = perm.permission_id WHERE img.image_id = ?');
        $stmp->execute([(int)$image_id]);
        $data = (object) $stmp->fetch();
        if(isset($data->can_view) && $data->can_view) imagepng($data->directory_location);
    }
}

So as you can see from the above, assuming our user can access the image and say we have an image with the id of 1 (which the link would look something like /image?id=1) then it would gather the actual location of the image file and display it else the link is useless to the front end user because he don't have the 'permissions' to view it.

Solution 3:

It's impossible to avoid sending the image data and path to the client. There shouldn't be a problem with letting someone see the HTML source path considering you want to show them the image anyway.

All you can do is obfuscate this data transfer mechanism because at some point the browser must know the path and the image data, and if the browser must know it, the user can know it too.