Adds option to disable luigiCookie (#3946)

client/src/lifecycleManager.js

@@ -91,6 +91,7 @@ class LifecycleManager extends LuigiClientBase {
       helpers.setLuigiCoreDomain(e.origin);
       this.luigiInitialized = true;
       this._notifyInit(e.origin);
+      this._tpcCheck();
       helpers.sendPostMessageToLuigiCore({ msg: 'luigi.init.ok' });
     });
 
@@ -135,10 +136,12 @@ class LifecycleManager extends LuigiClientBase {
       },
       '*'
     );
-    this._tpcCheck();
   }
 
   _tpcCheck() {
+    if (this.currentContext?.internal?.thirdPartyCookieCheck?.disabled) {
+      return;
+    }
     let tpc = 'enabled';
     let cookies = document.cookie;
     let luigiCookie;

container/.gitignore

@@ -9,6 +9,7 @@
 /test-app/bundle.js
 /test-app/bundle.js.map
 /test-app/compound/luigi-element.js
+/test-app/iframe/luigi-client.js
 /public/**/*.ts
 
 /coverage

container/cypress/e2e/test-app/iframe/iframe-container.cy.js

@@ -7,6 +7,19 @@ describe('Iframe Container Test', () => {
     stub = cy.stub();
   });
 
+  it('should sent third party cookies request', () => {
+    cy.on('window:alert', stub);
+
+    cy.get(containerSelector).should('not.have.attr', 'skip-cookie-check');
+    cy.get(containerSelector)
+      .shadow()
+      .get('iframe')
+      .then(() => {
+        cy.wrap(stub).should('have.been.calledWith', 'set-third-party-cookies-request');
+        cy.getCookie('luigiCookie').should('exist');
+      });
+  });
+
   it('navigation sent', () => {
     cy.get(containerSelector)
       .shadow()
@@ -24,13 +37,12 @@ describe('Iframe Container Test', () => {
   });
 
   it('sendCustomMessage', () => {
-    cy.get('#btn-1')
-      .click()
+    cy.get('#btn-1').click();
     cy.get(containerSelector)
       .shadow()
       .get('iframe')
       .then(iframe => {
-        const $body = iframe.contents().find('body')
+        const $body = iframe.contents().find('body');
         cy.wrap($body)
           .find('#content')
           .should('have.text', 'Received Custom Message: some data');

container/cypress/e2e/test-app/iframe/iframe-cookies.cy.js

@@ -0,0 +1,24 @@
+describe('Iframe Cookies Test', () => {
+  const containerSelector = '[data-test-id="iframe-based-container-test"]';
+  let stub;
+
+  beforeEach(() => {
+    cy.visit('http://localhost:8080/iframe/iframe-cookies.html');
+    stub = cy.stub();
+  });
+
+  it('should not sent third party cookies request', () => {
+    cy.on('window:alert', stub);
+
+    cy.get(containerSelector)
+      .should('have.attr', 'skip-cookie-check')
+      .and('match', /true/);
+    cy.get(containerSelector)
+      .shadow()
+      .get('iframe')
+      .then(() => {
+        cy.wrap(stub).should('not.have.been.calledWith', 'set-third-party-cookies-request');
+        cy.getCookie('luigiCookie').should('not.exist');
+      });
+  });
+});

container/package.json

@@ -18,8 +18,9 @@
     "bundle": "npm run build",
     "dev": "rollup -c -w",
     "copyBundle": "cp public/bundle.js public/bundle.js.map test-app/ && cp public/bundle.js public/bundle.js.map  examples/ || COPY public\\* test-app\\",
+    "copyLuigiClient": "cp ../client/public/luigi-client.js test-app/iframe",
     "copyLuigiElement": "cp ../client/src/luigi-element.js test-app/compound",
-    "serve": "npm run build && npm run copyLuigiElement && npm run copyBundle && sirv -D -c test-app --no-clear",
+    "serve": "npm run build && npm run copyLuigiClient && npm run copyLuigiElement && npm run copyBundle && sirv -D -c test-app --no-clear",
     "bundle:watch": "chokidar \"src/**/*.*\" -c \"npm run build && npm run copyBundle\"",
     "start": "concurrently -k \"npm run serve\" \"npm run bundle:watch\"",
     "start-examples":"npm run copyBundle && sirv -D -c examples --no-clear",

container/src/LuigiContainer.svelte

@@ -20,6 +20,7 @@
       pathParams: { type: 'Object', reflect: false, attribute: 'path-params' },
       sandboxRules: { type: 'Array', reflect: false, attribute: 'sandbox-rules' },
       searchParams: { type: 'Object', reflect: false, attribute: 'search-params' },
+      skipCookieCheck: { type: 'String', reflect: false, attribute: 'skip-cookie-check' },
       skipInitCheck: { type: 'Boolean', reflect: false, attribute: 'skip-init-check' },
       theme: { type: 'String', reflect: false, attribute: 'theme' },
       userSettings: { type: 'Object', reflect: false, attribute: 'user-settings' },
@@ -79,6 +80,7 @@
   export let pathParams: any;
   export let sandboxRules: string[];
   export let searchParams: any;
+  export let skipCookieCheck: 'false' | 'true';
   export let skipInitCheck: boolean;
   export let theme: string;
   export let userSettings: any;
@@ -113,6 +115,7 @@
       pathParams &&
       sandboxRules &&
       searchParams &&
+      skipCookieCheck &&
       skipInitCheck &&
       theme &&
       userSettings

container/src/services/container.service.ts

@@ -106,7 +106,11 @@ export class ContainerService {
                   {
                     msg: LuigiInternalMessageID.SEND_CONTEXT_HANDSHAKE,
                     context: targetCnt.context || {},
-                    internal: {},
+                    internal: {
+                      thirdPartyCookieCheck: {
+                        disabled: targetCnt.skipCookieCheck === 'true'
+                      }
+                    },
                     authData: targetCnt.authData || {}
                   },
                   '*'

container/test-app/iframe/iframe-cookies.html

@@ -0,0 +1,38 @@
+<html>
+  <head>
+    <script type="module">
+      import '../bundle.js';
+    </script>
+  </head>
+  <body>
+    <h3>
+      This page is used to test  **skip-cookie-check** feature for iFrame based LuigiContainer
+    </h3>
+
+    <div style="border:solid 1px blue; height: 400px">
+      <!-- Luigi Container to test general functionality-->
+      <luigi-container
+        data-test-id="iframe-based-container-test"
+        viewURL="./microfrontend.html"
+        skip-cookie-check="true"
+      ></luigi-container>
+    </div>
+
+    <script type="module">
+      import Events from '../bundle.js';
+
+      const luigiContainer = document.querySelector(
+        '[data-test-id="iframe-based-container-test"]'
+      );
+
+      // SET_THIRD_PARTY_COOKIES_REQUEST - called on microfrontend startup
+      luigiContainer.addEventListener(Events.SET_THIRD_PARTY_COOKIES_REQUEST, event => {
+        console.log(Events.SET_THIRD_PARTY_COOKIES_REQUEST, event);
+        alert(
+          Events.SET_THIRD_PARTY_COOKIES_REQUEST,
+          'message received: ' + JSON.stringify(event.detail.data.data)
+        );
+      });
+    </script>
+  </body>
+</html>

container/test-app/iframe/microfrontend.html

@@ -4,7 +4,7 @@
   <head>
     <title></title>
     <meta charset="utf-8" />
-    <script src="https://fiddle.luigi-project.io/vendor/luigi-client/luigi-client.js"></script>
+    <script src="./luigi-client.js"></script>
     <style>
       html,
       body {

container/test-app/index.html

@@ -68,6 +68,11 @@ <h1>Container Test-App</h1>
             <td><a href="iframe/iframe-settings.html">iFrame Settings</a></td>
             <td><a href="compound/nested.html">Nested</a></td>
           </tr>
+          <tr>
+            <td><a href="#">-</a></td>
+            <td><a href="iframe/iframe-cookies.html">iFrame Cookies</a></td>
+            <td><a href="#">-</a></td>
+          </tr>
           <!-- Add more rows as needed -->
         </tbody>
       </table>

container/test/services/container.service.spec.ts

@@ -68,7 +68,7 @@ describe('getContainerManager messageListener', () => {
     gtcSpy.mockRestore();
   });
 
-  it('test get context message', () => {    
+  it('test get context message', () => {
     const event = {
       source: cw,
       data: {
@@ -87,7 +87,16 @@ describe('getContainerManager messageListener', () => {
      cw.postMessage = postMessageMock;
 
     // Define the message to send and target Origin
-    const message = {"context": {}, "internal": {}, "msg": "luigi.init", "authData":{}};
+    const message = {
+      "authData":{},
+      "context": {},
+      "internal": {
+        "thirdPartyCookieCheck": {
+          "disabled": false
+        }
+      },
+      "msg": "luigi.init"
+    };
     const targetOrigin = "*";
 
     // Call the method that should trigger postMessage

container/typings/LuigiContainer.svelte.d.ts

@@ -71,6 +71,12 @@ export default class LuigiContainer extends HTMLElement {
    */
   activeFeatureToggleList: string[];
 
+  /**
+   * If set to true, skips third party cookie check
+   * @since NEXT_RELEASE_CONTAINER
+   */
+  skipCookieCheck: 'false' | 'true';
+
   /**
    * If set to true, skips handshake and ready event is fired immediately
    * @since 1.0.0

core/src/App.svelte

@@ -120,6 +120,7 @@
       isNavigateBack,
       viewStackSize: preservedViews.length,
       clientPermissions: iframeConf.nextViewUrl ? iframeConf.nextClientPermissions : iframeConf.clientPermissions,
+      thirdPartyCookieCheck: await LuigiConfig.getConfigValue('settings.thirdPartyCookieCheck'),
       userSettings: hasUserSettings ? userSettingGroups[userSettingsGroupName] : null,
       anchor: LuigiRouting.getAnchor(),
       cssVariables: await LuigiTheming.getCSSVariables()

docs/general-settings.md

@@ -53,6 +53,7 @@ settings: {
     hideAutomatically: true
   },
   thirdPartyCookieCheck = {
+    //disabled: true,
     //thirdPartyCookieScriptLocation: 'https://domain/init.html',
     thirdPartyCookieErrorHandling: () => {
       const alert = {
@@ -298,15 +299,19 @@ This function is called with the following parameters:
 
 ## Third-party cookies support check
 
-You can check whether the user's browser supports third-party cookies by defining a **thirdPartyCookieCheck** object which expects a function called **thirdPartyCookieErrorHandling** and an optional **thirdPartyCookiesScriptLocation** parameter. When **thirdPartyCookiesScriptLocation** is set, the Luigi Core application checks third-party cookie support only once and not on every micro frontend call. If it is *not* set, the Luigi Core application checks third-party cookie support whenever a micro frontend is loaded.
+You can check whether the user's browser supports third-party cookies by defining a **thirdPartyCookieCheck** object which expects a function called **thirdPartyCookieErrorHandling**, optional **disabled** and **thirdPartyCookiesScriptLocation** parameters. When **thirdPartyCookiesScriptLocation** is set, the Luigi Core application checks third-party cookie support only once and not on every micro frontend call. If it is *not* set, the Luigi Core application checks third-party cookie support whenever a micro frontend is loaded.
 
 To detect whether the user's browser supports the mechanism, use the script in the [`third-party-cookies`](https://github.com/SAP/luigi/tree/main/core/third-party-cookies) catalog. Deploy this file on a domain different from your main application's and set **thirdPartyCookieScriptLocation** to the `init.html` file. During initialization, Luigi detects cookies support and produces an alert if cookies are disabled in the user's browser.
 
 ### Parameters
 
 #### thirdPartyCookieCheck
 - **type**: object
-- **description**: object defined in the general settings part of the Luigi configuration file, containing the **thirdPartyCookieErrorHandling** function and an optional **thirdPartyCookiesScriptLocation** parameter.
+- **description**: object defined in the general settings part of the Luigi configuration file, containing the **thirdPartyCookieErrorHandling** function and optional **disabled** and **thirdPartyCookiesScriptLocation** parameters.
+
+#### disabled
+- **type**: boolean
+- **description**: if set to true **thirdPartyCookieCheck** is ignored.
 
 #### thirdPartyCookieErrorHandling
 - **type**: function

docs/luigi-container-api.md

@@ -121,6 +121,16 @@ Type: [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global
 
 *   **since**: 1.0.0
 
+### skipCookieCheck
+
+If set to true, skips third party cookie check
+
+Type: (`"false"` | `"true"`)
+
+**Meta**
+
+*   **since**: NEXT_RELEASE_CONTAINER
+
 ### skipInitCheck
 
 If set to true, skips handshake and ready event is fired immediately