@ukeyfe/hardware-web-sdk 1.1.13

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@ukeyfe/hardware-web-sdk",
+  "version": "1.1.13",
+  "author": "UKey",
+  "homepage": "https://github.com/UKeyHQ/hardware-js-sdk#readme",
+  "license": "ISC",
+  "type": "commonjs",
+  "main": "build/ukey-js-sdk.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "rimraf build && cross-env TS_NODE_PROJECT=\"../../tsconfig.webpack.json\" webpack --config ./webpack/dev.webpack.config.ts",
+    "build:lib": "rimraf ./dist && tsc --build tsconfig.json",
+    "build:iframe": "cross-env TS_NODE_PROJECT=\"../../tsconfig.webpack.json\" webpack --config ./webpack/iframe.webpack.config.ts",
+    "build:sdk": "rimraf build && cross-env TS_NODE_PROJECT=\"../../tsconfig.webpack.json\" webpack --config ./webpack/prod.webpack.config.ts",
+    "build": "yarn build:sdk && yarn build:iframe && yarn build:lib",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "@ukeyfe/cross-inpage-provider-core": "^2.2.47",
+    "@ukeyfe/hardware-core": "1.1.13",
+    "@ukeyfe/hardware-shared": "1.1.13",
+    "@ukeyfe/hardware-transport-http": "1.1.13",
+    "@ukeyfe/hardware-transport-web-device": "1.1.13"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.17.12",
+    "@types/node": "^17.0.35",
+    "@types/webpack": "^5.28.0",
+    "@types/webpack-plugin-serve": "^1.4.2",
+    "assert": "^2.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "crypto-browserify": "^3.12.0",
+    "es6-promise": "^4.2.8",
+    "events": "^3.3.0",
+    "html-webpack-plugin": "^5.5.0",
+    "process": "^0.11.10",
+    "stream-browserify": "^3.0.0",
+    "terser-webpack-plugin": "^5.3.1",
+    "util": "^0.12.4",
+    "webpack": "^5.76.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-plugin-serve": "^1.6.0"
+  }
+}

package/src/iframe/bridge-config.ts

@@ -0,0 +1,13 @@
+const config: {
+  iframeName: string;
+  hostName: string;
+  channel: string;
+  scope: '$hardware_sdk';
+} = {
+  iframeName: 'onekey-iframe', //todo 应该到我们自己版本后改为ukey
+  hostName: 'onekey-host',
+  channel: 'onekey-js-sdk',
+  scope: '$hardware_sdk',
+};
+
+export default config;

package/src/iframe/builder.ts

@@ -0,0 +1,98 @@
+import { Deferred, createDeferred, HardwareErrorCode, ERRORS } from '@ukeyfe/hardware-shared';
+import { getOrigin } from '../utils/urlUtils';
+
+/* eslint-disable import/no-mutable-exports */
+export let instance: HTMLIFrameElement | null;
+export let origin: string;
+export let initPromise: Deferred<void> = createDeferred();
+export let timeout = 0;
+/* eslint-disable import/no-mutable-exports */
+
+export const init = async (settings: any) => {
+  initPromise = createDeferred();
+  const existedFrame = document.getElementById('ukey-connect') as HTMLIFrameElement;
+  if (existedFrame) {
+    instance = existedFrame;
+  } else {
+    instance = document.createElement('iframe');
+    instance.frameBorder = '0';
+    instance.width = '0px';
+    instance.height = '0px';
+    instance.style.position = 'absolute';
+    instance.style.display = 'none';
+    instance.style.border = '0px';
+    instance.style.width = '0px';
+    instance.style.height = '0px';
+    instance.id = 'ukey-connect';
+    instance.allow = 'usb';
+  }
+
+  // const manifest = `version=${settings.version as string}`;
+  const src = `${settings.iframeSrc as string}`;
+
+  instance.setAttribute('src', src);
+
+  origin = getOrigin(instance.src);
+  timeout = window.setTimeout(() => {
+    initPromise.reject(ERRORS.TypedError(HardwareErrorCode.IframeTimeout));
+  }, 10000);
+
+  const onLoad = () => {
+    if (!instance) {
+      initPromise.reject(ERRORS.TypedError(HardwareErrorCode.IframeBlocked));
+      return;
+    }
+
+    instance.contentWindow?.postMessage(
+      {
+        type: 'iframe-init',
+        payload: {
+          settings: { ...settings },
+        },
+      },
+      origin
+    );
+
+    instance.onload = null;
+  };
+
+  // IE hack
+  // @ts-ignore
+  if (instance.attachEvent) {
+    // @ts-ignore
+    instance.attachEvent('onload', onLoad);
+  } else {
+    instance.onload = onLoad;
+  }
+  // inject iframe into host document body
+  if (document.body) {
+    document.body.appendChild(instance);
+  }
+
+  try {
+    await initPromise.promise;
+  } catch (e) {
+    if (instance) {
+      if (instance.parentNode) {
+        instance.parentNode.removeChild(instance);
+      }
+      instance = null;
+    }
+    throw e;
+  } finally {
+    window.clearTimeout(timeout);
+    timeout = 0;
+  }
+};
+
+export const dispose = () => {
+  if (instance && instance.parentNode) {
+    try {
+      instance.parentNode.removeChild(instance);
+    } catch (e) {
+      // do nothing
+    }
+  }
+  instance = null;
+  timeout = 0;
+};

package/src/iframe/index.ts

@@ -0,0 +1,127 @@
+import HttpTransport from '@ukeyfe/hardware-transport-http';
+import EmulatorTransport from '@ukeyfe/hardware-transport-emulator';
+import { WebUsbTransport } from '@ukeyfe/hardware-transport-web-device';
+import {
+  PostMessageEvent,
+  IFRAME,
+  parseMessage,
+  DataManager,
+  parseConnectSettings,
+  IFrameInit,
+  createIFrameMessage,
+  createErrorMessage,
+  initCore,
+  switchTransport,
+  Core,
+  CORE_EVENT,
+  getLogger,
+  LoggerNames,
+  LogBlockEvent,
+  ConnectSettings,
+} from '@ukeyfe/hardware-core';
+import { get } from 'lodash';
+import { getOrigin } from '../utils/urlUtils';
+import { sendMessage, createJsBridge } from '../utils/bridgeUtils';
+
+import JSBridgeConfig from './bridge-config';
+import { isExtensionWhitelisted, isOriginWhitelisted } from '..';
+
+let _core: Core | undefined;
+const Log = getLogger(LoggerNames.Iframe);
+
+const getTransport = (env: ConnectSettings['env']) => {
+  if (env === 'webusb') return WebUsbTransport;
+  if (env === 'emulator') return EmulatorTransport;
+  return HttpTransport;
+};
+
+const handleMessage = (event: PostMessageEvent) => {
+  if (event.source === window || !event.data) return;
+
+  // is message from popup or extension
+  const whitelist = isOriginWhitelisted(event.origin) || isExtensionWhitelisted(event.origin);
+  const isTrustedDomain = event.origin === window.location.origin || !!whitelist;
+
+  // ignore messages from domain other then parent.window or popup.window or chrome extension
+  const eventOrigin = getOrigin(event.origin);
+
+  if (
+    !isTrustedDomain &&
+    eventOrigin !== DataManager.getSettings('origin') &&
+    eventOrigin !== getOrigin(document.referrer)
+  ) {
+    return;
+  }
+
+  const message = parseMessage(event);
+
+  if (message.type === IFRAME.INIT) {
+    init(message.payload ?? {});
+  }
+};
+
+export async function init(payload: IFrameInit['payload']) {
+  if (DataManager.getSettings('origin')) return;
+
+  const settings = parseConnectSettings({
+    ...(payload.settings ?? {}),
+    isFrame: true,
+  });
+  // set origin manually
+  settings.origin = !origin || origin === 'null' ? payload.settings.origin : origin;
+
+  Log.enabled = !!settings.debug;
+
+  try {
+    const Transport = getTransport(settings.env);
+    _core = await initCore(settings, Transport);
+    _core?.on(CORE_EVENT, messages => sendMessage(messages, false));
+  } catch (error) {
+    return createErrorMessage(error);
+  }
+
+  createJsBridge({
+    isHost: false,
+    remoteFrame: window.parent,
+    remoteFrameName: JSBridgeConfig.hostName,
+    selfFrameName: JSBridgeConfig.iframeName,
+    channel: JSBridgeConfig.channel,
+    targetOrigin: getOrigin(settings.parentOrigin as string),
+    receiveHandler: async messageEvent => {
+      const message = parseMessage(messageEvent);
+      const blockLog = LogBlockEvent.has(get(message, 'type')) ? message.type : undefined;
+      if (blockLog) {
+        Log.debug('Frame Bridge Receive message: ', blockLog);
+      } else {
+        Log.debug('Frame Bridge Receive message: ', message);
+      }
+
+      if (message.event === IFRAME.SWITCH_TRANSPORT) {
+        switchCoreTransport(message.payload.env);
+        return { success: true, payload: {} };
+      }
+
+      const response = await _core?.handleMessage(message);
+      if (blockLog) {
+        Log.debug('Frame Bridge response message: ', blockLog);
+      } else {
+        Log.debug('Frame Bridge response message: ', message);
+      }
+      return response;
+    },
+  });
+
+  await sendMessage(createIFrameMessage(IFRAME.INIT_BRIDGE, {}), false);
+}
+
+export const switchCoreTransport = (env: ConnectSettings['env']) => {
+  if (_core) {
+    const Transport = getTransport(env);
+    switchTransport({
+      env,
+      Transport,
+    });
+  }
+};
+
+window.addEventListener('message', handleMessage, false);

package/src/index.ts

@@ -0,0 +1,302 @@
+import EventEmitter from 'events';
+import HardwareSdk, {
+  HardwareSDKLowLevel as HardwareLowLevelSdk,
+  HardwareTopLevelSdk,
+  parseConnectSettings,
+  enableLog,
+  PostMessageEvent,
+  IFRAME,
+  createErrorMessage,
+  parseMessage,
+  UI_EVENT,
+  CoreMessage,
+  ConnectSettings,
+  UiResponseEvent,
+  LOG_EVENT,
+  setLoggerPostMessage,
+  getLogger,
+  LoggerNames,
+  FIRMWARE_EVENT,
+  DEVICE_EVENT,
+  DEVICE,
+  UI_REQUEST,
+  whitelist,
+  executeCallback,
+} from '@ukeyfe/hardware-core';
+import { ERRORS, HardwareError, HardwareErrorCode } from '@ukeyfe/hardware-shared';
+import * as iframe from './iframe/builder';
+import JSBridgeConfig from './iframe/bridge-config';
+import { sendMessage, createJsBridge, hostBridge, resetListenerFlag } from './utils/bridgeUtils';
+import { getHost } from './utils/urlUtils';
+
+const eventEmitter = new EventEmitter();
+const Log = getLogger(LoggerNames.Connect);
+
+let _settings = parseConnectSettings();
+
+export const isOriginWhitelisted = (origin: string) => {
+  const host = getHost(origin);
+
+  return whitelist.find(item => item.origin === origin || item.origin === host);
+};
+
+// easy to test and then open
+// @ts-expect-error
+export const isExtensionWhitelisted = (origin: string) => true;
+// whitelistExtension.find(item => item === origin);
+
+const handleMessage = async (message: CoreMessage) => {
+  switch (message.event) {
+    case UI_EVENT:
+      if (message.type === IFRAME.INIT_BRIDGE) {
+        iframe.initPromise.resolve();
+        return Promise.resolve({ success: true, payload: 'JSBridge Handshake Success' });
+      }
+
+      // pass UI event up
+      eventEmitter.emit(message.event, message);
+      eventEmitter.emit(message.type, message.payload);
+      break;
+
+    case LOG_EVENT:
+    case FIRMWARE_EVENT:
+      eventEmitter.emit(message.event, message);
+      break;
+
+    case DEVICE_EVENT:
+      if (
+        (
+          [DEVICE.CONNECT, DEVICE.DISCONNECT, DEVICE.FEATURES, DEVICE.SUPPORT_FEATURES] as string[]
+        ).includes(message.type)
+      ) {
+        eventEmitter.emit(message.type, message.payload);
+      }
+      break;
+
+    case IFRAME.CALLBACK: {
+      const { callbackId, data, error } = message.payload;
+      executeCallback(callbackId, data, error);
+      break;
+    }
+
+    default:
+      Log.warn('No need to be captured message', message.event);
+  }
+};
+
+function checkTrust(settings: ConnectSettings) {
+  const hasTrust =
+    isOriginWhitelisted(settings.parentOrigin ?? '') ||
+    isExtensionWhitelisted(settings.extension ?? '');
+
+  if (!hasTrust) {
+    throw ERRORS.TypedError(HardwareErrorCode.IframeDistrust, JSON.stringify(settings));
+  }
+}
+
+const dispose = () => {
+  checkTrust(_settings);
+  eventEmitter.removeAllListeners();
+  iframe.dispose();
+  _settings = parseConnectSettings();
+  window.removeEventListener('message', createJSBridge);
+};
+
+const uiResponse = (response: UiResponseEvent) => {
+  if (!iframe.instance) {
+    throw ERRORS.TypedError(HardwareErrorCode.IFrameNotInitialized);
+  }
+  const { type, payload } = response;
+  sendMessage({ event: UI_EVENT, type, payload } as CoreMessage);
+};
+
+const cancel = (connectId?: string) => {
+  sendMessage({ event: IFRAME.CANCEL, type: IFRAME.CANCEL, payload: { connectId } });
+};
+
+let prevFrameInstance: Window | null | undefined = null;
+const createJSBridge = (messageEvent: PostMessageEvent) => {
+  if (messageEvent.origin !== iframe.origin) {
+    return;
+  }
+  if (!hostBridge || prevFrameInstance !== iframe.instance?.contentWindow) {
+    resetListenerFlag();
+    createJsBridge({
+      isHost: true,
+      remoteFrame: iframe.instance?.contentWindow as Window,
+      remoteFrameName: JSBridgeConfig.iframeName,
+      selfFrameName: JSBridgeConfig.hostName,
+      channel: JSBridgeConfig.channel,
+      targetOrigin: iframe.origin,
+
+      receiveHandler: async messageEvent => {
+        const message = parseMessage(messageEvent);
+        if (message.event !== 'LOG_EVENT') {
+          if (['DEVICE_EVENT', 'FIRMWARE_EVENT'].includes(message.event)) {
+            // Log.debug('Host Bridge Receive message: ', message);
+          } else {
+            Log.debug('Host Bridge Receive message: ', message);
+          }
+        }
+        const response = await handleMessage(message);
+        if (message.event !== 'LOG_EVENT') {
+          if (['DEVICE_EVENT', 'FIRMWARE_EVENT'].includes(message.event)) {
+            // Log.debug('Host Bridge response: ', message);
+          } else {
+            Log.debug('Host Bridge response: ', message);
+          }
+        }
+        return response;
+      },
+    });
+
+    prevFrameInstance = iframe.instance?.contentWindow;
+  }
+};
+
+const init = async (settings: Partial<ConnectSettings>) => {
+  if (iframe.instance) {
+    throw ERRORS.TypedError(HardwareErrorCode.IFrameAleradyInitialized);
+  }
+
+  _settings = parseConnectSettings({ ..._settings, ...settings });
+  checkTrust(_settings);
+
+  enableLog(!!settings.debug);
+  setLoggerPostMessage(handleMessage);
+
+  Log.debug('init');
+
+  window.addEventListener('message', createJSBridge);
+  window.addEventListener('unload', dispose);
+
+  try {
+    await iframe.init({ ..._settings, version: process.env.VERSION });
+    return true;
+  } catch (e) {
+    console.log('init error: ', e);
+    return false;
+  }
+};
+
+const call = async (params: any) => {
+  Log.debug('call : ', params);
+  /**
+   * Try to recreate iframe if it's initialize failed
+   */
+  if (!iframe.instance && !iframe.timeout) {
+    _settings = parseConnectSettings(_settings);
+    checkTrust(_settings);
+    Log.debug("Try to recreate iframe if it's initialize failed: ", _settings);
+    try {
+      const initResult = await init(_settings);
+      if (!initResult) {
+        Log.debug('Recreate iframe failed');
+        return createErrorMessage(ERRORS.TypedError(HardwareErrorCode.IFrameLoadFail));
+      }
+      Log.debug('Recreate iframe success');
+    } catch (error) {
+      Log.debug('Recreate iframe failed: ', error);
+      return createErrorMessage(error);
+    }
+  }
+
+  if (iframe.timeout) {
+    return createErrorMessage(ERRORS.TypedError(HardwareErrorCode.IFrameLoadFail));
+  }
+
+  try {
+    const response = await sendMessage({ event: IFRAME.CALL, type: IFRAME.CALL, payload: params });
+    if (response) {
+      return response;
+    }
+
+    return createErrorMessage(ERRORS.TypedError(HardwareErrorCode.CallMethodNotResponse));
+  } catch (error) {
+    Log.error('__call error: ', error);
+    let err = error;
+    if (!(err instanceof HardwareError)) {
+      err = ERRORS.CreateErrorByMessage(error.message);
+    }
+    return createErrorMessage(err);
+  }
+};
+
+const updateSettings = async (settings: Partial<ConnectSettings>) => {
+  if (iframe.instance) {
+    throw ERRORS.TypedError(HardwareErrorCode.IFrameAleradyInitialized);
+  }
+
+  checkTrust(_settings);
+  Log.debug('updateSettings API Called =>: old settings: ', _settings);
+  _settings = parseConnectSettings({ ..._settings, ...settings });
+  Log.debug('updateSettings API Called =>: new settings: ', _settings);
+  return Promise.resolve(true);
+};
+
+const switchTransport = async (env: ConnectSettings['env']) => {
+  if (iframe.instance) {
+    const response = await sendMessage({
+      event: IFRAME.SWITCH_TRANSPORT,
+      type: IFRAME.SWITCH_TRANSPORT,
+      payload: { env },
+    });
+    return response;
+  }
+  throw ERRORS.TypedError(HardwareErrorCode.IFrameNotInitialized);
+};
+
+const addHardwareGlobalEventListener = (listener: (message: CoreMessage) => void) => {
+  [
+    UI_EVENT,
+    LOG_EVENT,
+    FIRMWARE_EVENT,
+    DEVICE.CONNECT,
+    DEVICE.DISCONNECT,
+    DEVICE.FEATURES,
+    DEVICE.SUPPORT_FEATURES,
+    UI_REQUEST.FIRMWARE_PROGRESS,
+    UI_REQUEST.FIRMWARE_TIP,
+    UI_REQUEST.PREVIOUS_ADDRESS_RESULT,
+  ].forEach(eventName => {
+    eventEmitter.on(eventName, (message: CoreMessage) => {
+      let emitMessage = message;
+      if (!message.event && !(message as CoreMessage).type) {
+        emitMessage = {
+          // @ts-expect-error
+          ...message,
+          event: eventName,
+          type: eventName,
+        };
+      }
+      listener?.(emitMessage);
+    });
+  });
+};
+
+const HardwareSDKLowLevel = HardwareLowLevelSdk({
+  eventEmitter,
+  init,
+  call,
+  cancel,
+  dispose,
+  addHardwareGlobalEventListener,
+  uiResponse,
+  updateSettings,
+  switchTransport,
+});
+
+const HardwareSDKTopLevel = HardwareTopLevelSdk();
+
+const HardwareWebSdk = HardwareSdk({
+  eventEmitter,
+  init,
+  call,
+  cancel,
+  dispose,
+  uiResponse,
+  updateSettings,
+  switchTransport,
+});
+
+export default { HardwareSDKLowLevel, HardwareSDKTopLevel, HardwareWebSdk };

package/src/utils/bridgeUtils.ts

@@ -0,0 +1,59 @@
+import {
+  IJsBridgeIframeConfig,
+  JsBridgeIframe,
+  setPostMessageListenerFlag,
+} from '@ukeyfe/cross-inpage-provider-core';
+import { CoreMessage, getLogger, LoggerNames, LogBlockEvent } from '@ukeyfe/hardware-core';
+import { ERRORS } from '@ukeyfe/hardware-shared';
+import { get } from 'lodash';
+import JSBridgeConfig from '../iframe/bridge-config';
+
+// eslint-disable-next-line import/no-mutable-exports
+let frameBridge: JsBridgeIframe;
+// eslint-disable-next-line import/no-mutable-exports
+let hostBridge: JsBridgeIframe;
+
+const Log = getLogger(LoggerNames.SendMessage);
+
+export const resetListenerFlag = () => setPostMessageListenerFlag(false);
+
+export const createJsBridge = (params: IJsBridgeIframeConfig & { isHost: boolean }) => {
+  const bridge = new JsBridgeIframe(params);
+  if (params.isHost) {
+    hostBridge = bridge;
+  } else {
+    frameBridge = bridge;
+  }
+};
+
+export const sendMessage = async (messages: CoreMessage, isHost = true): Promise<any> => {
+  const bridge = isHost ? hostBridge : frameBridge;
+
+  try {
+    const blockLog = LogBlockEvent.has(get(messages, 'type')) ? messages.type : undefined;
+    if (messages.event !== 'LOG_EVENT') {
+      if (blockLog) {
+        Log.debug('request: ', blockLog);
+      } else {
+        Log.debug('request: ', messages);
+      }
+    }
+    const result = await bridge?.request({
+      scope: JSBridgeConfig.scope,
+      data: { ...messages },
+    });
+    if (messages.event !== 'LOG_EVENT') {
+      if (blockLog) {
+        Log.debug('request result: ', blockLog);
+      } else {
+        Log.debug('request result: ', result);
+      }
+    }
+    return result;
+  } catch (error) {
+    Log.error(error);
+    throw ERRORS.CreateErrorByMessage(error.message);
+  }
+};
+
+export { frameBridge, hostBridge };

package/src/utils/urlUtils.ts

@@ -0,0 +1,20 @@
+export const getOrigin = (url: string) => {
+  if (typeof url !== 'string') return 'unknown';
+  if (url.indexOf('file://') === 0) return 'file://';
+  // eslint-disable-next-line no-useless-escape
+  const parts = url.match(/^.+\:\/\/[^\/]+/);
+  return Array.isArray(parts) && parts.length > 0 ? parts[0] : 'unknown';
+};
+
+export const getHost = (url: unknown) => {
+  if (typeof url !== 'string') return;
+  const [, , uri] = url.match(/^(https?):\/\/([^:/]+)?/i) ?? [];
+  if (uri) {
+    const parts = uri.split('.');
+
+    return parts.length > 2
+      ? // slice subdomain
+        parts.slice(parts.length - 2, parts.length).join('.')
+      : uri;
+  }
+};

package/static/iframe.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>UKeyConnect | UKey</title>
+    <meta name="description" content="" />
+    <meta name="keywords" content="" />
+    <meta name="author" content="UKey Wallet" />
+    <meta name="robots" content="index, follow" />
+    <meta name="title" content="UKeyConnect | UKey" />
+    <meta http-equiv="Cache-control" content="no-cache" />
+    <meta http-equiv="pragma" content="no-cache" />
+</head>
+<body>
+
+    <script type="text/javascript">
+
+        window.parent.postMessage({
+            event: 'UI_EVENT',
+            type: 'iframe-bootstrap',
+        }, '*');
+
+        const iframeScript = document.createElement('script');
+        iframeScript.setAttribute('type', 'text/javascript');
+        iframeScript.setAttribute('src', '<%= htmlWebpackPlugin.files.js[0] %>');
+        iframeScript.setAttribute('async', 'false');
+        document.body.appendChild(iframeScript);
+    </script>
+</body>
+</html>