feat: synchronise csrf info with service worker (#3506)

* feat: synchronise csrf info with service worker

Fixes: #2791
Depends on: #3438

* test(frontend): make old CSRF tests work

* test(endpoint): use Service Worker supportive ChromeDeviceTest

* fix(frontend): make CSRF updates for in SW

* chore(tests): code formatting

* test(endpoint): cleanup leftover sw message handler

* refactor(frontend): cleaner CsrfInfoSource lifecycle / review suggestions

* fix(frontend): enable CSRF metadata updates in Authentication

* refactor(frontend): use CsrfInfoSource for authentication

* Update packages/ts/frontend/src/CsrfInfoSource.ts

Co-authored-by: Soroosh Taefi <[email protected]>

---------

Co-authored-by: Soroosh Taefi <[email protected]>

Author: platosha

packages/java/tests/spring/endpoints/frontend/src/test-component.js

@@ -6,6 +6,13 @@ import { AppEndpoint, PagedEndpoint } from '../generated/endpoints';
 import Direction from '../generated/org/springframework/data/domain/Sort/Direction';
 
 class TestComponent extends PolymerElement {
+  #boundSwMessageListener;
+
+  constructor(props) {
+    super(props);
+    this.#boundSwMessageListener = this.swMessageListener.bind(this);
+  }
+
   static get template() {
     return html`
       <button id="button">vaadin hello</button><br />
@@ -31,6 +38,7 @@ class TestComponent extends PolymerElement {
       <button id="pageOfEntities" on-click="getPageOfEntities">Get page of entities</button>
       <button id="denied" on-click="denied">endpoint denied</button><br />
       <button id="logout" on-click="logout">logout</button><br />
+      <button id="helloAnonymousFromServiceWorker" on-click="helloAnonymousFromServiceWorker">helloAnonymous from serviceWorker</button><br />
       <form method="POST" action="login">
         <input id="username" name="username" />
         <input id="password" name="password" />
@@ -48,6 +56,22 @@ class TestComponent extends PolymerElement {
     await fetch('logout');
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    navigator.serviceWorker?.addEventListener('message', this.#boundSwMessageListener);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    navigator.serviceWorker?.removeEventListener('message', this.#boundSwMessageListener);
+  }
+
+  swMessageListener(event) {
+    if (event.data && event.data.type === 'sw-app-message') {
+      this.$.content.textContent = event.data.text;
+    }
+  }
+
   hello(e) {
     appEndpoint
       .hello('Friend')
@@ -158,5 +182,11 @@ class TestComponent extends PolymerElement {
       .then((response) => (this.$.content.textContent = response))
       .catch((error) => (this.$.content.textContent = 'Error:' + error));
   }
+
+  helloAnonymousFromServiceWorker(e) {
+    window.navigator.serviceWorker?.ready.then((registration) => {
+      registration.active.postMessage('helloAnonymous');
+    });
+  }
 }
 customElements.define(TestComponent.is, TestComponent);

packages/java/tests/spring/endpoints/frontend/sw-app.ts

@@ -4,15 +4,17 @@ import {AppEndpoint} from "Frontend/generated/endpoints";
 
 declare var self: ServiceWorkerGlobalScope;
 
-async function main() {
-  const hello = await AppEndpoint.helloAnonymous();
-  const clients = await self.clients.matchAll({ type: "window" });
-  for (const client of clients) {
-    client.postMessage({
-      type: 'sw-app-hello',
-      hello,
-    });
+self.addEventListener('message', (e: ExtendableMessageEvent) => {
+  let endpoint: undefined | (() => Promise<string | undefined>) = undefined;
+  if (e.data === 'helloAnonymous') {
+    endpoint = AppEndpoint.helloAnonymous;
   }
-}
-// TODO: enable endpoints and call main()
-Promise.reject().then(main, () => {});
+  if (endpoint) {
+    e.waitUntil(endpoint()?.then((result) => {
+      e.source?.postMessage({
+        type: 'sw-app-message',
+        text: `SW message: ${result}`,
+      });
+    }));
+  }
+});

packages/java/tests/spring/endpoints/src/test/java/com/vaadin/flow/connect/ServiceWorkerIT.java

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2000-2017 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.flow.connect;
+
+import com.vaadin.flow.testutil.ChromeDeviceTest;
+import com.vaadin.testbench.TestBenchElement;
+import org.junit.Before;
+import org.junit.Test;
+import org.openqa.selenium.WebElement;
+import org.openqa.selenium.support.ui.ExpectedConditions;
+
+/**
+ * Class for testing issues in a spring-boot container.
+ */
+public class ServiceWorkerIT extends ChromeDeviceTest {
+
+    private void openTestUrl(String url) {
+        getDriver().get(getRootURL() + url);
+    }
+
+    private TestBenchElement testComponent;
+    private WebElement content;
+
+    @Override
+    @Before
+    public void setup() throws Exception {
+        super.setup();
+        load();
+    }
+
+    @Test
+    public void should_requestAnonymously_when_calledInServiceWorker() {
+        WebElement button = testComponent.$(TestBenchElement.class)
+                .id("helloAnonymousFromServiceWorker");
+        button.click();
+
+        // Wait for the server connect response
+        verifyContent("SW message: Hello, stranger!");
+    }
+
+    private void load() {
+        openTestUrl("/");
+        waitForServiceWorkerReady();
+        testComponent = $("test-component").waitForFirst();
+        content = testComponent.$(TestBenchElement.class).id("content");
+    }
+
+    private void verifyContent(String expected) {
+        waitUntil(
+                ExpectedConditions.textToBePresentInElement(content, expected),
+                25);
+    }
+}

packages/ts/frontend/src/Authentication.ts

@@ -1,63 +1,55 @@
 import type { MiddlewareClass, MiddlewareContext, MiddlewareNext } from './Connect.js';
 import CookieManager from './CookieManager.js';
-import {
-  getSpringCsrfInfo,
-  getSpringCsrfTokenHeadersForAuthRequest,
-  getSpringCsrfTokenParametersForAuthRequest,
+import csrfInfoSource, {
   VAADIN_CSRF_HEADER,
-} from './CsrfUtils.js';
+  clearCsrfInfoMeta,
+  type CsrfInfo,
+  CsrfInfoType,
+  extractCsrfInfoFromMeta,
+  updateCsrfInfoMeta,
+} from './CsrfInfoSource.js';
+
+function createHeaders(headerEntries: ReadonlyArray<readonly [name: string, value: string]>): Headers {
+  const headers = new Headers();
+  for (const [name, value] of headerEntries) {
+    headers.append(name, value);
+  }
+  return headers;
+}
 
 const JWT_COOKIE_NAME = 'jwt.headerAndPayload';
 
-function getSpringCsrfTokenFromResponseBody(body: string): Record<string, string> {
+async function getCsrfInfoFromResponseBody(body: string): Promise<CsrfInfo> {
   const doc = new DOMParser().parseFromString(body, 'text/html');
-  return getSpringCsrfInfo(doc);
+  return extractCsrfInfoFromMeta(doc);
 }
 
-function clearSpringCsrfMetaTags() {
-  Array.from(
-    document.head.querySelectorAll('meta[name="_csrf"], meta[name="_csrf_header"], meta[name="_csrf_parameter"]'),
-  ).forEach((el) => el.remove());
-}
-
-function updateSpringCsrfMetaTags(springCsrfInfo: Record<string, string>) {
-  clearSpringCsrfMetaTags();
-  const headerNameMeta: HTMLMetaElement = document.createElement('meta');
-  headerNameMeta.name = '_csrf_header';
-  headerNameMeta.content = springCsrfInfo._csrf_header;
-  document.head.appendChild(headerNameMeta);
-  const tokenMeta: HTMLMetaElement = document.createElement('meta');
-  tokenMeta.name = '_csrf';
-  tokenMeta.content = springCsrfInfo._csrf;
-  document.head.appendChild(tokenMeta);
-}
-
-const getVaadinCsrfTokenFromResponseBody = (body: string): string | undefined => {
-  const match = /window\.Vaadin = \{TypeScript: \{"csrfToken":"([0-9a-zA-Z\\-]{36})"\}\};/iu.exec(body);
-  return match ? match[1] : undefined;
-};
-
-async function updateCsrfTokensBasedOnResponse(response: Response): Promise<string | undefined> {
+async function updateCsrfTokensBasedOnResponse(response: Response): Promise<void> {
   const responseText = await response.text();
-  const token = getVaadinCsrfTokenFromResponseBody(responseText);
-  const springCsrfTokenInfo = getSpringCsrfTokenFromResponseBody(responseText);
-  updateSpringCsrfMetaTags(springCsrfTokenInfo);
-
-  return token;
+  const csrfInfo = await getCsrfInfoFromResponseBody(responseText);
+  updateCsrfInfoMeta(csrfInfo, document);
 }
 
-async function doFetchLogout(logoutUrl: URL | string, headers: Record<string, string>) {
+async function doFetchLogout(
+  logoutUrl: URL | string,
+  headerEntries: ReadonlyArray<readonly [name: string, value: string]>,
+) {
+  const headers = createHeaders(headerEntries);
   const response = await fetch(logoutUrl, { headers, method: 'POST' });
   if (!response.ok) {
     throw new Error(`failed to logout with response ${response.status}`);
   }
 
   await updateCsrfTokensBasedOnResponse(response);
+  csrfInfoSource.reset();
 
   return response;
 }
 
-async function doFormLogout(url: URL | string, parameters: Record<string, string>): Promise<void> {
+async function doFormLogout(
+  url: URL | string,
+  formDataEntries: ReadonlyArray<readonly [name: string, value: string]>,
+): Promise<void> {
   const logoutUrl = typeof url === 'string' ? url : url.toString();
 
   // Create form to send POST request
@@ -67,7 +59,7 @@ async function doFormLogout(url: URL | string, parameters: Record<string, string
   form.style.display = 'none';
 
   // Add data to form as hidden input fields
-  for (const [name, value] of Object.entries(parameters)) {
+  for (const [name, value] of formDataEntries) {
     const input = document.createElement('input');
     input.setAttribute('type', 'hidden');
     input.setAttribute('name', name);
@@ -96,17 +88,18 @@ async function doLogout(doc: Document, options?: LogoutOptions): Promise<Respons
   const shouldSubmitFormLogout = !options?.navigate && !options?.onSuccess;
   // this assumes the default Spring Security logout configuration (handler URL)
   const logoutUrl = options?.logoutUrl ?? 'logout';
+  const csrfInfo = doc === document ? await csrfInfoSource.get() : await extractCsrfInfoFromMeta(doc);
   if (shouldSubmitFormLogout) {
-    const parameters = getSpringCsrfTokenParametersForAuthRequest(doc);
-    await doFormLogout(logoutUrl, parameters);
+    const formDataEntries = csrfInfo.type === CsrfInfoType.SPRING ? csrfInfo.formDataEntries : [];
+    await doFormLogout(logoutUrl, formDataEntries);
     // This should never be reached, as form submission will navigate away
     return new Response(null, {
       status: 500,
       statusText: 'Form submission did not navigate away.',
     } as ResponseInit);
   }
-  const headers = getSpringCsrfTokenHeadersForAuthRequest(doc);
-  return await doFetchLogout(logoutUrl, headers);
+  const headerEntries = csrfInfo.type === CsrfInfoType.SPRING ? csrfInfo.headerEntries : [];
+  return await doFetchLogout(logoutUrl, headerEntries);
 }
 
 export interface LoginResult {
@@ -200,8 +193,9 @@ export async function login(username: string, password: string, options?: LoginO
     data.append('password', password);
 
     const loginProcessingUrl = options?.loginProcessingUrl ?? 'login';
-    const headers = getSpringCsrfTokenHeadersForAuthRequest(document);
-    headers.source = 'typescript';
+    const csrfInfo = await csrfInfoSource.get();
+    const headers = createHeaders(csrfInfo.headerEntries);
+    headers.append('source', 'typescript');
     const response = await fetch(loginProcessingUrl, {
       body: data,
       headers,
@@ -217,16 +211,19 @@ export async function login(username: string, password: string, options?: LoginO
     const loginSuccessful = response.ok && result === 'success';
 
     if (loginSuccessful) {
-      const vaadinCsrfToken = response.headers.get('Vaadin-CSRF') ?? undefined;
-
       const springCsrfHeader = response.headers.get('Spring-CSRF-header') ?? undefined;
       const springCsrfToken = response.headers.get('Spring-CSRF-token') ?? undefined;
       if (springCsrfHeader && springCsrfToken) {
-        const springCsrfTokenInfo: Record<string, string> = {};
-        springCsrfTokenInfo._csrf = springCsrfToken;
-        // eslint-disable-next-line camelcase
-        springCsrfTokenInfo._csrf_header = springCsrfHeader;
-        updateSpringCsrfMetaTags(springCsrfTokenInfo);
+        updateCsrfInfoMeta(
+          {
+            headerEntries: [[springCsrfHeader, springCsrfToken]],
+            formDataEntries: [],
+            type: CsrfInfoType.SPRING,
+            timestamp: Date.now(),
+          },
+          document,
+        );
+        csrfInfoSource.reset();
       }
 
       if (options?.onSuccess) {
@@ -242,7 +239,6 @@ export async function login(username: string, password: string, options?: LoginO
         defaultUrl,
         error: false,
         redirectUrl: savedUrl,
-        token: vaadinCsrfToken,
       };
     }
     return {
@@ -279,7 +275,8 @@ export async function logout(options?: LogoutOptions): Promise<void> {
       response = await doLogout(doc, options);
     } catch (error) {
       // clear the token if the call fails
-      clearSpringCsrfMetaTags();
+      clearCsrfInfoMeta(document);
+      csrfInfoSource.reset();
       throw error;
     }
   } finally {

packages/ts/frontend/src/Connect.ts

@@ -1,6 +1,6 @@
 import type { ReactiveControllerHost } from '@lit/reactive-element';
 import type * as CommonFrontendModule from '@vaadin/common-frontend';
-import { getCsrfTokenHeadersForEndpointRequest } from './CsrfUtils.js';
+import csrfInfoSource from './CsrfInfoSource.js';
 import {
   EndpointError,
   EndpointResponseError,
@@ -356,11 +356,10 @@ export class ConnectClient {
       throw new TypeError(`2 arguments required, but got only ${arguments.length}`);
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    const csrfHeaders = globalThis.document ? getCsrfTokenHeadersForEndpointRequest(globalThis.document) : {};
+    const csrfInfo = await csrfInfoSource.get();
     const headers: Record<string, string> = {
       Accept: 'application/json',
-      ...csrfHeaders,
+      ...Object.fromEntries(csrfInfo.headerEntries),
     };
 
     const [paramsWithoutFiles, files] = extractFiles(params ?? {});

packages/ts/frontend/src/CookieManager.ts

@@ -5,8 +5,10 @@ export function calculatePath({ pathname }: URL): string {
 }
 
 const CookieManager: typeof Cookies = Cookies.withAttributes({
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  path: calculatePath(new URL(globalThis.document?.baseURI ?? globalThis.location?.href ?? 'data:')),
+  path: calculatePath(
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    globalThis.document ? new URL(globalThis.document.baseURI) : new URL('.', globalThis.location.href),
+  ),
 });
 
 export default CookieManager;