Home/ Questions/Q 8603875
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T02:25:39+00:00

I’m building an application that allows the user to POST HTML5 canvas data that

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

?>
    • 0