How does having " ?${new Date().getTime()} " updates the image in JS - javascript

I watched a tutorial where they showed that appending ?${new Date().getTime()}to the value of src attribute in the image tag, updates the current image with the new image.
I came across this question, where the first answer to the question has followed the same technique.
Could someone please explain to me the rationale behind the working of this particular technique. Thanks!

Simplest explanation is that the browser (and often the server) will cache items in memory to decrease page load times. Therefore, if you have a dozen pages that all are referencing /images/logo.png, the image is downloaded once and stored so that it can be re-used on each page. Efficient, right?
Anyways, sometimes images change and you don't want that to happen, so what you do is change the name of the file. For example, /images/logo.png?15, /images/logo.png?16, /images/logo.png?17, etc. The browser no longer attempts to use the cached image because the query is actually different.
The code snippet you've included simply includes the current time to the name of the file in order to make it unique.

Different query parameters can result in a server serving different images, depending on the backend logic. This is often not the case - in many setups, requesting the same path with different query parameters will give you the same image in return, but that's not always the case.
If a browser sees an image URL whose image exists in the cache already, it will not download the image again - instead, it'll take the image from the browser cache. But if you change the src to one which is not in the cache, it will make another request to the server. If the server has changed the image at that endpoint between initial pageload and src change, the new image on the server will be downloaded and displayed on the client.
The new Date().getTime() is just a way to append a string which definitely does not exist in the browser cache yet.

Related

Embed param with index page

I need to embed a parameter with all my pages url. Like:
index page = www.abc.com?param=value
about us page = www.abc.com/about-us.html?param=value
When i google it I found param tag. But it is child tag of Object Tag. So I don't know how to use this to address my issue.
Note: Am adding parameter to maintain my version upgrades so that browser will fetch from server whenever new updates added not fetching from cache like Google.
How to achieve that?
When i google it I found param tag. But it is child tag of Object Tag. So I don't know how to use this to address my issue.
You can't. It has nothing to do with your issue. Object parameters and query string parameters are entirely unrelated.
Am adding parameter to maintain my version upgrades so that browser will fetch from server whenever new updates added not fetching from cache like Google.
That is used when linking to resources that change infrequently and you normally want to be heavily cached, but which occasionally change in a way that would break parts of a site if not refreshed in the browser. Primarily this applies to stylesheets and JavaScript files.
For regular pages, you usually don't want such strict caching rules so you should configure your HTTP server to put appropriate cache control headers in the HTTP response for the HTML document.
For instance:
Cache-Control:max-age=3600
ETag:"44ab-51ae9454a67e2"
mnot has a good guide if you want a more in depth explanation about how to control caching.

In Spring, is it possible to return an image to the browser and include metadata about the image in the same response?

I'm reading TIFF and PDF files off a network drive and returning each page as an image to the browser which get displayed as JPG. This part works fine. However I'm finding it inefficient because I first have to make a request to the server to determine how many pages the file has, which results in reading in the image on the server, getting the number of pages and returning that value. Once that value is returned to the browser, I then have to make a request for each page to be returned as an image, so the file on the network drive is read in again, and the requested page number is returned as a byte[] representing a BufferedImage of the page.
What I'd ultimately like to do is make a request for the first page in the file, and then in the response to the browser, indicate the number of pages in the file so that each additional page can be requested. This would reduce the amount of requests as no initial request would be required just to determine the number of pages.
I'm not sure if this is possible. I've spent some time researching to see if I could get response headers from images, but haven't found anything.
Why not adding the info to a cookie via reponse in your image-serving controller?
If you name the cookie in a way that would "link" it to a specific set of images you wouldn't need to hassle with "how can i read headers of an image?"

Canvas Image to an Image file

So i have a canvas on which the user signs, now instead of converting it to a base 64 string i simply want to save it as an image itslef. whats the easiest way to do it html5??
You can easily do that this way (specifying the format as png in this case):
var img = canvas.toDataURL("image/png");
You can specify different image formats.
Take a look at this answer.
I've answered a similar question here:
Simulating user event
Assuming you are saving locally
You can go the route of creating an image from a Data URL, but then saving it is the trickier part that currently isn't very nice using HTML5. It's hopefully going to get better soon, if browsers incorporate the download attribute of the a tag.
Obviously if you have higher permissions than a standard webpage... i.e. you are designing a browser plugin - then there are other options...
If I were to implement something like this myself, at the moment, I would conceed to using a flash plugin to handle the save to the local computer.
Assuming you are saving remotely
By the sounds of it you aren't saving to a server, but if so this is quite easy by just POSTing the base64 information to a script written in a server-side scripting language (i.e. like PHP) and getting that to write the data directly as binary to a file. Obviously you have to make certain you do this securely however, you don't want just any binary data written to your server's filesystem.
Best of both worlds
If you've got the development time, the best method to get a canvas image saved locally - without Flash - is to create a server-side script that instead of saving the data to your server actually writes the Base64 information you send it directly back as a realised binary image file. That way you can create a form that posts your Base64 data to a new tab, this request is evaluated by the server-side, and the binary image is returned... at which point the browser asks the user where they wish to save their image.
You'll need to define the correct headers to force an image to download (rather than display in-browser). A simple change to force this is to set the server-side script's Content-type header to 'image/octect-stream'... there are other header options to set which would be best researched (i.e. headers that control the filename and so forth).
reflect.php
<?php
/// a simple example..
if ( array_key_exists('data', $_POST) && ($data = $_POST['data']) ) {
header('Content-type: image/octet-stream');
echo base64_decode( $data );
exit;
}
and the form...
<form action="reflect.php" method="post" target="_blank">
<input name="data" type="hidden" value=" ... Base64 put here with JS ... ">
</form>
(The whole form should be created dynamically and submitted automatically with JavaScript)
Improving the user experience
There are ways to avoid a new tab being created, but you'd have to research to make sure these other methods don't cause cross-browser problems... for example you could post your form data as part of an iframe (which would keep the process hidden), or just post the data directly on the current window (..and hope that all the browsers receive the correct request and open a download rather than replace your page content - most modern browsers should handle this).
Improving security
With regards to a PHP script that automatically returns binary data, you should keep the access to this script secured by one time use key / authentication token or something similar, and keep a limit on how much Base64 data you are willing to accept. It might not seem like it poses a secutiry risk - as you are not modifying your server in any way with what the user sends - but the dodgy people of this world could take your script and use it to send download request to other users... which if downloaded (and turned out to be unwanted trojans or viruses) would make your server implicit in providing the dodgy file.
All in all
Due to the effort required to get a simple thing like an image saved to the desktop, I wouldn't blame you for doing the following:
Embed the image in the page (after taking your snapshot from canvas) and ask the user to right click and Save as...
Hopefully future things will make this situation better...

Refresh image or clear cache

Is there any way (server or client side) to force the browser to pull a new version of a file (image) from the server. The image in question is otherwise cached for a long time. I know I can append a random number, for instance, to the URL of the image but this is not acceptable in this situation. I need for the image to be refresh from the exact same URL.
What I'm doing: a YouTube like portal where users upload videos. Each video has a thumbnail which is shown on various pages on the portal. User can, at any time, change the thumbnail (he can select from three generated thumbnails). So when this happens (a new image overwrites the 'original' image), I wan't to refresh the video's thumbnail so that the owner (I don't care if other users see the old thumbnail) will see the new thumbnail no matter where the thumbnail is shown.
I'm afraid this can't be done but I'm asking here just to be sure.
update: I'm using nginx and PHP on the server side
You could use ETAGs on your thumbnails. This would prevent the transmission of the actual thumbnail data if it hasn't changed (i.e. still has the same hash). However, you would still face the clients HTTP requests to check if the ETAG has changed (normly to be answered by HTTP 304.
But combined with a rather short freshness threshold (say a couple of minutes), you could achieve tradeoff between caching and freshness while still conserving resources. If you need absolute freshness, you might have to stick to ETAGs though. If you create a clever hash function, you could handle the ETAG requests on your frontend loadbalancer (or at least near it) which could thus be rather cheap.
Edit: Add alternative from my other comment.
An alternative could be to use added request parameters to force a re-fetch when the resource changed as suggested in another answer. A variation of that schema (which is used by many Rails applications) is to append the timestamp of the last change (or some kind of hash) as a parameter to the file which only changes when the file actually does change. Something like this, or one of the above methods, is actually the only way to be really sure to not have unnecessary cache validation requests while at the same time having always the freshest resource.
Add at the end of the filename a get parameter, such as:
example.jpg?refresh=yesplease
You could also refresh that image each visit by using a rand() param.
In php:
example.jpg?refresh=<?php echo rand(1,999); ?>

Do i need to take care when setting src attribute of an image, where src path is specified by user?

I am creating a page wherein user will specify the url of an image. This url will be stored in DB, and then it will be retrieve back to display the image. So far it is good if the user is not trying to be mischievous.
But now going by http://ha.ckers.org/xss.html , a user can also specify a url which is actually a script.
<IMG SRC=javascript:alert('XSS')>
I tried this in a page but this didn' do any harm. [ no alert is shown ]
So the point is, do i really need to care what the user is specifying? If yes, then what are the cases/scenario which i need to consider, and how to do that?
As long as you get anything from untrusted source, you need to take care of it. In this case, users can write some harmful code to break your html.
<img alt='' src='' />alert('xss');<!--'-->
Also user input should be handled in different approaches when being used in different places. E.g. Url encode, Html encode, Javascript encode.
In summary, don't trust user input!
Before storing in database, make sure it is:
Valid URL (each server side language has its own methods)
Valid image (using some sort of XMLHTTP/WebRequest in server side and parse the contents)
If you have ASP.NET step #2 become simple matter of creating new Bitmap using the WebResponse stream and see if it's successful and the Bitmap is valid.
Also he could provide a value like myevilscript.php where he does some php-stuff. So in fact you really shouldn't do this :)

Categories