Service Worker is blocking CSP violation reports

🐞 bug report

Affected Package

The issue is caused by package @angular/service-worker

Is this a regression?

Unknown

Description

My page includes a CSP (Content Security Policy) violation. The header specifies a reportURI. When the browser attempts to send the violation report that request is handled by the service worker. The service worker fails to send the report with this error:

Fetch API cannot load https://mikvah.report-uri.com/r/d/csp/reportOnly. Request mode is "no-cors" but the redirect mode is not "follow". (anonymous) @ ngsw-worker.js:2709

🔬 Minimal Reproduction

Have a webserver serve an application that creates a CSP violation, for example send a header like: `content-security-policy-report-only: img-src www.permitted.com; report-uri https://a-diffefrent-domain.com/r/d/csp/reportOnly’

and include an img tag for an image from a different domain (aside from permitted.com)

Ensure that your Angular setup creates a service worker.

Open the page, triggering a violation and a report.

🔥 Exception or Error

Fetch API cannot load https://mikvah.report-uri.com/r/d/csp/reportOnly. Request mode is "no-cors" but the redirect mode is not "follow".
(anonymous) @ ngsw-worker.js:2709

🌍 Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.1.0
Node: 10.15.3
OS: darwin x64
Angular: 8.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.0
@angular-devkit/build-angular     0.801.0
@angular-devkit/build-optimizer   0.801.0
@angular-devkit/build-webpack     0.801.0
@angular-devkit/core              8.1.0
@angular-devkit/schematics        8.1.0
@angular/pwa                      0.801.0
@ngtools/webpack                  8.1.0
@schematics/angular               8.1.0
@schematics/update                0.801.0
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.35.2

Anything else relevant?

Google Chrome Version 75.0.3770.100

[fikkatra]

Ran into the same issue. ‘Fixed’ it by bypassing the service worker for the CSP reporting uri. Angular provides a way to do this by adding a query parameter. Add the ngsw-bypass query parameters to the CSP report-uri directive:

report-uri https://mikvah.report-uri.com/r/d/csp/reportOnly?ngsw-bypass=true

[gkalpak]

It would help with investigating this if we could get our hands on a minimal reproduction 😉

_{(Note to self: Might be related to #31330 or #24227.)}