Detect cookies on login page

x-pack/plugins/security/public/authentication/login/login_app.test.ts

@@ -18,7 +18,7 @@ describe('loginApp', () => {
 
     loginApp.create({
       ...coreSetupMock,
-      config: { loginAssistanceMessage: '' },
+      config: { loginAssistanceMessage: '', sameSiteCookies: undefined },
     });
 
     expect(coreSetupMock.http.anonymousPaths.register).toHaveBeenCalledTimes(1);
@@ -43,7 +43,7 @@ describe('loginApp', () => {
 
     loginApp.create({
       ...coreSetupMock,
-      config: { loginAssistanceMessage: 'some-message' },
+      config: { loginAssistanceMessage: 'some-message', sameSiteCookies: undefined },
     });
 
     const [[{ mount }]] = coreSetupMock.application.register.mock.calls;

x-pack/plugins/security/public/authentication/login/login_app.ts

@@ -19,7 +19,7 @@ interface CreateDeps {
   application: ApplicationSetup;
   http: HttpSetup;
   getStartServices: StartServicesAccessor;
-  config: Pick<ConfigType, 'loginAssistanceMessage'>;
+  config: Pick<ConfigType, 'loginAssistanceMessage' | 'sameSiteCookies'>;
 }
 
 export const loginApp = Object.freeze({
@@ -44,6 +44,7 @@ export const loginApp = Object.freeze({
             notifications: coreStart.notifications,
             fatalErrors: coreStart.fatalErrors,
             loginAssistanceMessage: config.loginAssistanceMessage,
+            sameSiteCookies: config.sameSiteCookies,
           }
         );
       },

x-pack/plugins/security/public/authentication/login/login_page.test.tsx

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { EuiFlexItem } from '@elastic/eui';
 import { act } from '@testing-library/react';
 import { shallow } from 'enzyme';
 import React from 'react';
@@ -75,6 +76,20 @@ describe('LoginPage', () => {
   });
 
   describe('disabled form states', () => {
+    const originalNavigator = window.navigator;
+    const originalTop = window.top;
+
+    afterEach(function () {
+      Object.defineProperty(window, 'navigator', {
+        value: originalNavigator,
+        writable: true,
+      });
+      Object.defineProperty(window, 'top', {
+        value: originalTop,
+        writable: true,
+      });
+    });
+
     it('renders as expected when secure connection is required but not present', async () => {
       const coreStartMock = coreMock.createStart();
       httpMock.get.mockResolvedValue(createLoginState({ requiresSecureConnection: true }));
@@ -183,6 +198,94 @@ describe('LoginPage', () => {
 
       expect(wrapper.find(DisabledLoginForm)).toMatchSnapshot();
     });
+
+    it('renders CTA and cross-origin cookie warning when cookies are disabled, document is embedded inside iframe, and cross-origin cookies are blocked', async () => {
+      const coreStartMock = coreMock.createStart();
+      httpMock.get.mockResolvedValue(createLoginState());
+
+      Object.defineProperty(window, 'navigator', {
+        value: { cookieEnabled: false },
+        writable: true,
+      });
+      Object.defineProperty(window, 'top', {
+        value: {},
+        writable: true,
+      });
+
+      const wrapper = shallow(
+        <LoginPage
+          http={httpMock}
+          notifications={coreStartMock.notifications}
+          fatalErrors={coreStartMock.fatalErrors}
+          loginAssistanceMessage=""
+          sameSiteCookies="Lax"
+        />
+      );
+
+      await act(async () => {
+        await nextTick();
+        wrapper.update();
+      });
+
+      expect(wrapper.find(EuiFlexItem).children()).toMatchSnapshot();
+    });
+
+    it('renders CTA and browser settings warning when cookies are disabled, document is embedded inside iframe, and cross-origin cookies are allowed', async () => {
+      const coreStartMock = coreMock.createStart();
+      httpMock.get.mockResolvedValue(createLoginState());
+
+      Object.defineProperty(window, 'navigator', {
+        value: { cookieEnabled: false },
+        writable: true,
+      });
+      Object.defineProperty(window, 'top', {
+        value: {},
+        writable: true,
+      });
+
+      const wrapper = shallow(
+        <LoginPage
+          http={httpMock}
+          notifications={coreStartMock.notifications}
+          fatalErrors={coreStartMock.fatalErrors}
+          loginAssistanceMessage=""
+          sameSiteCookies="None"
+        />
+      );
+
+      await act(async () => {
+        await nextTick();
+        wrapper.update();
+      });
+
+      expect(wrapper.find(EuiFlexItem).children()).toMatchSnapshot();
+    });
+
+    it('renders warning when cookies are disabled and document is not embedded inside iframe', async () => {
+      const coreStartMock = coreMock.createStart();
+      httpMock.get.mockResolvedValue(createLoginState());
+
+      Object.defineProperty(window, 'navigator', {
+        value: { cookieEnabled: false },
+        writable: true,
+      });
+
+      const wrapper = shallow(
+        <LoginPage
+          http={httpMock}
+          notifications={coreStartMock.notifications}
+          fatalErrors={coreStartMock.fatalErrors}
+          loginAssistanceMessage=""
+        />
+      );
+
+      await act(async () => {
+        await nextTick();
+        wrapper.update();
+      });
+
+      expect(wrapper.find(DisabledLoginForm)).toMatchSnapshot();
+    });
   });
 
   describe('enabled form state', () => {