I have worked on many web apps that allow a person to upload and display images (like profile images, background image, etc). A problem I have come across is that you usually provide specific formats that the user can use (i.e jpg, png, jpeg, gif, etc).
Problem is, that suppose you have a profile picture, some may upload a jpeg, some png, and some gif. What format should you save the file in? i.e 'profile.jpeg', 'profile.png' or simply 'profile'.
I noticed that you can simply exclude the file extension and the browser opens the image, but is this safe?
The file extension does not determine the file format. You can upload a .gif that ends in a .png and the browser will display it with no difficulties. (You can also use .exe or .foo or whatever, and the image will still display.)
In other words, the extension has nothing to do with security.
On the other hand, I'm not aware of any security risks in passing an unknown file to the browser to display as an image. If you have <img src="virus.exe">, the browser will do nothing because the file is not a valid image file.
If you want to be sure, you could check on the server that the uploaded file is a valid image and discard if it's not.
Related
I had given up on protecting online images since even disabling the easiest ways to get at images still left people the option to use Inspect, then Sources, and poke around in the folders until they found the right file, hey, presto.
The only real way to get around that was to break the image up into tons of fragments so you're just depending on people not being able to code and getting bored with the idea of putting the image back together.
This site, however, has a public domain image that has somehow truly blocked the Inspect hack: The image appears within Inspect (d7... folder, 3rd image) but any attempt to open or download that image just produces useless "download" files instead of the actual image. How'd they pull that off? and why isn't it more common? How expensive/time consuming would it be to implement for online image databases?
The image appears within Inspect (d7... folder, 3rd image) but any attempt to open or download that image just produces useless "download" files instead of the actual image.
I managed to download it (using qutebrowser) by opening in new tab. The filename was qwe_download.
When i opened the image in my file manager (Thunar), it showed as WebP image.
I used feh (image viewer) and it was exactly the image.
Maybe use WebP compatible image viewer to open the file.
I have to process a feed from a data provider, in this feed they provide us with image URL, currently we download them and store them in our own media server, but I was wondering if it was safe to simply get the url and output it directly in the html as the src attribute of an img tag.
My main concern is if this exposes us to the possibility of someone placing files under that URL which would could run malicious scripts/ do something other than render an image (or fail to render an image if it isn't one/doesn't exist, which is fine)
Will the img src attribute only render images, or will it download the file specified in the URL to the user's browser regardless of what it is?
I can verify at the import stage that the URL at least appears to be a valid image URL, so it would only ever have .jpg or whatever as an extension, but obviously this might still allow them to redirect to something else.
Image URLs can of course point to scripts (with some URL rewriting) but there's no risk to get a script run from an image load. URL data is treated as binary image data, not as runnable text/script.
If it's a script, for your browser it's nothing more than a corrupted image file.
So, no code injections risk. At least this is what I know.
Is there a way to disable a user from downloading a file from a URL?
For example I have a link:
wow.mywebsitedomain.com/templates/filename.svg
I want to disable the user from downloading the filename.svg
These svg files are not just an image, they are editable designs that I have spent countless hours on each. No, I do not care if someone does a screenprint or gets a png etc, as those are not scalable, editable, vector files.
When the user clicks on a png thumbnail my actual link opens my online design editor to allow the user to customize these files, then save to my server, then purchase printed media, and they are not allowed to download any files.
I tried putting the actual files into a password protected folder on my server, but they do not open properly, and I do not want the user to have password access to this folder.
Essentially I need the link to be accessible, just not show the actual link for someone to copy and open/save/download etc.
Hopefully there is a simple solution for a non-programmer with basic html skills?
Thanks
Your can do things like "disabling right-click" and stuff - it may prevent some users from downloading your file, BUT basically you cannot prevent a file which is downloaded and interpreted by the browser from being downloaded to a user's hard drive.
This is not only true for SVGs, but also for music, videos, etc.
Instead, you can convert your SVG file to a PNG on server-side, and show only the PNG to the user. Note that you have the possibility to create PNGs of different sizes on the fly - dependent on the request, user's screen resolution, etc. You can also implement caching of the generated PNGs if needed.
On how to create a PNG from SVG in PHP read here:
Convert SVG image to PNG with PHP
You can choose other raster image format, of course.
If they can view it, they can download it. End of story. If you only want them to see a PNG, make a PNG from it and put that up
My understanding is; if you can see it, you can download it,
I have a TGA image encoded in Base64
https://gist.github.com/984770
But it doesn't show on the browser.
Is there a way to show a TGA image on the browser or it is not supported? Is there any client side technology I could use to achieve this?
It's not supported.
I assume there probably are Java or ActiveX plugins that can do it, but it's going to be complicated, cumbersome, have spotty support, and of course won't work with base64 data.
If it's just a few images, consider converting them to JPG, PNG or GIF manually, depending on what type of image they contain.
If it's many images and you need an automated solution, a good way would be to employ a server-side script that calls e.g. ImageMagick, and creates a JPG thumbnail from the image.
You could easily send the base64 data to the script using Ajax for example, receive the name of the converted file in return, and create an <img> element pointing to it.
I have a form file upload. When the users goes to upload an image, it displays all files on their computer. How can I make the HTML upload dialog window to only display JPG, GIF and PNGs?
Just add accept to input with file types. This will filter the list of displayed files, but not create ban on download other files. This is convenient, because it is simple.
The file upload dialog in the web browser is outside of your control. You could create a Java applet for uploading images, like Facebook did.
As this hasn't been answered yet; add the following code to your file input
accept="image/x-png,image/gif,image/jpeg"