Matte
Matte

Reputation: 279

PHP: set image as background without revealing path

The following problem I can't really wrap my mind around, so really if you guys can't be bothered to supply the entire code some tips leading in the right direction would be great!

So, I have a script where users can upload images to a server. PHP takes care of validating the file and saving it using a new filename in another folder, neither known by the client. Now, the client should be able to see the uploaded image, in html simply:

style="background-image:url('testimagegif.gif');

But preferably the client should not be able to see the path nor the file name of the image saved on the server. I know about using header('Content-type: ... for forcing the client browser to download files, but I do not see how this, nor any similar solution could be applied to this case. Same goes for readfile. If I use it the browser simply downloads the image, not placing it in the html.

Upvotes: 0

Views: 738

Answers (4)

Toby Jackson
Toby Jackson

Reputation: 947

There are two options for this, you could use the data protocol, which would embed the whole image into the URL of the background ( this isn't recommended if the image is bigger than a few kb. ) or you can use a script to present the image by encoding or recording a unique key for the image, eg bg.php?id=4323-34442-3432-4532 which checks a db for the id to retrieve the file path then echoes the content with the right content type.

Some examples;

based on the Data URI wikipedia page

Data URI Method

Assuming a function like this;

 function data_uri($fileID) {
     $fRecord = mysql_fetch_array(
         mysql_select("SELECT filePath, mimeType from fileTable WHERE fileID = " $fileID . ";")
     );
    $contents = file_get_contents($fRecord['filePath']);
    $base64 = base64_encode($contents);
    return "data:$fRecord['mimeType'];base64,$base64";
}

Then in your html/php page you'd have the following snippet

style="background-image:url('<?php echo data_uri($fileID);?>'

PHP Image Dump

Assuming a function like this;

// Given a filename and a mimetype; dump the contents to the screen
function showDocumentContent($fileID){
     $fRecord = mysql_fetch_array(
         mysql_select("SELECT filePath, mimeType from fileTable WHERE fileID = " $fileID . ";")
     );
    header( 'Content-Encoding: none', true );       
    header( 'Content-Type: ' . $fRecord['mimeType'], true );
    echo readfile( $fRecord['filePath'] );
}

Then in your html page you'd have this;

style="background-image:url('image.php?fileID=123')

In the first case, images larger than a few KB will result in equally large HTML pages, and may not be supported in browsers consistently. In the second case, you'd effectively have created a php script that is pretending to be an image. In both cases, the real path to the binary files on your server is abstracted away by storing a mapping in a database.

Upvotes: 2

Ben Graham
Ben Graham

Reputation: 2099

You must expose some path to the client, because their browser has to access the file. You can use your webserver config to serve at an indirected location, or serve the image with PHP and have the real path in a call to readfile()

Upvotes: 0

gcochard
gcochard

Reputation: 11744

If you store the paths to the files somewhere like a database or a file, you can use readfile() to output the file once you retrieve the path.

Combine that with the content-type header, and set the background-image URL to the PHP script with the correct query string like so:

style="background-image:url('script.php?img=30382');"

Upvotes: 1

CAMason
CAMason

Reputation: 1122

You should probably be moving the files into a publicly readable folder on your webserver if you want to serve them.

Otherwise, you'll need something like readfile()

Upvotes: 2

Related Questions