TalkPHP - Max Image width and height condition ignored by opera?

TalkPHP (http://www.talkphp.com/forums.php)

- General (http://www.talkphp.com/general/)

- - Max Image width and height condition ignored by opera? (http://www.talkphp.com/general/5440-max-image-width-height-condition-ignored-opera.html)

Max Image width and height condition ignored by opera?

This one is making em go a little crazy. The script works perfectly for uploading an avatar no bigger than 100px by 100px and 100kb in size, producing an error if any of the conditions are not met in Firefox and IE, but in opera, it will allow me to upload any image, regardless of it's dimensions or size. Can anyone take a look at the code I have and see if they spot a problem that needs fixing? Any help is appreciated!

PHP Code:


		
			
//define a maxim size for the uploaded images in Kb

 define ("MAX_SIZE","100");

if(!$userinfo['loggedin'])

{

  echo '<center>Sorry, you must be logged in to update your avatar.</center>';

} else {

//This function reads the extension of the file. It is used to determine if the file  is an image by checking the extension.

 function getExtension($str) {

         $i = strrpos($str,".");

         if (!$i) { return ""; }

         $l = strlen($str) - $i;

         $ext = substr($str,$i+1,$l);

         return $ext;

 }



//This variable is used as a flag. The value is initialized with 0 (meaning no error  found)  

//and it will be changed to 1 if an errro occures.

//If the error occures the file will not be uploaded.

 $errors=0;

//checks if the form has been submitted

 if(isset($_POST['Submit'])) 

 {

     //reads the name of the file the user submitted for uploading

     $image=$_FILES['image']['name'];

     //if it is not empty

     if ($image) 

     {

     //get the original name of the file from the clients machine

         $filename = stripslashes($_FILES['image']['name']);

     //get the extension of the file in a lower case format

          $extension = getExtension($filename);

         $extension = strtolower($extension);

     //if it is not a known extension, we will suppose it is an error and will not  upload the file,  

    //otherwise we will do more tests

 if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png") && ($extension != "gif")) 

         {

        //print error message

             echo '<center><h5 style="color: #FFFFFF; font-family: arial;">Unknown extension!</h3></center>';

             $errors=1;

         }

         else

         {

//get the size of the image in bytes

 //$_FILES['image']['tmp_name'] is the temporary filename of the file

 //in which the uploaded file was stored on the server

 $size=filesize($_FILES['image']['tmp_name']);



list($width, $height) = getimagesize($_FILES['image']['tmp_name']);



if ($width > 100 || $height > 100)

{

echo '<center><h5 style="color: #FFFFFF; font-family: arial;">Please upload images 100px by 100px or smaller.</h3></center>';

$errors=1;

}



//compare the size with the maxim size we defined and print error if bigger

if ($size > MAX_SIZE*1024)

{

    echo '<center><h5 style="color: #FFFFFF; font-family: arial;">You have exceeded the size limit!</h3></center>';

    $errors=1;

}



//we will give an unique name, for example the time in unix time format

$image_name=time().'.'.$extension;

//the new name will be containing the full path where will be stored (images folder)

$newname="images/avatars/".$image_name;

//we verify if the image has been uploaded, and print error instead

$copied = copy($_FILES['image']['tmp_name'], $newname);

$DB->query("UPDATE {users} SET avatar ='" . $image_name . "' WHERE userid ='" . $userinfo['userid'] . "';");

if (!$copied)

{

    echo '<center><h5 style="color: #FFFFFF; font-family: arial;">Copy unsuccessfull!</h5></center>';

    $errors=1;

}}}}



//If no errors registred, print the success message

 if(isset($_POST['Submit']) && !$errors)

 {

        echo '<body bgcolor="#575757">';

        echo '<center><h5 style="color: #FFFFFF; font-family: arial;">File Uploaded Successfully!<br /><a style="color: #FFFFFF" href="javascript:void();" onClick="parent.location.reload();parent.Shadowbox.close()">Save and Close</a></h3></center>';

        echo '</body>';

        exit;

 }



 ?>



<body bgcolor="#575757">

<center>

<h5 style="color: #FFFFFF; font-family: arial;">Upload Your Avatar!</h5></center>

<br />

<div align="center">

<form name="newad" method="post" enctype="multipart/form-data"  action="">

<input type="file" name="image">

<input name="Submit" type="submit" value="Upload image">

 </form>

 </div>

</center>

</body>

 <?php } ?>

You should not be doing this in javascript, even if it works it can be easily bypassed by anyone (this includes your filetype validation). This type of validation should ALWYAS be done on the server side.

Forgive me Village, but I'm not quite following. I mean the page is a standalone php file built and defined into the CMS I'm using. The only javascript I'm using is Shadowbox to show this page in a small box on the site. Any suggestions on how I should code the script then?

Let's clean up the code a little before we start narrowing down where the issue is - I noticed you are using getimagesize() to find the dimensions of the image, but you're using a custom function to determine the file type.

Never trust a file extension to be what it says it is. I could easily rename an executable to dot jpg and trick your script into believing it was an image - getimagesize will attempt to return the correct mime-type for the file that has been uploaded if your expecting only images. The other option would be <a href="http://us3.php.net/manual/en/ref.fileinfo.php">FileInfo</a> but I don't see any reason you wouldn't be just fine using getimagesize.

I'm not seeing the JavaScript that VI is mentioning but maybe I missed something there; outside of that, zomg, I haven't seen the CENTER element since Netscape.

Never mind what I said, for some reason I thought that was javascript. Looking at it again I have no clue why.

Quote:

Originally Posted by delayedinsanity (Post 30625)

Yeah sorry about the center tags, I was just trying to breeze through it to get a working beta. I usually use all divs, but I didn't want to go through all the trouble of styling at the moment so I just coded it the fastest way possible.

Quote:

Originally Posted by Village Idiot (Post 30626)

Never mind what I said, for some reason I thought that was javascript. Looking at it again I have no clue why.

Heh, no worries. Yeah the only JS that's being used is shadowbox to show the page.

Anyway, I'll revise the code and clean it up a bit. Should be a couple of hours but I'll have a revised code posted soon.

Thanks for the help guys!

I wasn't picking on them, just so you know. I just honestly haven't seen them in so long it was kind of a flash back for me. One of the first sites I ever designed was on Geocities Area51 back when frames were first introduced and we all thought they were soooooo darn snazzy. That and make everything an animated gif... gah.

Quote:

but I don't see any reason you wouldn't be just fine using getimagesize.

Here's what I dont get though. Even if I use "getimagesize" and have it grab the image's type, which returns a numerical result in which I hav have an array define it if I wish, I'm still able to rename a .exe as a .jpg and upload it into the form successfully.

I am expecting only jpg, png and gif extensions to be allowed, but I'm not seeing, or maybe not understanding an efficient way to do that. I've never really tinkered with image/file upload operations before so I feel utterly lost.

I also read the php manual on fileinfo, and I dont even understand how to properly use it.

Any ideas?

Quote:

Originally Posted by delayedinsanity (Post 30628)

Heh, I remember Geocities well. That was what I first used in 2002 to make a website. It was actually one of the coolest sitebuilders in the day with the drag and drop feature for the content. Although now I look back and compare it to all the dynamic content and jquery utilities and laugh so hard.

Seems to be working a lot better now. I also figured out how to stop files that aren't real images by checking the file's true mime type. Tested it by trying to upload an exe renamed as an image extension.

Please let me know if you spot anything else out of whack.

Thanks!

PHP Code:


		
			
<?php



define ("MAX_SIZE", "102400");



function getExtension($str) {

         $i = strrpos($str,".");

         if (!$i) { return ""; }

         $l = strlen($str) - $i;

         $ext = substr($str,$i+1,$l);

         return $ext;

 }



 $errors = 0;



 if(isset($_POST['Submit'])) 

 {

     $image = $_FILES['image']['name'];

     if ($image) {

//DEFINE IMAGE INFO

$filename = stripslashes($_FILES['image']['name']);

$extension = getExtension($filename);

$extension = strtolower($extension);

$size = filesize($_FILES['image']['tmp_name']);

list($width, $height, $type, $attr) = getimagesize($_FILES['image']['tmp_name']);

//END DEFINE IMAGE INFO



//Check if the image is a valid MIME type, regardless of file extension

if (!in_array($type, array('1', '2', '3', '9'))) {

    echo '<div align="center"><h5 style="color: #FF0000; font-family: arial;">Sorry, only "jpg", "png", and "gif" avatars are allowed</h3></div>';

    $errors = 1;

} else {



// Check if the image is larger than 100px by 100px

if (($width > 100) || ($height > 100)){

echo '<div align="center"><h5 style="color: #FF0000; font-family: arial;">Please upload images 100px by 100px or smaller.</h3></div>';

$errors = 1;

}



//Check if The file is larger than 100kb

if ($size > MAX_SIZE) {

    echo '<div align="center"><h5 style="color: #FF0000; font-family: arial;">You have exceeded the size limit!</h3></div>';

    $errors = 1;

}

if ($errors) {

echo '

<body bgcolor="#575757">

<center>

<h5 style="color: #FFFFFF; font-family: arial;">Upload Your Avatar!</h5></center>

<br />

<div align="center">

<form name="newad" method="post" enctype="multipart/form-data"  action="">

<input type="file" name="image">

<input name="Submit" type="submit" value="Upload image">

 </form>

 </div>

</center>

</body>

';

exit;

}

// DEFINE NEW FILE NAME USING TIMESTAMP

$image_name=time().'.'.$extension;



//DEFINE NEW IMAGE LOCATION

$newname = "uploads/".$image_name;



// Copy the image to the new folder

$copied = copy($_FILES['image']['tmp_name'], $newname);



// If the copy failed, say so

if (!$copied) {

    echo '<div align="center"><h5 style="color: #FF0000; font-family: arial;">Copy unsuccessfull!</h5></div>';

    $errors=1;

}

}}}



//If there no errors, print the success message

 if(isset($_POST['Submit']) && !$errors)

 {

        echo '<body bgcolor="#575757">';

        echo '<div align="center"><h5 style="color: #00CC00; font-family: arial;">File Uploaded Successfully!<br /><a style="color: #FFFFFF" href="javascript:void();" onClick="parent.location.reload();parent.Shadowbox.close()">Save and Close</a></h3></div>';

        echo '</body>';

        exit;

 }



echo '

<body bgcolor="#575757">

<center>

<h5 style="color: #FFFFFF; font-family: arial;">Upload Your Avatar!</h5></center>

<br />

<div align="center">

<form name="newad" method="post" enctype="multipart/form-data"  action="">

<input type="file" name="image">

<input name="Submit" type="submit" value="Upload image">

 </form>

 </div>

</center>

</body>

';

?>

while ($feedback != '1') {
echo 'Bump';
}

Why did I use my PSP to type this? *Sigh*