I'm building a webapp that serves user-uploaded webpages using a service worker. In summary, to properly simulate navigation inside the inserted website, the service worker needs to know the URL of the page sending the requests.
Certain times I can infer it from the URL requested, but in a lot of situations this does not work.
I implemented both methods mentioned in this answer (event.request.referrer and event.clientId). That's enough to cover most situations in which a page loads files (script tags, style tags, images and fonts loaded in CSS, even WebAssembly seems to work fine) but an <a> tag is still enough to escape the algorithm.
I was thinking about overriding the Fetch function like suggested here , by inserting a script tag with that code in every page loaded by the service worker, but then I learned that <a> tags do not use fetch.
And apparently <img> tags don't use it neither?
This thread cites a couple of other methods that I didn't really get. Apparently one could use XMLHttpRequest (so <a> tags use those? Sometimes?) or use local/session storage (but how do I trigger a function on every hyperlink click? If I could do that I'd just insert a script in every page that sends a BroadcastChannel message to the service worker when the user clicks on a link)? I don't know if anyone can suggest a solution. I eventually need to know the URL of every page that sends requests (which could include scenarios I haven't tested yet).
My last resort option would be to modify automatically every hyperlink to contain info about the url of the page, and then remove the inserted fragment in the service worker before processing the request. It would be ugly and it would create problems with pages that generate URLs dynamically, but it would still be better than nothing I guess.
