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?
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).