@okta/okta-signin-widget 7.15.0 → 7.15.1

package/package.json

@@ -2,7 +2,7 @@
     "private": false,
     "name": "@okta/okta-signin-widget",
     "description": "The Okta Sign-In Widget",
-    "version": "7.15.0",
+    "version": "7.15.1",
     "homepage": "https://github.com/okta/okta-signin-widget",
     "license": "Apache-2.0",
     "repository": {
@@ -291,7 +291,7 @@
         "workerDirectory": "playground"
     },
     "okta": {
-        "commitSha": "6c0484557e0b82ee512ee37a926902f3d7bd63d1",
-        "fullVersion": "7.15.0-g6c04845"
+        "commitSha": "48be3a5bce89767aa556742410c72e54b646d122",
+        "fullVersion": "7.15.1-g48be3a5"
     }
 }

package/src/config/config.json

@@ -1,6 +1,6 @@
 {
   "defaultLanguage": "en",
-  "version": "7.15.0",
+  "version": "7.15.1",
   "supportedLanguages": [
     "en",
     "cs",

package/src/v3/hooks/useOnSubmit.ts

@@ -20,6 +20,7 @@ import {
 } from '@okta/okta-auth-js';
 import { cloneDeep, merge, omit } from 'lodash';
 import { useCallback } from 'preact/hooks';
+import { generateDeviceFingerprint } from 'src/util/deviceFingerprintingUtils';
 
 import { IDX_STEP, ON_PREM_TOKEN_CHANGE_ERROR_KEY } from '../constants';
 import { useWidgetContext } from '../contexts';
@@ -27,6 +28,7 @@ import { MessageType } from '../types';
 import {
   areTransactionsEqual,
   containsMessageKey,
+  getBaseUrl,
   getErrorEventContext,
   getImmutableData,
   isConfigRecoverFlow,
@@ -209,6 +211,16 @@ export const useOnSubmit = (): (options: OnSubmitHandlerOptions) => Promise<void
     if (step === IDX_STEP.CANCEL_TRANSACTION) {
       SessionStorage.removeStateHandle();
     }
+    if (step === IDX_STEP.IDENTIFY && features?.deviceFingerprinting) {
+      const baseUrl = getBaseUrl(widgetProps);
+      if (baseUrl) {
+        // Proceeds with form submission even if device fingerprinting fails
+        const fingerprint = await generateDeviceFingerprint(baseUrl).catch(() => undefined);
+        if (fingerprint) {
+          authClient.http.setRequestHeader('X-Device-Fingerprint', fingerprint);
+        }
+      }
+    }
     setMessage(undefined);
     try {
       let newTransaction = await fn(payload);

package/src/v3/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v3",
-  "version": "7.15.0",
+  "version": "7.15.1",
   "private": true,
   "description": "Okta Sign In Widget Next",
   "homepage": "https://github.com/okta/okta-signin-widget",

package/src/v3/src/hooks/useOnSubmit.ts

@@ -20,6 +20,7 @@ import {
 } from '@okta/okta-auth-js';
 import { cloneDeep, merge, omit } from 'lodash';
 import { useCallback } from 'preact/hooks';
+import { generateDeviceFingerprint } from 'src/util/deviceFingerprintingUtils';
 
 import { IDX_STEP, ON_PREM_TOKEN_CHANGE_ERROR_KEY } from '../constants';
 import { useWidgetContext } from '../contexts';
@@ -27,6 +28,7 @@ import { MessageType } from '../types';
 import {
   areTransactionsEqual,
   containsMessageKey,
+  getBaseUrl,
   getErrorEventContext,
   getImmutableData,
   isConfigRecoverFlow,
@@ -209,6 +211,16 @@ export const useOnSubmit = (): (options: OnSubmitHandlerOptions) => Promise<void
     if (step === IDX_STEP.CANCEL_TRANSACTION) {
       SessionStorage.removeStateHandle();
     }
+    if (step === IDX_STEP.IDENTIFY && features?.deviceFingerprinting) {
+      const baseUrl = getBaseUrl(widgetProps);
+      if (baseUrl) {
+        // Proceeds with form submission even if device fingerprinting fails
+        const fingerprint = await generateDeviceFingerprint(baseUrl).catch(() => undefined);
+        if (fingerprint) {
+          authClient.http.setRequestHeader('X-Device-Fingerprint', fingerprint);
+        }
+      }
+    }
     setMessage(undefined);
     try {
       let newTransaction = await fn(payload);

package/src/v3/src/util/browserUtils.ts

@@ -24,3 +24,7 @@ export const isIOS = (): boolean => (
 );
 
 export const isAndroidOrIOS = (): boolean => isAndroid() || isIOS();
+
+export const getUserAgent = (): string => navigator.userAgent;
+
+export const isWindowsPhone = (userAgent: string): boolean => /windows phone|iemobile|wpdesktop/i.test(userAgent);

package/src/v3/src/util/deviceFingerprintingUtils.test.ts

@@ -0,0 +1,130 @@
+/*
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (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.
+ */
+
+import * as DeviceFingerprintingUtils from './deviceFingerprintingUtils';
+
+describe('DeviceFingerprintingUtils', () => {
+  const oktaDomainUrl = '';
+
+  beforeAll(() => {
+    const mockForm = document.createElement('form');
+    mockForm.setAttribute('data-se', 'o-form');
+    document.body.append(mockForm);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const mockIFrameMessages = (success: boolean, errorMessage?: { type: string }) => {
+    const message = success
+      ? { type: 'FingerprintAvailable', fingerprint: 'thisIsTheFingerprint' }
+      : errorMessage;
+
+    // TODO (jest): event is missing `origin` property
+    window.postMessage(JSON.stringify(message), '*');
+  };
+
+  const mockUserAgent = (userAgent: string) => {
+    jest.spyOn(navigator, 'userAgent', 'get').mockReturnValue(userAgent);
+  };
+
+  const bypassMessageSourceCheck = () => {
+    jest.spyOn(DeviceFingerprintingUtils, 'isMessageFromCorrectSource').mockReturnValue(true);
+  };
+
+  it('creates hidden iframe during fingerprint generation', async () => {
+    mockIFrameMessages(true);
+    bypassMessageSourceCheck();
+    const fingerprintPromise = DeviceFingerprintingUtils.generateDeviceFingerprint(oktaDomainUrl);
+    let iframe = document.getElementById('device-fingerprint-container');
+    expect(iframe).not.toBeNull();
+    expect(iframe).not.toBeVisible();
+    expect(iframe?.getAttribute('src')).toBe('/auth/services/devicefingerprint');
+    await fingerprintPromise;
+    iframe = document.getElementById('device-fingerprint-container');
+    expect(iframe).toBeNull();
+  });
+
+  it('returns a fingerprint if the communication with the iframe is successful', async () => {
+    mockIFrameMessages(true);
+    bypassMessageSourceCheck();
+    const fingerprint = await DeviceFingerprintingUtils.generateDeviceFingerprint(oktaDomainUrl);
+    expect(fingerprint).toBe('thisIsTheFingerprint');
+  });
+
+  it('fails if there is a problem with communicating with the iframe', async () => {
+    mockIFrameMessages(false);
+    bypassMessageSourceCheck();
+
+    await expect(DeviceFingerprintingUtils.generateDeviceFingerprint(oktaDomainUrl))
+      .rejects
+      .toThrow('No data');
+    const iframe = document.getElementById('device-fingerprint-container');
+    expect(iframe).toBeNull();
+  });
+
+  it('fails if the iframe sends invalid message content', async () => {
+    mockIFrameMessages(false, { type: 'InvalidMessageType' });
+    bypassMessageSourceCheck();
+
+    await expect(DeviceFingerprintingUtils.generateDeviceFingerprint(oktaDomainUrl))
+      .rejects
+      .toThrow('No data');
+    const iframe = document.getElementById('device-fingerprint-container');
+    expect(iframe).toBeNull();
+  });
+
+  it('fails if user agent is not defined', async () => {
+    mockUserAgent('');
+    mockIFrameMessages(true);
+    bypassMessageSourceCheck();
+
+    await expect(DeviceFingerprintingUtils.generateDeviceFingerprint(oktaDomainUrl))
+      .rejects
+      .toThrow('User agent is not defined');
+    const iframe = document.getElementById('device-fingerprint-container');
+    expect(iframe).toBeNull();
+  });
+
+  it('fails if it is called from a Windows phone', async () => {
+    mockUserAgent('Windows Phone');
+    mockIFrameMessages(true);
+    bypassMessageSourceCheck();
+
+    await expect(DeviceFingerprintingUtils.generateDeviceFingerprint(oktaDomainUrl))
+      .rejects
+      .toThrow('Device fingerprint is not supported on Windows phones');
+    const iframe = document.getElementById('device-fingerprint-container');
+    expect(iframe).toBeNull();
+  });
+
+  it('fails if the iframe does not receive any messages', async () => {
+    // Not sending any mock messages should trigger a timeout
+    await expect(DeviceFingerprintingUtils.generateDeviceFingerprint(oktaDomainUrl, 1000))
+      .rejects
+      .toThrow('Device fingerprinting timed out');
+    const iframe = document.getElementById('device-fingerprint-container');
+    expect(iframe).toBeNull();
+  });
+
+  it('fails if there is no form to attach the iframe to', async () => {
+    const form = document.querySelector('form[data-se="o-form"]');
+    expect(form).not.toBeNull();
+    document.body.removeChild(form!);
+    await expect(DeviceFingerprintingUtils.generateDeviceFingerprint(oktaDomainUrl))
+      .rejects
+      .toThrow('Form does not exist');
+    const iframe = document.getElementById('device-fingerprint-container');
+    expect(iframe).toBeNull();
+  });
+});

package/src/v3/src/util/deviceFingerprintingUtils.ts

@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (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.
+ */
+
+import { getUserAgent, isWindowsPhone } from './browserUtils';
+
+export const isMessageFromCorrectSource = (iframe: HTMLIFrameElement, event: MessageEvent)
+: boolean => event.source === iframe.contentWindow;
+
+// NOTE: This utility is similar to the DeviceFingerprinting.js file used for V2 authentication flows.
+export const generateDeviceFingerprint = (
+  oktaDomainUrl: string,
+  timeoutDuration?: number,
+): Promise<string> => {
+  const userAgent = getUserAgent();
+  if (!userAgent) {
+    return Promise.reject(new Error('User agent is not defined'));
+  }
+  if (isWindowsPhone(userAgent)) {
+    return Promise.reject(new Error('Device fingerprint is not supported on Windows phones'));
+  }
+
+  let timeout: NodeJS.Timeout;
+  let iframe: HTMLIFrameElement;
+  let listener: (this: Window, ev: MessageEvent) => void;
+  let msg;
+  const formElement = document.querySelector('form[data-se="o-form"]');
+  return new Promise<string>((resolve, reject) => {
+    iframe = document.createElement('iframe');
+    iframe.style.display = 'none';
+    iframe.id = 'device-fingerprint-container';
+
+    listener = (event: MessageEvent) => {
+      if (!isMessageFromCorrectSource(iframe, event)) {
+        return undefined;
+      }
+
+      if (!event || !event.data || event.origin !== oktaDomainUrl) {
+        return reject(new Error('No data'));
+      }
+
+      try {
+        msg = JSON.parse(event.data);
+      } catch (err) {
+        // iframe messages should all be parsable, skip not parsable messages that come from other
+        // sources in the same origin (browser extensions)
+        return undefined;
+      }
+
+      if (!msg) { return undefined; }
+      if (msg.type === 'FingerprintAvailable') {
+        return resolve(msg.fingerprint as string);
+      } if (msg.type === 'FingerprintServiceReady') {
+        const win = iframe.contentWindow;
+        win?.postMessage(JSON.stringify({
+          type: 'GetFingerprint',
+        }), event.origin );
+      } else {
+        return reject(new Error('No data'));
+      }
+      return undefined;
+    };
+    window.addEventListener('message', listener, false);
+
+    iframe.src = `${oktaDomainUrl}/auth/services/devicefingerprint`;
+    if (formElement === null) {
+      reject(new Error('Form does not exist'));
+    }
+    formElement!.appendChild(iframe);
+
+    timeout = setTimeout(() => {
+      // If the iframe does not load, receive the right message type, or there is a slow connection, throw an error
+      reject(new Error('Device fingerprinting timed out'));
+    }, timeoutDuration || 2000);
+  }).finally(() => {
+    clearTimeout(timeout);
+    window.removeEventListener('message', listener);
+    if (formElement?.contains(iframe)) {
+      iframe.parentElement?.removeChild(iframe);
+    }
+  });
+};

package/src/v3/util/browserUtils.ts

@@ -24,3 +24,7 @@ export const isIOS = (): boolean => (
 );
 
 export const isAndroidOrIOS = (): boolean => isAndroid() || isIOS();
+
+export const getUserAgent = (): string => navigator.userAgent;
+
+export const isWindowsPhone = (userAgent: string): boolean => /windows phone|iemobile|wpdesktop/i.test(userAgent);

package/src/v3/util/deviceFingerprintingUtils.ts

@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (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.
+ */
+
+import { getUserAgent, isWindowsPhone } from './browserUtils';
+
+export const isMessageFromCorrectSource = (iframe: HTMLIFrameElement, event: MessageEvent)
+: boolean => event.source === iframe.contentWindow;
+
+// NOTE: This utility is similar to the DeviceFingerprinting.js file used for V2 authentication flows.
+export const generateDeviceFingerprint = (
+  oktaDomainUrl: string,
+  timeoutDuration?: number,
+): Promise<string> => {
+  const userAgent = getUserAgent();
+  if (!userAgent) {
+    return Promise.reject(new Error('User agent is not defined'));
+  }
+  if (isWindowsPhone(userAgent)) {
+    return Promise.reject(new Error('Device fingerprint is not supported on Windows phones'));
+  }
+
+  let timeout: NodeJS.Timeout;
+  let iframe: HTMLIFrameElement;
+  let listener: (this: Window, ev: MessageEvent) => void;
+  let msg;
+  const formElement = document.querySelector('form[data-se="o-form"]');
+  return new Promise<string>((resolve, reject) => {
+    iframe = document.createElement('iframe');
+    iframe.style.display = 'none';
+    iframe.id = 'device-fingerprint-container';
+
+    listener = (event: MessageEvent) => {
+      if (!isMessageFromCorrectSource(iframe, event)) {
+        return undefined;
+      }
+
+      if (!event || !event.data || event.origin !== oktaDomainUrl) {
+        return reject(new Error('No data'));
+      }
+
+      try {
+        msg = JSON.parse(event.data);
+      } catch (err) {
+        // iframe messages should all be parsable, skip not parsable messages that come from other
+        // sources in the same origin (browser extensions)
+        return undefined;
+      }
+
+      if (!msg) { return undefined; }
+      if (msg.type === 'FingerprintAvailable') {
+        return resolve(msg.fingerprint as string);
+      } if (msg.type === 'FingerprintServiceReady') {
+        const win = iframe.contentWindow;
+        win?.postMessage(JSON.stringify({
+          type: 'GetFingerprint',
+        }), event.origin );
+      } else {
+        return reject(new Error('No data'));
+      }
+      return undefined;
+    };
+    window.addEventListener('message', listener, false);
+
+    iframe.src = `${oktaDomainUrl}/auth/services/devicefingerprint`;
+    if (formElement === null) {
+      reject(new Error('Form does not exist'));
+    }
+    formElement!.appendChild(iframe);
+
+    timeout = setTimeout(() => {
+      // If the iframe does not load, receive the right message type, or there is a slow connection, throw an error
+      reject(new Error('Device fingerprinting timed out'));
+    }, timeoutDuration || 2000);
+  }).finally(() => {
+    clearTimeout(timeout);
+    window.removeEventListener('message', listener);
+    if (formElement?.contains(iframe)) {
+      iframe.parentElement?.removeChild(iframe);
+    }
+  });
+};