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?

Answer 1

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; }  ?> 

Answer 2

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; }