Ticket #9026 (confirmed New Feature)

Opened 2 years ago

Last modified 14 months ago

Make CKEditor prevent caching images in browsers

Reported by: j.swiderski Owned by:
Priority: Normal Milestone:
Component: File Browser Version: 3.0
Keywords: Cc: joel.peltonen@…

Description (last modified by j.swiderski) (diff)

To reproduce:

  1. For simplicity use CKEditor with CKFinder.
  2. In CKEditor click Image button and then Browse Server button
  3. With CKFinder upload image with name abc.jpg, select it and click OK to insert it into CKEditor.
  4. In CKEditor, click on the image, next right click on it and choose image properties dialog.
  5. Click Browse Server button again
  6. While in CKFinder - delete edited image and upload different image with the same name abc.jpg
  7. Double click on this image and the click OK to insert it into CKEditor.

Problem: In CKFinder images are refreshed but in CKEditor old image is seen in preview and in CKEditor content area.

  1. One solution might be using no-cache HTTP headers on server-side
  2. Second is adding some random timestamp parameter behind image name in URL filed of image dialog E.g. abc.jpg?t=1234

The second solution is where editor might come in. It would be nice if CKEditor was doing that in background without any user interaction – perhaps new configuration option could be used here.

Change History

comment:1 Changed 2 years ago by j.swiderski

  • Status changed from new to confirmed
  • Description modified (diff)

comment:2 Changed 2 years ago by j.swiderski

Another TC reported by one of our users:

when you resize an image to a lo-res file and click this image to load it, the resized version is loaded in the preview pane. When you go back and resize the image to another resolution and select the image, the previously resized image is loaded from the cache memory since the name has not changed

comment:3 Changed 17 months ago by j.swiderski

Please note that below code put in head section will work only with CKEditor icons, CSS and js files.

<script>
	CKEDITOR.timestamp = new Date().getTime();		
</script>

It doesn't work with images "taken from File Borwser".


Proper solution would be creating configuration option which when set would apply random hashes to images URL in preview box and content area.
Such hash could be removed when e.g. using getData() method before submitting form.

comment:4 Changed 14 months ago by req

  • Cc joel.peltonen@… added

Add CC. Any news on this issue? It seems to me that the hash + getData() solution would be both working and simple.

comment:5 Changed 14 months ago by req

Regarding suggestion 2: Using a random string or random numbers might cause issues so that images couldn't be inserted in exactly the same way, sometimes we might get image.png?t=123 and sometimes image.png?t=789.

I have an alternative suggestion: The metadata for file date is already available, I think that might be even quite easy to use for a method of preventing caching, right? Just append a creation or upload date to the image URI like image.png?t=1234567. That or a hash of the file bytes would be quite unique!

Also, another TC: It's not uncommon that when you use an image in content and see the content used in a webpage you want to tweak or change the image. It would be so simple to just go to CKFinder, delete the original and then upload a new image with the same name. But this bug makes it so that you and your users still get the old image until cache is invalidated, which can take a long time. Throwing out caching to fix this bug is overkill.

Note: See TracTickets for help on using tickets.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy