Take the 2-minute tour ×

I'm making a feature on my website that a user uploads an image either by loading it from file or by using their computer's built-in webcam.

  • I take a picture with either my webcam or I load it from file
  • I store the base64 in an input which is submitted to the server along with other information.
  • The server validates the base64 (looks for hacks)
  • The image is stored on the server

I understand the validation method I used:

  • Takes a lot of processing speed on the server (encoding and decoding)
  • Has bugs / not reliable
  • Is probably not secure enough

Is there any more secure, "server-friendly", and reliable way of validating the base64??
(I couldn't find any promising methods in other posts.)

It fails when I face the camera at certain places (somehow the base64 is affected by certain pictures)

Thanks so much for any help!
-- dragonfire

upload.php script:


$uploaded_file_b64 = htmlspecialchars($_POST['b64_img_url']); // string containing base64 of uploaded image

$FileName = "the_unique_uploaded_file_name.png";
$file_path = "/uploads/" . $FileName;
$file_relative_path = "../uploads/" . $FileName; // BUG: need to use relative path rather than absolute since absolute path doesn't work. Why???

//Must get actual base64 out of string by splicing it
$uploaded_file_actual_b64 = explode("base64,",$uploaded_file_b64);
//We need to get the second value from the array returned from explode() since there are two commas before the actual base64
$uploaded_file_actual_b64 = $uploaded_file_actual_b64[1];

// First try to decode then re-encode the base64. If works then perfect!
if ($uploaded_file_actual_b64 == base64_encode(base64_decode($uploaded_file_actual_b64))) {
    // It worked!
    echo "Valid base64!";
else {
    echo "Not base64!";

// Try creating an image from the base64. If works then perfect!
$is_image = imagecreatefromstring(base64_decode($uploaded_file_actual_b64));
//doing this will help confirm it's an image, but it is still possible to inject php or js into 
//the body of the image, but as long as we don't execute the image on the server 
//then we should be fine
if ($is_image != false) {
    echo "Valid image!";
} else {
    echo "Not an image!";

// If we get up to here, then nothing has been tampered with!
echo "Secure!";

// Store the image on the server
if (file_put_contents($file_relative_path, base64_decode($uploaded_file_actual_b64))) {
    echo "Upload success!";
} else {
    echo "Upload failed!";

Client side code:

    <input type="text" id="b64_img_url" name="b64_img_url" style="display: none;"/>
    <input type="submit" class="btn btn-success" value="Submit" />
    <div id="btn_cam_capture" onclick="capture_webcam();">Capture</div>

    <canvas id="camera-stream-canvas"></canvas>
    <img id="img-drop-preview"/>

        var canvas = document.getElementById("camera-stream-canvas");

        function capture_webcam() {
            // Executed when user takes shot.
            // Previews the image by converting the canvas to a base64 image.
            document.getElementById("img-drop-preview").src = canvas.toDataURL();
            // The input which stores the base64
            document.getElementById("b64_img_url").value = canvas.toDataURL();
share|improve this question
There are some base64 strings which are valid but won't decode then encode to exactly the same value, due to padding. However, why are you trying to "validate" base64 like this? What's the point? –  Andrea Faulds Aug 29 at 1:54
I didn't know how else to do it. If some had any better way of validating it -- that's what I'm looking for! –  dragonfire Aug 29 at 16:47

Your Answer



Browse other questions tagged or ask your own question.