service-worker(safari): POST requests getting blocked with 504 by Service Worker

[Splaktar]

🐞 bug report

Affected Package

@angular/service-worker

Is this a regression?

I don't know if this has even worked properly in Safari, but it's supposed to be production ready.

Description

Service Workers shouldn't block POST requests AFAIK, but that's happening on Safari Version 13.1 (15609.1.20.111.8) on macOS Catalina 10.15.4 (19E287).

🔬 Minimal Reproduction

• Go to https://angular.io/ in Safari on macOS
• Open your Dev tools Console
• Browse around to some different pages like resources, guides, events, etc
• Observe the following error in the console

https://www.google-analytics.com/j/collect?v=1&_v=j82&a=557396380&t=pageview&_s=1&dl=https%3A%2F%2Fangular.io%2Fresources%3Fcategory%3Ddevelopment&dp=%2Fresources&ul=en&de=UTF-8&dt=Angular&sd=24-bit&sr=1920x1080&vp=1914x532&je=1&_u=QACAAEABAAAAAC~&jid=43561559&gjid=590323957&cid=498157216.1589533208&tid=UA-8594346-15&_gid=406270144.1589533208&_r=1&z=73615628
Failed to load resource: the server responded with a status of 504 (Gateway Timeout)

🔥 Exception or Error

Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true., undefined

NGSW Debug Info:

Driver state: NORMAL ((nominal))
Latest manifest hash: a51465926eaa708ba14e763b3c654f2dc464f776
Last update check: 1m3s560u

=== Version a51465926eaa708ba14e763b3c654f2dc464f776 ===

Clients: 1692-8, 1692-33, 1692-59, 1692-63, 1692-70

=== Idle Task Queue ===
Last update tick: 28s363u
Last update run: 1m3s868u
Task queue:


Debug log:

[1m31s277u] TypeError(Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true., undefined) Driver.fetch(https://www.google-analytics.com/j/collect?v=1&_v=j82&a=1196111008&t=pageview&_s=1&dl=https%3A%2F%2Fangular.io%2Fguide%2Fservice-worker-communications&dp=%2Fguide%2Fservice-worker-communications&ul=en&de=UTF-8&dt=Angular&sd=24-bit&sr=1920x1080&vp=1914x532&je=1&_u=QACAAEABAAAAAC~&jid=323136214&gjid=1958337307&cid=498157216.1589533208&tid=UA-8594346-15&_gid=406270144.1589533208&_r=1&z=559832955)
[28s598u] TypeError(Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true., undefined) Driver.fetch(https://www.google-analytics.com/j/collect?v=1&_v=j82&a=1715609439&t=pageview&_s=5&dl=https%3A%2F%2Fangular.io%2Fguide%2Faccessibility&dp=%2Fresources&ul=en&de=UTF-8&dt=Angular%20-%20EVENTS&sd=24-bit&sr=1920x1080&vp=1914x532&je=1&_u=SACAAEABAAAAAC~&jid=721523635&gjid=563131875&cid=498157216.1589533208&tid=UA-8594346-15&_gid=406270144.1589533208&_r=1&z=882809832)
...
[3m52s] TypeError(Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true., undefined) Driver.fetch(https://www.google-analytics.com/j/collect?v=1&_v=j82&a=1121528947&t=pageview&_s=1&dl=https%3A%2F%2Fangular.io%2Fresources%3Fcategory%3Ddevelopment&dp=%2Fresources&ul=en&de=UTF-8&dt=Angular&sd=24-bit&sr=1920x1080&vp=1914x523&je=1&_u=QACAAEABAAAAAC~&jid=1658082190&gjid=2097738465&cid=498157216.1589533208&tid=UA-8594346-15&_gid=406270144.1589533208&_r=1&z=747985136)
[52s802u] TypeError(Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true., undefined) Driver.fetch(https://www.google-analytics.com/j/collect?v=1&_v=j82&a=1121528947&t=pageview&_s=3&dl=https%3A%2F%2Fangular.io%2Fresources%3Fcategory%3Ddevelopment&dp=%2Ffeatures&ul=en&de=UTF-8&dt=Angular%20-%20Angular%20Contributors&sd=24-bit&sr=1920x1080&vp=1914x523&je=1&_u=SACAAEABAAAAAC~&jid=2000655573&gjid=1284227509&cid=498157216.1589533208&tid=UA-8594346-15&_gid=406270144.1589533208&_r=1&z=1228242795)

🌍 Your Environment

Angular Version: 10.0.0-next.5

Anything else relevant?
I'm also seeing this on my site when using LogRocket (another kind of analytics service), but the Headers it complains about are different:

Request header field Pragma is not allowed by Access-Control-Allow-Headers., undefined

NGSW Debug Info:

Driver state: EXISTING_CLIENTS_ONLY (Degraded due to failed initialization: Internal error
undefined)
Latest manifest hash: 5642c5e828814d3dae722eae1783dc4724682328
Last update check: 4s519u

=== Version 5642c5e828814d3dae722eae1783dc4724682328 ===

Clients: 779-37

=== Idle Task Queue ===
Last update tick: 3s197u
Last update run: 46s658u
Task queue:
 * check-updates-on-navigation

Debug log:
[5m51s257u] TypeError(Request header field Pragma is not allowed by Access-Control-Allow-Headers., undefined) Driver.fetch(https://r.lr-ingest.io/i?a=buymic%2Fdevintent-website&r=4-e8456afb-9941-460d-a17c-fddff8c6183e&t=e8d3692a-bb84-48ad-8f91-7dd31c74115c&ir=f&ht=f&s=0)
[5m48s165u] TypeError(Request header field Pragma is not allowed by Access-Control-Allow-Headers., undefined) Driver.fetch(https://r.lr-ingest.io/i?a=buymic%2Fdevintent-website&r=4-e8456afb-9941-460d-a17c-fddff8c6183e&t=e8d3692a-bb84-48ad-8f91-7dd31c74115c&ir=f&ht=f&s=0)

[gkalpak]

This needs further investigation. Note that it might be related to the SW's stripping off request headers (see #24227 for more info).

[kosso]

I am also getting random 504 errors on some HTTP Client API GET requests, only on Safari.

I never thought it might be the Service Worker...

Will attempt to add the ngsw-bypass header (or as a query param) in my HTTP request interceptor.

Update: : Adding ngsw-bypass=true to the HTTPRequest.params in an interceptor seems to have got rid of my random 504 errors.

Note: In the Safari Dev Console the erroneous requests were showing as related to the Service Worker.

[johannesjo]

I am encountering the same issue, which is a big problem because currently ngsw-bypass=true is the only way to exclude requests (see #21191).

[muuvmuuv]

I think this needs a more convenient way since not all SDK's allow modifying/adding query parameters, e.g. Sentry does no longer and Google Analytics for events as well.

Can we not just have a bypassGroups in "ngsw-config.json"? That would make it a lot easier to configure with regex.

[nandowalter-lm]

Hi guys, this seems the same as #53438
I solved bypassing the sw for all requests of external resources

self.addEventListener('fetch', event => {
    if (!event?.request?.url.startsWith(self.location.origin)) {
        event.stopImmediatePropagation();
    }
});

importScripts('./ngsw-worker.js');

Anyone has found a better solution? Hope this can help you.

[edvinv]

I also have the same problem. Google Tag Manager is not working out box with Service workers on iPhone. GTM requests are blocked with 504 response.
There is also no way to set ngsw-bypass parameter to scripts that are dynamically loaded, so the only solution is to replace 'ngsw-worker.js' with custom script.
In my case I use following script:

const urlsToBypass = [
  'www.googletagmanager.com',
  '.google-analytics.com',
];

// Catch `fetch` events and prevent specific ones from propagating to the Angular SW.
self.addEventListener('fetch', evt => {
  try {
    const url = evt.request.url.toLowerCase();

    if (urlsToBypass.some(part => url.includes(part))) {
      evt.stopImmediatePropagation();
    }
  } catch (error) { }
});

// Import the Angular SW to do the heavy-lifting.
self.importScripts('./ngsw-worker.js');

I don't like this because I would prefer to use original ngsw-worker.js. Best solution will be to investigate why this scripts are blocked on iPhone and if there is way to solve it. Other solution is that ngsw-worker.js' supports some kind of options including list of urls to bypass.