Just wondering how does Flickr prevent people from downloading images from its site? What are they using?
Transparent .gif over the image. You can still download the actual image by viewing the HTML source and finding the image's actual URL.
For example, a random image:
http://www.flickr.com/photos/34285128#N00/4300352607/
<img style="position:absolute;top:0px;left:0px;display:block" src="http://l.yimg.com/g/images/spaceball.gif" alt="" width="500" height="366">
That's the transparent image on top.
<img src="http://farm5.static.flickr.com/4057/4300352607_edcc5a4a9e.jpg" alt="Say It With Flowers by *sido* (back in a few days)." title="" width="500" height="366" class="reflect">
That's the actual image, which is displayed below spaceball.gif.
Not to thread dump, but conceptually if you are really trying to lock out downloading an image, you could (i think). Using a framework like asp.net mvc, you could tag the image with a unique key, storing the key either in memory or some other form of persistence and pass it down to the client with the id as the filename. On the returning end, upon request for the file, you could intercept the request for the image and perform a lookup on the key matching it to the actual file. Once you have the file, you return the image as a custom result with the appropriate meta tags (at least in mvc, not sure how you'd do it elsewhere). Before you return it though, you flag the result as being viewed.
It would be a great deal of work on the server, but it would require a great deal of effort for anyone to snag the image if you utilized Flickr's transparent gif technique in conjunction with it.
The idea being that a single request would be issued on a normal view and any further attempts to view the image directly (by viewing source and grabbing the url) would be blocked.
<./threadump>
Sorry, just had the idea and wanted to add it to the already answered question (sleep deprevation and all that jazz).
Related
I have a PHP file that I'm trying to get to load via an image tag:
<img src="https://example.com/tracker/">
I can see in Firebug that the PHP page is technically being loaded. But since it's not actually an image, it looks like not everything from that page is running - like Javascript that's supposed to run tracking certain visitors.
I'm probably just going to add all the javascript and stuff into the footer of each page instead, but I still don't understand why this didn't work.
Didn't affiliates used to load web pages as images for cookie stuffing like 10 years ago? I was under the impression that the page itself should load when being called, even as an image.
Or is it not loading as a result of some sort of browser security setting?
Loading an image that way won't treat the result as HTML and certainly won't try to run any javascript in it.
What that is good for is that /tracker/ can be a web application that does something with the request. Instead of just retrieving an image, it can increment a hit count or inspect a cookie. Then it can return an image of some kind, even if it's a 1x1 transparent PNG.
If you want to execute Javascript, then use a Script tag instead.
I have minimal knowledge of coding but I just spent the past 6 hours trying to resolve this issue.
Go here to see the image I am trying to have load.
If I am suppose to chance the SRC lines, how and where do I do that?
The HTML image loads perfectly from my computer.
Like what #mlegg said, I get the same error when trying to go to your link. It looks like that is no longer a valid URL or there is some form of security on it so it's only accessible from your computer (since you said it works from your computer?).
It could also be getting pulled from your browser cache if it was a good URL at one time. Try doing a Shift + Refresh of the page or purposely clear your cache.
If you have the image locally you could try uploading to a different web based repository and src it from there.
Just to cover all bases, I trust you know how to put an image on a web page using the img tag:
<img src="http://lorempixel.com/400/200/">
You might also want to try a different image that you know is available and accessible. You can use the URL above for lorempixel.com or you can scrounge up a different image from a Google Images search.
I have an image :
<img id="img1" src="http://igyaan.in/wp-content/uploads/2013/03/Nvidia-580x362.jpg" />
The image from the url is getting cached, but image is not getting displayed.
I analysed it using firebug, where I could see a GET request to the image, and image is returned. And in addition, there is a request to some facebook pic which I never requested (firebug: Bad request):
http://a1.sphotos.ak.fbcdn.net/hphotos-ak-snc7/424831_319096764809781_1948053300_n.jpg
jsFiddle: http://jsfiddle.net/Qb6YX/5/
Any idea why this is happening? And how do i solve this issue?
MoreInfo : iam working on a Rss feed reader , it displays images of posts . I had trouble with this specific website.
It is likely that the image is hotlink-protected. That's why it gets redirected when you try to load it on your page. In this case you should use a server-side proxy to retrieve the image and load it from there.
Using an external service from Images.weserv.nl:
<img src="http://images.weserv.nl/?url=igyaan.in/wp-content/uploads/2013/03/Nvidia-580x362.jpg" />
See jsFiddle
It would be better if you host the proxy script on your server for this purpose so that you have fewer dependencies for your RSS feed reader.
However, there are times when we should respect the site owner's decision of hotlink protection. One way to go about it is to replace an image that cannot be loaded with a default one.
Learning how to utilize Bootstrap, I noticed that the thumbnails had strange markup for the image source (at least, strange to me.)
<img data-src="holder.js/260x120" alt="260x120" style="width: 260px; height: 120px;" src="data:image/png;base64,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">
What's going on here, and why is this being done? Is the image somehow saved to local storage at some point in base64?
To clarify, I'm asking about the src="image:/ part.
What you are seeing is not the HTML5 data- attribute, but the data URI scheme. To quote Wikipedia:
The data URI scheme ... provides a way to include data in-line in web
pages as if they were external resources. This technique allows
normally separate elements such as images and style sheets to be
fetched in a single HTTP request rather than multiple HTTP requests,
which can be more efficient.
What you're seeing is the base64-encoded image data, in this case a PNG. When browsers see this, they decode the data as instructed, and display it as if it were an external resource.
Given this image's size, the creators of Bootstrap rightly believe it is more efficient to inline the image like this rather than keeping it separate. Had they kept it separate, it would require an additional HTTP request to load the image, which increases the total load time of the page.
In the case of Bootstrap, what I think you are seeing is Javascript being used to generate the data that goes in the src attribute.
If you look at the raw source (not the source in the inspector), you will probably not see the src attribute, only data-src.
The data-src attribute is an instruction to javascript to use the holder.js script to generate the data to go in the src.
So holder.js generates the image, which is then loaded into the img as a data uri as explained by the other answers.
Is there any way at all to get the meta information about a picture from a link without download the picture it self?
Like i have this url to a picture http://www.abc.com/picture.jpeg, i want to get the meta information such as the dimensions of the picture with out actually downloading the picture it self.
Of course I want to do this by writing a program, because there is large amount of pictures to go through.
I doubt you can get information about an image without downloading it. For example, when you visit a website and it has an image on it, the browser only knows the dimensions of the image after it has downloaded it. This is especially true if you want more advanced metadata such as time picture taken, iso, exposure, etc. The URL carries no information except if you can get some information from the parameters. Ex: http://www.abc.com/picture.jpeg?x=100
Sorry :/.
You might maybe want to look into downloading a thumbnail of the image, or maybe there is a way to not download the image pixel data but only the EXIF metadata which would cut down on download time/costs but still get you that metadata you want. I have no expertise in that subject though.
If all you have is a URL, than all you have is a URL. There's no magic incantation that will extract more data than there is from it. I.e.: No, you'll have to download the image.
If you have control over the server serving the image, you could make an HTTP HEAD request, have the server evaluate the image and output meta information about the image in the HTTP header, essentially creating a custom protocol for this purpose. That's a lot of ifs though and really depends on what you want to do.