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?
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;
}
?>
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;
}
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;
}
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.
$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';
}
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
