Add issues for CORS redirect mode problems

This CL adds issues for the CORS error codes

NoCorsRedirectModeNotFollow

Screenshot: https://imgur.com/a/ZfaMTu6

Bug: chromium:1141824
Change-Id: I0fe496219bfc4b43414d21d1eed48022464203c5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2897287
Reviewed-by: Wolfgang Beyer <wolfi@chromium.org>
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>

config/gni/all_devtools_files.gni

@@ -214,6 +214,7 @@ all_devtools_files = [
   "front_end/models/issues_manager/descriptions/corsAllowCredentialsRequired.md",
   "front_end/models/issues_manager/descriptions/corsDisallowedByMode.md",
   "front_end/models/issues_manager/descriptions/corsDisabledScheme.md",
+  "front_end/models/issues_manager/descriptions/corsNoCorsRedirectModeNotFollow.md",
   "front_end/models/issues_manager/descriptions/corsHeaderDisallowedByPreflightResponse.md",
   "front_end/models/issues_manager/descriptions/corsInvalidHeaderValues.md",
   "front_end/models/issues_manager/descriptions/corsMethodDisallowedByPreflightResponse.md",

config/gni/devtools_grd_files.gni

@@ -253,6 +253,7 @@ grd_files_release_sources = [
   "front_end/models/issues_manager/descriptions/corsInsecurePrivateNetworkPreflight.md",
   "front_end/models/issues_manager/descriptions/corsInvalidHeaderValues.md",
   "front_end/models/issues_manager/descriptions/corsMethodDisallowedByPreflightResponse.md",
+  "front_end/models/issues_manager/descriptions/corsNoCorsRedirectModeNotFollow.md",
   "front_end/models/issues_manager/descriptions/corsOriginMismatch.md",
   "front_end/models/issues_manager/descriptions/corsPreflightResponseInvalid.md",
   "front_end/models/issues_manager/descriptions/corsRedirectContainsCredentials.md",

front_end/models/issues_manager/BUILD.gn

@@ -52,6 +52,7 @@ devtools_issue_description_files = [
   "corsInsecurePrivateNetworkPreflight.md",
   "corsInvalidHeaderValues.md",
   "corsMethodDisallowedByPreflightResponse.md",
+  "corsNoCorsRedirectModeNotFollow.md",
   "corsOriginMismatch.md",
   "corsPreflightResponseInvalid.md",
   "corsRedirectContainsCredentials.md",

front_end/models/issues_manager/CorsIssue.ts

@@ -41,7 +41,7 @@ export enum IssueCode {
   PreflightMissingAllowExternal = 'CorsIssue::PreflightMissingAllowExternal',
   PreflightInvalidAllowExternal = 'CorsIssue::PreflightInvalidAllowExternal',
   InvalidResponse = 'CorsIssue::InvalidResponse',
-  NoCorsRedirectModeNotFollow = 'NoCorsRedirectModeNotFollow',
+  NoCorsRedirectModeNotFollow = 'CorsIssue::NoCorsRedirectModeNotFollow',
 }
 
 function getIssueCode(details: Protocol.Audits.CorsIssueDetails): IssueCode {
@@ -205,10 +205,17 @@ export class CorsIssue extends Issue<IssueCode> {
             linkTitle: i18nString(UIStrings.CORS),
           }],
         };
+      case IssueCode.NoCorsRedirectModeNotFollow:
+        return {
+          file: 'corsNoCorsRedirectModeNotFollow.md',
+          links: [{
+            link: 'https://web.dev/cross-origin-resource-sharing',
+            linkTitle: i18nString(UIStrings.CORS),
+          }],
+        };
       case IssueCode.PreflightMissingAllowExternal:
       case IssueCode.PreflightInvalidAllowExternal:
       case IssueCode.InvalidResponse:
-      case IssueCode.NoCorsRedirectModeNotFollow:
         return null;
     }
   }

front_end/models/issues_manager/descriptions/corsNoCorsRedirectModeNotFollow.md

@@ -0,0 +1,5 @@
+# Ensure no-cors requests configure redirect mode follow
+
+A cross-origin resource sharing (CORS) request was blocked because it was configured to use request mode `no-cors` but did not use the redirect mode `follow`.
+
+To fix this issue, ensure that whenever the request mode `no-cors` is set then the redirect mode is set to `follow`.

front_end/panels/issues/CorsIssueDetailsView.ts

@@ -199,9 +199,11 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         this.appendColumnTitle(header, i18nString(UIStrings.sourceLocation));
         this.appendColumnTitle(header, i18nString(UIStrings.unsupportedScheme));
         break;
+      case IssuesManager.CorsIssue.IssueCode.NoCorsRedirectModeNotFollow:
+        this.appendColumnTitle(header, i18nString(UIStrings.sourceLocation));
+        break;
       default:
-        Platform.assertUnhandled<IssuesManager.CorsIssue.IssueCode.NoCorsRedirectModeNotFollow|
-                                 IssuesManager.CorsIssue.IssueCode.PreflightMissingAllowExternal|
+        Platform.assertUnhandled<IssuesManager.CorsIssue.IssueCode.PreflightMissingAllowExternal|
                                  IssuesManager.CorsIssue.IssueCode.PreflightInvalidAllowExternal|
                                  IssuesManager.CorsIssue.IssueCode.InvalidResponse>(issueCode);
     }
@@ -403,11 +405,15 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         this.appendSourceLocation(element, details.location, issue.model()?.getTargetIfNotDisposed());
         this.appendIssueDetailCell(element, details.corsErrorStatus.failedParameter ?? '', 'code-example');
         break;
+      case IssuesManager.CorsIssue.IssueCode.NoCorsRedirectModeNotFollow:
+        element.appendChild(this.createRequestCell(details.request));
+        this.appendStatus(element, details.isWarning);
+        this.appendSourceLocation(element, details.location, issue.model()?.getTargetIfNotDisposed());
+        break;
       default:
         element.appendChild(this.createRequestCell(details.request));
         this.appendStatus(element, details.isWarning);
-        Platform.assertUnhandled<IssuesManager.CorsIssue.IssueCode.NoCorsRedirectModeNotFollow|
-                                 IssuesManager.CorsIssue.IssueCode.PreflightMissingAllowExternal|
+        Platform.assertUnhandled<IssuesManager.CorsIssue.IssueCode.PreflightMissingAllowExternal|
                                  IssuesManager.CorsIssue.IssueCode.PreflightInvalidAllowExternal|
                                  IssuesManager.CorsIssue.IssueCode.InvalidResponse>(issueCode);
         break;

test/e2e/issues/cors-issues_test.ts

@@ -448,4 +448,39 @@ describe('CORS issues', async () => {
       'webdav',
     ]);
   });
+
+  it('should display CORS issues that are misconfiguring the redirect mode', async () => {
+    await goToResource('empty.html');
+    const {target} = getBrowserAndPages();
+    await target.evaluate(async () => {
+      try {
+        const url = new URL('/', document.location.toString())
+                        .toString()
+                        .replace('https://localhost', 'webdav://devtools.oopif.test');
+        await fetch(url, {mode: 'no-cors', redirect: 'manual'});
+      } catch (e) {
+      }
+    });
+    await navigateToIssuesTab();
+    await expandIssue();
+    const issueElement = await getIssueByTitle('Ensure no-cors requests configure redirect mode follow');
+    assertNotNull(issueElement);
+    const section = await getResourcesElement('request', issueElement, '.cors-issue-affected-resource-label');
+    const text = await section.label.evaluate(el => el.textContent);
+    assert.strictEqual(text, '1 request');
+    await ensureResourceSectionIsExpanded(section);
+    const table = await extractTableFromResourceSection(section.content);
+    assertNotNull(table);
+    assert.strictEqual(table.length, 2);
+    assert.deepEqual(table[0], [
+      'Request',
+      'Status',
+      'Source Location',
+    ]);
+    assertMatchArray(table[1], [
+      /^devtools.oopif.test.*\//,
+      'blocked',
+      /.*:\d+/,
+    ]);
+  });
 });