Validating base64 encoded images

Question

I'm building an application that allows the user to POST HTML5 canvas data that is then encoded in base64 and displayed to all users. I am considering parsing the data into an actual .png file and storing on the server, but the base64 route allows me to store the images in a database and minimize requests. The images are unique, few, and the page won't be refreshed often.

A bit of jQuery will take the canvas data, data:image/png;base64,iVBORw... and passes it along to a PHP script that wraps it like so: <img src="$data"></img>

However, security is cornerstone and need to validate the base64 canvas data to prevent passing malicious data in the POST request. My primary concern is to prevent external URLs from being injected into the <img> tag and being requested on page load.

I currently have a setup like this:

$data = (isset($_POST['canvas']) && is_string($_POST['canvas'])) ? $_POST['canvas'] : null;
$base = str_replace('data:image/png;base64,', '', $data);
$regx = '~^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)$~'

if ((substr($data, 0, 22)) !== 'data:image/png;base64,')
{
  // Obviously fake, doesn't contain the expected first 22 characters.
  return false;
}

if ((base64_encode(base64_decode($base64, true))) !== $base64)
{
  // Decoding and re-encoding the data fails, something is wrong
  return false;
}

if ((preg_match($regx, $base64)) !== 1) 
{
  // The data doesn't match the regular expression, discard
  return false;
}

return true;

I want to make sure my current setup is safe enough to prevent external URLs from being inserted into the <img> tag, and if not, what can be done to further validate the image data?

Remember that getimagesizefromstring (https://www.php.net/manual/en/function.getimagesizefromstring.php) encodes the string you pass it INTO base64, so if you pass it an already encoded string, it will return false. If your image data is already base64 encode, you need to use base64_decode (https://www.php.net/manual/en/function.base64-decode) on the string before passing it to getimagesizefromstring. — wuijin, Oct 12 '20 at 22:48

score 31 · Accepted Answer · edited Jan 23 '13 at 19:04

31

One way of doing this would be to actually create an image file from the base64 data, then verify the image itself with PHP. There might be a simpler way of doing this, but this way should certainly work.

Keep in mind that this only really works for PNGs, you'll need to add some logic if you're planning on allowing more file types (GIF, JPG).

<?

$base64 = "[insert base64 code here]";
if (check_base64_image($base64)) {
    print 'Image!';
} else {
    print 'Not an image!';
}

function check_base64_image($base64) {
    $img = imagecreatefromstring(base64_decode($base64));
    if (!$img) {
        return false;
    }

    imagepng($img, 'tmp.png');
    $info = getimagesize('tmp.png');

    unlink('tmp.png');

    if ($info[0] > 0 && $info[1] > 0 && $info['mime']) {
        return true;
    }

    return false;
}

?>

edited Jan 23 '13 at 19:04

Eric L.

3,232
2
22
20

answered Sep 30 '12 at 04:55

thewebguy

1,510
10
15

This worked great! Accepted. `imagepng` will throw `supplied argument is not a valid Image resource` if the image data is not valid, so I wrapped that function in an `if` statement to catch it if it fails. – ssh2ksh Sep 30 '12 at 20:42
You can use `imagecreatefrompng($base64)` if return false, means not image – Milad Ghiravani Nov 06 '16 at 14:40
Note that you have to remove "data:image/png;" from the beginning of your base64 code before using this function. – The Godfather Aug 22 '18 at 16:26
2

I stumbled upon this answer from doing a code review. Please don't use this in a production environment, as it is highly unsafe. You should *never* use one of the `imagecreate` functions on unknown data as it allocates a bitmap buffer for the entire image. It is very easy to create small png files of 100+MP that will ruin your day. Instead, write the image to a temp file and call `getimagesize` on it. (with the caveats noted here: https://php.net/getimagesize) If you have to allocate an image, then just use `imagesx` and `imagesy` to query the dimensions directly. – Bert Peters May 16 '19 at 12:49

curiosity26 · Answer 2 · 2017-01-04T16:03:57.427

5

If you're using php 5.4+, I've revised the above to be a bit more concise.

function check_base64_image($data, $valid_mime) {
    $img = imagecreatefromstring($data);

    if (!$img) {
        return false;
    }

    $size = getimagesizefromstring($data);

    if (!$size || $size[0] == 0 || $size[1] == 0 || !$size['mime']) {
        return false;
    }

    return true;
}

edited Jan 04 '17 at 16:03

answered Jan 04 '17 at 15:52

curiosity26

151
2
4

3

Like it. Couple of notes... A) the `$valid_mime`argument appears to be redundant, and B) this requires the GD library to be installed - on Ubuntu: `sudo apt-get install php5-gd && sudo service apache2 restart` – John Rix Mar 03 '17 at 00:03

score 3 · Answer 3 · answered Jul 18 '14 at 10:29

function RetrieveExtension($data){
    $imageContents = base64_decode($data);

    // If its not base64 end processing and return false
    if ($imageContents === false) {
        return false;
    }

    $validExtensions = ['png', 'jpeg', 'jpg', 'gif'];

    $tempFile = tmpfile();

    fwrite($tempFile, $imageContents);

    $contentType = finfo_file(finfo_open(FILEINFO_MIME_TYPE), $tempFile);

    fclose($tempFile);

    if (substr($contentType, 0, 5) !== 'image') {
        return false;
    }

    $extension = ltrim($contentType, 'image/');

    if (!in_array(strtolower($extension), $validExtensions)) {
        return false;
    }

    return $extension;
}

score 3 · Answer 4 · edited May 23 '17 at 12:18

Since I don't have enough points to comment, I am posting an updated version of thewebguy's code. This is for people hosting on services such as Heroku where you can't store images.

The credit for pointing out stream wrapper to Pekka (Pekka's answer)

This code assumes you implement the class and stream wrapper from: PHP Example on Stream Wrapper

<?

$base64 = "[insert base64 code here]";
if (check_base64_image($base64)) {
    print 'Image!';
} else {
    print 'Not an image!';
}

function check_base64_image($base64) {
    $img = imagecreatefromstring(base64_decode($base64));
    if (!$img) {
        return false;
    }

    ob_start();
    if(!imagepng($img)) {

        return false;
    }
    $imageTemp = ob_get_contents(); 
    ob_end_clean();

    // Set a temporary global variable so it can be used as placeholder
    global $myImage; $myImage = "";

    $fp = fopen("var://myImage", "w");
    fwrite($fp, $imageTemp);
    fclose($fp);    

    $info = getimagesize("var://myImage");
    unset($myvar);
    unset($imageTemp);

    if ($info[0] > 0 && $info[1] > 0 && $info['mime']) {
        return true;
    }

    return false;
}

?>

I hope this helps someone.

score 3 · Answer 5 · edited Sep 19 '19 at 16:50

3

$str = 'your  base64 code' ;

if (base64_encode(base64_decode($str, true)) === $str && imagecreatefromstring(base64_decode($str))) {
    echo 'Success! The String entered match base64_decode and is Image';
}

edited Sep 19 '19 at 16:50

Nitesh

165
2
2
12

answered Oct 21 '17 at 12:50

Mahdi Bashirpour

17,147
12
117
144

6

Please explain your solution and explain it, especially since the question is 5 years old – Sentry Oct 21 '17 at 13:30

score 3 · Answer 6 · answered Aug 18 '18 at 17:56

hello guys you can validate base64 encode image code using getimagesize() function just use the given below code:

<?php
$array=getimagesize("data:image/gif; base64 , '.base64_encode('any file').'");
$e=explode("/",$array['mime']);
if($e[0]=="image")
{
echo "file is image file" ;
}
?>

*replace any file with any file source that of you want base64_encode code

score 3 · Answer 7 · answered Dec 28 '20 at 14:43

I had the same need and did this. This eliminates the need to save file by reading the string directly and using the getimagesizefromstring function.

 public function validateImg($data)
    {
        try {
            $binary = base64_decode(explode(',', $data)[1]);
            $data = getimagesizefromstring($binary);
        } catch (\Exception $e) {
          return false;
        }

        $allowed = ['image/jpeg', 'image/png', 'image/gif'];

        if (!$data) {
            return false;
        }

        if (!empty($data[0]) && !empty($data[0]) && !empty($data['mime'])) {
            if (in_array($data['mime'], $allowed)) {
                return true;
            }
        }

        return false;
    }

score 0 · Answer 8 · answered Mar 13 '20 at 09:37

This is a quick solution if do not have the GD library to be installed, and you do not want to install it.

    //Returns a boolean
    public function validateBase64Image($data) {
    //Decode Base 64 data
    $imgData = base64_decode($data);

    //Returns a magic database resource on success or FALSE on failure.
    $fileInfo = finfo_open();
    if(!$fileInfo) {
        return false;
    }

    //Returns a textual description of the string argument, or FALSE if an error occurred.
    //In the case of an image: image/<image extension> e.g. image/jpeg
    $mimeType = finfo_buffer($fileInfo, $imgData, FILEINFO_MIME_TYPE);
    if(!$mimeType) {
        return false;
    }

    //Gets an array
    $mimeArray=explode("/",$mimeType);
    //Validate the file is an image
    if($mimeArray[0]=="image") {
        return true;
    }
    return false;
}

Validating base64 encoded images

8 Answers8

Linked