Abuse of image upload and resize function - image

I am concerned about the allowing people to upload images to my server. I will be running a site that will allow users to do upload image which are then resized and saved on the server.
However, there is the potential for abuse here because if someone wanted to write a script to constantly bombard my server then not only would I end up with a huge number of images left on my server, but the server would become overloaded from all the resize operations.
This is a process that I was considering:
Image gets uploaded to a "tmp" location
On successful payment, image is resized and moved from "tmp" to the image folder
"tmp" folder cleaned out every night
Is this paranoid, overcomplicated, or does it in fact make perfect sense? Any feedback is appareciated.

Why dont you just include a Captcha or Captcha-Like function. Since scripts can't read images, only humans can complete Captchas.
Check these out:
http://www.captcha.net/
http://webcheatsheet.com/php/create_captcha_protection.php

Related

Image Upload Security - User Profile

we have to implement a feature user profile Image upload in our web application. the user can upload his profile image .
after uploading image it will be saved to DB2 DB .. and it will be rendered only to the user who uploaded the image after the login.
Technology stack -> J2EE , AIX, DB2.
we got a strange complaint from our security department that this feature needs to be dropped because the user may upload a virus and this will infect the server !
I don't understand how a user will upload the virus, at the end of the day the virus is a program that needs to be executed ,right?
second thing the platform is UNIX-AIX ,,, even if user uploaded a malware the server will not be infected , right ?
last thing, there is a possibility that user will be infected by XSS in case a JS file uploaded instead of image, but i can see that this in our case is not valid because only the user can upload the image and it will be rendered only to the user..
Is my understanding is right ?
No, it is actually possible to hide executable code in image files.
And when the user renders the image, it may be possible depending on the server configuration that the code inside the image can be executed.
See for example http://hackaday.com/2014/11/15/hiding-executable-javascript-in-images-that-pass-validation/
And search in google for gif executable, png executable, etc.
I have seen proofs of concepts that allow to run windows executables like this http://www.codeproject.com/Articles/9791/Hiding-EXE-Data-Within-GIF-Data, batch commands and other stuff for linux (even rm -fr *), php code and many others.
You will have to either verify the image or be sure the image is converted to a safe format before it gets rendered.

Image loading speed: host the image or pull from link?

I'm in the process of building my website and have come across something I want your opinions on.
I've noticed that even though I've compressed my photos A LOT (18mb to 500kb or so) they take a while to load when I display them through my site. That being said, if I pull random photos from the web and use the link to display them, they load almost instantly.
With that being the case, would uploading all my photos to Flickr, then pulling the image URL and using that as my img src be better than using the actual file from my server as my img src?
Pros and Cons?
Obviously if Flickr ever went down I'd be hurting, but if it means that the other 99.99% of the time my photos load faster I'd be all for it.
Thoughts?
Usually those images are hosted on a CDN, which means they are on multiple servers throughout the world, while images on your site are only on one. That's why theirs load faster.

Meteor JS image upload and display

I'm trying to build a E-commerce site with a admin page where the administrator can upload images of certain products.
I'd like Meteor to upload those images to a folder and then display those images in the product page of that product.
I know that normally the image files that the client will be using should be inside the 'public' folder, but I'd like to know more about what other options I might have.
Also, if I upload a new file to the 'public' folder or if I delete a file in the 'public' folder, the website refreshes itself...and this is good and bad at the same time depending on what effect you are after....
Here are my questions:
What if I create a 'uploads' folder in the server and upload the images to that folder. Would it be possible to display the images inside the 'uploads' folder in the client browser??? How??
Is there a way to use the browser to access the contents of the 'public' folder???
Is there a way to stop the 'reactivity' of the site if changes happen in the 'uploads' folder created?
Is uploading the images to the 'public' folder the best solution available to this problem?
Thank you very much for the help
When dealing with what will likely be a large number of images I like to offload not only the storage but also the processing to a third party.
My go-to app in this situation would be Cloudinary. Here's why:
Storage - I can store the original images outside of my application. A huge benefit to keep images in sync from dev to prod.
CDN - I get the extra benefits of images being quickly loaded from the Cloudinary CDN.
Off-load Processing - All of the processing of images is handled by Cloudinary which doesn't slow down my app as a whole.
Image Manipulation - I can make calls to the original image, calls to just get a thumbnail, and calls to change manipulate, ie :effect => grayscale. So if a 1000x1000px image was uploaded, I can request a 50x50px from Cloudinary that will return the image cropped to that exact size rather than using CSS to shrink a huge image.
Flexibility - I can change the size of images and return that exact size to the app without having to re-upload images. For example, if my product page pulled in thumbs at 40px, I could easily make a call to grab the same image at 50px.
Hope this helps.
http://cloudinary.com/
You can do all of this using the meteor package collectionFS. The package is well documented and you have a variety of options that you can uses for storing the uploaded files. CollectionFS also gives the ability for image manipulation on the upload, such as creating a resized thumbnail.
I realized this question is a bit old.
I had the same problem, one of the solution that works for me is using meteor-upload https://github.com/tomitrescak/meteor-tomi-upload-jquery
Definitely don't store stuff in the public directory - it will slow down starting up the app, and hot code refreshes on image upload could easily cause it to crash once there are a decent number of images in there.
Any of the above solutions with storing images elsewhere would work. One other option is using the peerlibrary:aws-sdk package to upload stuff to S3, which is what I use for several apps and have found to be very clean.
Storing the image as a base64 string in MongoDB is also a method. Useful for posting to APIs and save the worry of having to handle other 3rd Parties.

Handling images upload while in other form

Ok, there is a lot of tutorials on the net, how to upload images to express.js servers. But I couldn't find how to upload images while doing other things, e.g:
there is a form, in which I would like to create article. Users fill it with title, some content... after that, he have to upload images. I would like to give him ability to see thumbnails of those images before he create this article. Of course I can just push them through ajax post with jquery, and put them on the screen with javascript, but: when I upload them on to the server, and user closes browser before finishing creating this article, I still have does images on my server, even though no one will use them.
I'm sorry, I couldn't think of simpler explanation of what I want.
So how to handle such a situation?
You can upload image to a temporary folder first and move that image to desired location while actually saving article.
Set up a cron to cleanup the temp folder.

what bits of info are stored in pinterest image urls?

The first bit before the _ is the id of the pin...what are the ZZtfjmGQ used for? I'm assuming the _c is probalby something to do with size.
http://media-cache-lt0.pinterest.com/upload/33284484717557666_HZtfjmFQ_c.jpg
I'm building an image upload service in node.js and was curious what other sites do to store the image.
Final images are served from a CDN, evident by the subdomain in the URL. The first bit, as you pointed out, is the id of the image, the second bit is a UID to get around cache limitations for image versions, and the last bit is image size.
A limitation of CDNs is the inability to process the image after upload. To get around this, my service uploads the files to my Nodejs server where I then serve the image back to the client. I use a jQuery script the user can use to crop the image which sends crop coordinates back to the server and I use ImageMagick to create the various sizes of the the uploaded image. You can obviously eliminate the crop step and just use aspect ratio's to automatically create the needed image sizes. I then upload the final images to the CDN for hosting to end users.
When a user needs to update a photo already in the CDN, the user uploads to nodejs server, images are processed and sized, the UID hash is updated and then uploaded to the CDN. If you want to keep things clean (and cut on CDN cost) you can delete the old "version" at this step as well. However, in my service I give the option to backtrack to an older version if needed.
The rest of the CRUD actions are pretty self explanatory. You can read a list of images available from the CDN using the ID (My service has a user id as well as an image id to allow more robust query operations) and deleting is as simple as identifying the image you want to delete.

Resources