0

  • Assume I use no library or framework, just plain vanilla HTML5, CSS3 and ES6 that every modern browser affords me.

  • Is there something similar to ASP's donut hole caching where I can instruct the client's browser not to cache specific html within a page?

  • Sorry if this is seen as a duplicate but I've searched here and elsewhere without any results for this very specific question.

  • Say I have a web form that generates a random ID used for verification of form submissions. This ID is changed every time the form structure is changed.

  • A client that has already visited this page may load the web form with an older cached ID which triggers validation errors upon submission.

  • I know with images I can do this by adding random query strings to their urls.

  • I'd prefer to tell the browser not to ever cache this portion of html or based on an element's class or ID or other, is this possible?

Philip Ingram
  • 158
  • 8

1 Answers1

1

From what I can tell, "donut hole caching" in ASP refers to server-side caching. The server re-uses, verbatim, the "bread" part of the donut across requests and re-generates the "hole" part for each request.

The client (browser) has no such mechanism to differentiate the "bread" from the "hole". It caches at the request level, based on the cache headers sent by the server. So if the cache time-to-live for https://example.com/page-with-form is ten minutes, but the form's random ID is only valid for one minute, the user is likely to encounter an error, even if they refresh the page at nine minutes and 59 seconds.

Keep in mind, the user may also encounter an error if they walk away for an hour, return, and hit "submit" on the form.

One approach would be to disable client-side caching by setting no-cache headers on the server response.

Another would be to allow caching of the HTML, but use JS to re-populate the random ID on an occasional basis (I don't know the security structure of your app, so I don't know if that defeats the purpose of the random ID).

crenshaw-dev
  • 7,504
  • 3
  • 45
  • 81
  • "The client (browser) has no such mechanism to differentiate the "bread" from the "hole". This is the answer I was seeking and I just needed to be sure there wasn't some kind of fancy inline atts or javascript I could use to carve out the hole or even maybe set a different expiry at the element level. Thx – Philip Ingram Jul 13 '19 at 01:40
  • 1
    You bet! Again, don't rule out clever approaches with JavaScript - using a framework which allows differential caching, or baking up some manual partial-page-update from a different URL from the main HTML. But simple declarative donut caching doesn't exist in HTML. – crenshaw-dev Jul 13 '19 at 01:43