Using shadowbox, I am displaying my images onto the screen like this:
<img src="images/thumbpic.jpg" width="100px" />
However I am looking for way to mask the image so that the URL path is not displayed. Otherwise the user will be able to access the image directly, by typing the URL into their address bar.
How can I do this?
This is not possible at all, since it's all client side and there's always a way to get that image. Same answer is for CSS & JS.
Disabling a hotlinking wouldn't help you, since this case has nothing to do with it (because you said by typing the URL into their address bar).
You could embed the image directly in the page. You then can't hotlink it and it would only be accessible from that page.
Here's an example: http://www.sweeting.org/mark/blog/2005/07/12/base64-encoded-images-embedded-in-html
Though, I don't believe this is supported on all browsers yet.
To prevent direct access to the images you should restrict the access to the images rather than trying to hide their URL.
To do this you can, for instance, modify your .htaccess file (a tool to generate an .htaccess file for this purpose can be found here).
In any case remember that the user can always (no matter what you do) save the images on his computer, you cannot prevent that, as the image is downloaded on the client when he visits your sites.
Related
My question is about HTML and PHP.
This is my setup right now:
A website where user have accounts
A FTP server with pictures (currently none)
Files are currently saved on the website in the "PICTURES" folder (which is accessible by everybody who know the full URL)
So, I would like to know how I can display the images without storing them on the website (which will fix my URL problem).
My idea was to move the files on the FTP server, and when a users logon and request a page with those images, download them through a FTP connection, save them on the website, display the images, and remove them. Which would make them accessible only between the downloading time. But this solutions sounds REALLY bad to me.
You need always to have a place where your images are stored. But, if you don't want to give a user the chance to know where are stored, you can create a system which is used to show the images.
Think about this, if you want to download a file from Mega, you can't access to the URL where the file is stored, instead of that, the server itselfs calls a system who assign you a "key" and you can download the file only through that system using your "key".
You could use a system like "base64" so you can encode your image, and show it using it, or, you can use the "header" modifier so, you can display an image using a PHP code.
For example your image tag will be like:
<img src="processImage.php?id=01&user=10&key=123" />
So, your processImage will return a "tricky" image, actually not the image, but the code processed by PHP will be returned, like using "imagejpg()" function with the header "Content-Type:image/jpeg" and then the user will not know where the image is stored actually but the img will works actually.
I have a script that displays the images via php. www.maindomain.com/image.php?img=test.jpg serve images, and i have other sites, where these images are displayed like this
<img src="www.maindomain.com/image.php?img=test1.jpg">
But this script, for show image is on my www.firstsite.com and www.secondsite.com. Is posibble to log which site is showing image? (put it to database for example).
I know, i can use $_SERVER['HTTP_REFERER'] but it's not 100%. Any other ideas?
The only 100% failsafe way to do it is to share the same image with different URLs. F.i. www.maindomain.com/image.php?test1.jpg&ref=first and www.maindomain.com/image.php?test1.jpg&ref=second. As actually this images are not requested by first or second servers but by visitor's browsers. Having different GET params in URL makes it easy to log data you need.
I am looking for some help in downloading pics from a website. Here is the problem detail.
URL is basvandenbroek dot com,
suppose when we visit the following page http://www.basvandenbroek.com/nl/product/27341/704/snaarinstrumenten/boston/snarenset_elektrisch.html
we have a thumbnail pic here which when click bring its larger version. I would like to capture the larger image using a php script and download it onto my pc.
Problem is when we inspect the HTML we see the following code for images
../../../../../../../jpg/27000/27341.jpg
../../../../../../../jpg/cache/27000/220_220_27341.jpg
Based on the above code i assume that if i append website address at the start of the
jpg/27000/27341.jpg I could access the pic but its not working it that.
I believe URL is hidden or I might not understanding things properly. I am new to PHP and Scripting and I would like somebody to help me through it situation.
Thank you
For the website you mentioned, if the thumbnail is
http://www.basvandenbroek.com/jpg/cache/27000/220_220_27341.jpg
then the
http://www.basvandenbroek.com/jpg/27000/27341.jpg
So the thumbnail is basically the dimensions (220 x 220) added as a prefix to the original in a different folder. Also, there is nothing like hidden URL. Any link that is valid on a web-page is sure to appear in the source of the html. In chrome and firefox, atleat, you can find this link by right-clicking the link and copying the link address.
In your case you can find the thumbnail's url by right-clicking the thumbnail and the original's url by right-clicking it.
However, if you want to do this automatically using PHP, you will have to write code that can parse the html for the page to determine the urls.
In your example, here would be the larger image:
http://www.basvandenbroek.com/jpg/27000/27341.jpg
The smaller image is at:
http://www.basvandenbroek.com/jpg/cache/27000/220_220_27341.jpg
This means you would need to scrape out the first two underscored parts of the name (220_220) using string manipulation. You would also want to string replace "cache/" with an empty string.
relative urls are relative to the url of the containing document. so if the document you're scraping is located at http://example.com/foo/bar/baz/doc.html, and the image is referenced as
../../omg/wtf/lol/cat.jpeg, its full url is http://example.com/foo/bar/baz/../../omg/wtf/lol/cat.jpeg, or http://example.com/foo/omg/wtf/lol/cat.jpeg.
btw, this has nothing to do with PHP or scripting in general, and is instead firmly a HTTP thing. and there are no "hidden" URLs in HTTP, that would be a contradiction.
edit: your comment makes it look like the problem is with the Referer header or session id sent (or not) in your request.
In my website people can upload their photos. And I show them. Is it possible, that they would not be able to see url where that image is?
Photos are shown like this <img src="http://mywebsite.com/my_images/image_name.gif" />. What I want to do, that people couldn't see that src link. Is there any way to show photos from that directory without exposing directory name?
Thanks.
There isn't, but you can use URL rewriting (apache's mod_rewrite or a custom PHP script to serve the images) to hide the actual location on your web server.
For example for the latter approach you coud have a serveimage.php on the server, which is called like serveimage.php?file=file1.jpg.
You can call another php-script via <img src="..."> the script loads the image and generates it. This FAQ entry should help.
I am playing with my little PHP project right now and I am struck with a question about how I should approach the image handling. As far as I know, it's either you host the image in your server or let the user provide the link. Given my application is on a shared hosting site, which one better? What are the risks?
User provided
You need to make sure the link is valid
You need to check the content of the link to confirm its an image
You need to be able to check the image on every load
You have to build your html to check the image is still available.
you would also have to confirm that the location of the image is a trusted location
if the image is not on a HTTPS Server and you are, then you can cause issues with browsers.
Self Hosted Image
You can make sure that the image is of the correct format.
You need to watch out for exploits such as GIF Exploit
You can manipulate the image with PHP Dynamically
You can check and validate sizes of images and store on file-system or DB
Requires more bandwidth
If images are dynamic then they can cause high CPU
I would suggest that you go for self hosted image, OR host images on another data centre such as an image host with an open API.
If you your worried about bandwidth then you can create an image upload system that upon upload it uses an image host API to send the image to an external source and then store the image id in the database along with post/user/entity.
Stack Overflow uses the ImgUr for there images,SO has already thought about what your thinking of and have chosen to store externally but upload locally, ImgUR returns data that can be stored, Example below:
<images>
<image>
<name>imgur</name>
<title/>
<caption/>
<hash>UrTHG</hash>
<deletehash>bzEkpCdHPL22Hlp</deletehash>
<datetime>2010-08-14 03:39:23</datetime>
<type>image/gif</type>
<animated>false</animated>
<width>314</width>
<height>115</height>
<size>4413</size>
<views>0</views>
<bandwidth>0</bandwidth>
</image>
<links>
<original>http://imgur.com/UrTHG.gif</original>
<imgur_page>http://imgur.com/UrTHG</imgur_page>
<delete_page>http://imgur.com/delete/bzEkpCdHPL22Hlp</delete_page>
<small_square>http://imgur.com/UrTHGs.jpg</small_square>
<large_thumbnail>http://imgur.com/UrTHGl.jpg</large_thumbnail>
</links>
</images>
This is great because, thumbnails such as small_square,large_thumbnail etc are pre-generated along with meta data such as size,width,height, views etc.
If your worried about CPU usage and server-load then you should revert to the section above regarding external data storage.
If your worried about CPU then you can manipulate the image via GD Libraries and then store a cached version on file-system, update over intervals if need me.
Another down pointer to having user linked images is that when the image is it can be a dynamic image and loggin user data such as what pages that suer is visiting, this one if the main reasons that when your on Facebook and you embed an entity such as a blog post, the images are downloaded and stored on Facebook's CDN, so that outside sources cant tell what and where an IP is.
This should help you decide.
As there has been some discussion about the risk of XSS, i thought i would clear something up a little.
If you choose to allow the user to give you a link to an image you would have to validate the image and not so much the content, the reason why this has to be done is because lets say the user entered the following image location.
javascript:alert('XSS');
If you do not sanitize via PHP with functions like htmlentities() and HTML Purifier library, after you store the above string in your database, when a user attempts to visit the page it would render like so:
<IMG SRC=" javascript:alert('XSS');">
So that every time the page renders you get a dialog box stating XSS, thi is called an XSS Atack, the atack then cauld add another image "url" / "code" that sends certain data such as SESSION ID's to another site that automatically goes to your site and collects data under that ID.
if an attacker entered the following url http://attacker.com/evil.js then the rendered content would be like so:
<IMG SRC="http://attacker.com/evil.js">
As this is an image tag then evil.js would not be processed as javascript, because thats not how the Document Object Model is built, this would be safe to users.
Links on Vulnerabilities
CSRF
XSS Examples
XSS Wiki
Windows Metafile Vuln
Cross Zone Scripting
One thing to be aware of if you are accepting URLs from your users and using them to build an <img> tag: you have to be careful to not be vulnerable to Cross Site Scripting (XSS) attacks, which is an attack where a malicious user is able to inject their own code into your website.
For instance, let's say your code looks like:
$img_url_from_user = $_POST['image_url']; // user inputs a URL in a form
echo '<img src="' . $img_url_from_user . '" />';
A malicious user comes to your form and fills it out:
Now when PHP gets that input and uses it for $img_url_from_user above, the resulting HTML the browser gets is
<img src="invalid.jpg" onerror="alert('attack!')" />
and when the page is loaded, you will see an alert (obviously an attacker can do much worse that this. For instance, they could collect cookies and then use an AJAX call to send the info to their own server). So you have to make sure you sanitize any input you get from your users!
Resources
What are the best practices for avoid xss attacks in a PHP site
Exotic XSS: The HTML Image Tag
I highly recommend pushing your image requests to imgur.com because it appears to be a very reliable image host that cropped up a while back to help support Reddit.com in their need for image hosting. Imgur will allow you to link to images they host and they are completely free. They aren't like tinypic or other sites that will block your images later on.
The only drawback I can see is if someone has a problem with you using a site that also hosts a lot of free porn. Totally your call if you want to go there. It's an open door and anyone can upload anything... but it's stable and reliable so I use it for all my image hosting needs.
One risk of having the app link-dependent is if the link dies, the image dies. One risk of keeping things on your server is, it's possible to disguise any content as an image file.
Another problem with using an external image URL is that (unless hotlinking is disabled on the server the url points to) you might be contributing to someone else's bandwidth problems because most users won't bother uploading the image to a free image hosting site by themselves if the image already exists somewhere in the internet.
Any time you display user-created content on a page, you need to treat it as though it's radioactive. This is a potential XSS vulnerability. Take a look at this cheat-sheet for examples. Some sample inputs that could compromise your users:
document.write('Gotcha!')
http://myserver.com/coolimage.png" onload="document.write('Gotcha!')
><a href=malicioussite.com>View user profile</a>