js: how to hide/crypt the src of the image?

Question

I am looking for a way to hide/crypt the image src. It is a quiz game and image name contains the solution ex: <img src="solution.jpg">

Solution would be to encode64 the image, but this is quite heavy solution. Suggestion does not have be to 100%secure, just avoid showing clearly the "solution.jpg" src

What are you trying to achieve? Either your users cheat and then you need server protection, or they don't cheat and then you don't need to hide location of the image. Obscuring the location is a waste of time. — Tomáš Zato, May 05 '16 at 07:47
how can you know if the users "either cheat or don't"... It's obvious that the OP wants a basic protection against not advanced users, but such that know how to see the source of the image. My wonder is why don't you just give the images a different name and get the answer when you need it from the database (or just a json file) by the code name of the image? — Velimir Tchatchevsky, May 05 '16 at 07:54

score 1 · Accepted Answer · answered May 05 '16 at 07:42

Best solution is to store the file path in database and serve it on request. An example using php would be

HTML

<img src="get-image.php?id=2653" />

PHP

// get image path from database
...

// output 
header("Content-type: image/jpeg") // change format accordingly
header('Content-Length: ' . filesize($filepath));
ob_clean();
flush();
readfile($filepath);
die();

score -1 · Answer 2 · answered May 05 '16 at 07:43

I know it's not php question but you can create php script that will read the file based on md5 hash. On the beginning of your main script you save hash in session:

session_start()
$time = array_sum(explode(' ', microtime()));
$_SESSION['hash'] = md5($time);

and in php script that you use for image

<img src="script.php?hash=<MD5 HASH>"/>

you check if $_GET['hash'] is equal to value from session:

session_start();
if (isset($_GET['hash']) && isset($_SESSION['hash']) &&
    $_GET['hash'] == $_SESSION['hash']) {
    header("Content-type: image/jpeg");
    echo file_get_contents('your hidden image.jpg');
}

How is it a wrong approach, rather than just not optimal? – Velimir Tchatchevsky May 05 '16 at 07:58 — Velimir Tchatchevsky, May 05 '16 at 07:58

js: how to hide/crypt the src of the image?

2 Answers2