refactor(iframe communication): reconstruct iframe communication mode

Author: Littleor

package-lock.json

@@ -29,7 +29,6 @@
     "@commitlint/config-conventional": "^16.0.0",
     "@conflux-dev/conflux-address-js": "^1.3.12",
     "abi-util-lite": "^0.1.0",
-    "axios": "^0.25.0",
     "big.js": "^5.2.2",
     "commander": "^8.0.0",
     "conventional-changelog-cli": "^2.2.2",

package.json

@@ -85,3 +85,9 @@ export interface IIframeOptions {
     | 'importAccount'
   waitResult?: boolean
 }
+
+export interface IIframeData {
+  type: 'event' | 'callback' | 'router' | 'default'
+  data: unknown
+  success?: boolean
+}

src/interface/provider.ts

@@ -174,14 +174,15 @@ export class Provider implements IProvider {
             params: params ? JSON.stringify(paramsObj) : '',
             authType:
               params && Object.keys(paramsObj).includes('to') && paramsObj['to']
-                ? getAddressType(paramsObj['to']) === AddressType.CONTRACT
+                ? getAddressType(paramsObj['to'] as string) ===
+                  AddressType.CONTRACT
                   ? 'callContract'
                   : 'createTransaction'
                 : 'createContract',
           })
         } catch (e) {
           console.error('Error to sendTransaction', e)
-          return 'fail'
+          return e
         }
       case 'anyweb_importAccount':
         try {
@@ -193,7 +194,7 @@ export class Provider implements IProvider {
           })
         } catch (e) {
           console.error('Error to import Address', e)
-          return 'fail'
+          return e
         }
       case 'anyweb_version':
         return config.version
@@ -209,7 +210,7 @@ export class Provider implements IProvider {
           waitResult: false,
         })
       default:
-        return 'default'
+        return 'Unsupported method'
     }
   }
 

src/provider.ts

@@ -3,9 +3,8 @@
  * @since 2022/2/11
  */
 import * as forge from 'node-forge'
-import axios from 'axios'
-import { API_BASE_URL, BASE_URL } from '../config'
-import { IAuthResult, IIframeOptions } from '../interface/provider'
+import { BASE_URL } from '../config'
+import { IAuthResult, IIframeData, IIframeOptions } from '../interface/provider'
 import { Provider } from '../provider'
 
 export const getFrameWidth = () => {
@@ -68,10 +67,38 @@ const setBodyScrollable = () => {
   })
 }
 
+export const isObject = (obj: unknown) => {
+  return Object.prototype.toString.call(obj) === '[object Object]'
+}
+
 const closeIframe = (root: HTMLDivElement) => {
   setBodyScrollable()
   root.style.display = 'none'
 }
+export const sendMessageToApp = ({
+  data,
+  type,
+  success = true,
+}: IIframeData) => {
+  const iframe: HTMLIFrameElement | null = document.getElementById(
+    'anyweb-iframe'
+  ) as HTMLIFrameElement | null
+  if (!iframe) {
+    return
+  }
+  iframe.contentWindow &&
+    iframe.contentWindow.postMessage(
+      {
+        data: {
+          data,
+          type,
+          success,
+        },
+        type: 'anyweb',
+      },
+      '*'
+    )
+}
 
 export const getIframe = async (
   url: string,
@@ -82,8 +109,13 @@ export const getIframe = async (
     document.getElementById('anyweb-iframe')
   ) {
     const mask = document.getElementById('anyweb-iframe-mask') as HTMLDivElement
-    const iframe = document.getElementById('anyweb-iframe') as HTMLIFrameElement
-    iframe.setAttribute('src', url)
+    sendMessageToApp({
+      type: 'router',
+      data: {
+        path: `/${url}`,
+        mode: 'redirectTo',
+      },
+    })
     mask.style.display = 'block'
     setBodyNonScrollable()
     return () => {
@@ -168,7 +200,7 @@ export const getIframe = async (
   iframe.id = 'anyweb-iframe'
   mask.id = 'anyweb-iframe-mask'
 
-  iframe.setAttribute('src', url)
+  iframe.setAttribute('src', `${BASE_URL}${url}`)
   iframe.setAttribute('frameborder', '0')
   iframe.setAttribute('scrolling', 'no')
 
@@ -200,25 +232,11 @@ export const callIframe = async (
     waitResult = true,
   }: IIframeOptions
 ) => {
-  let serialNumber = ''
-  const hash = sha512(JSON.stringify({ appId, params }))
-
-  try {
-    serialNumber = (
-      await axios.post(`${API_BASE_URL}/open/serial/create`, {
-        hash: hash,
-      })
-    ).data.data.serialNumber
-  } catch (e) {
-    console.error('Get serialNumber error', e)
-    throw new Error('Get serialNumber error')
-  }
-
   if (waitResult) {
     return new Promise<unknown>(async (resolve, reject) => {
-      let timer: NodeJS.Timeout | undefined = undefined
+      let callback: IIframeData | undefined = undefined
       const close = await getIframe(
-        `${BASE_URL}${path}?appId=${appId}&authType=${authType}&serialNumber=${serialNumber}&hash=${hash}&random=${Math.floor(
+        `${path}?appId=${appId}&authType=${authType}&random=${Math.floor(
           Math.random() * 1000
         )}&chainId=${chainId}&params=${params}&scope=${JSON.stringify(scope)}`,
         () => {
@@ -227,48 +245,54 @@ export const callIframe = async (
           }
         }
       )
-      const delay = 1000
-      const next = (i: number) => {
-        timer = setTimeout(async () => {
-          let data
-          try {
-            data = (
-              await axios.post(`${API_BASE_URL}/open/serial/read`, {
-                serialNumber: serialNumber,
-                hash: hash,
-              })
-            ).data.data
-          } catch (e) {
-            console.error("Can't get result from iframe", e)
-            next(i++)
-            return
-            // reject(new Error("Can't get result from iframe"))
-          }
-          if (data && data !== 'false' && data !== false) {
-            timer && clearTimeout(timer)
-            close()
-            resolve(JSON.parse(data))
-          } else {
-            if (i * delay > 10 * 60 * 1000) {
-              close()
-              reject(new Error('Timeout'))
+      const timer = setTimeout(() => {
+        close()
+        reject(new Error('Timeout'))
+      }, 10 * 60 * 1000)
+
+      // Set Listeners
+      window.addEventListener(
+        'message',
+        function receiveMessageFromIframePage(event) {
+          if (
+            event.data &&
+            isObject(event.data) &&
+            'type' in event.data &&
+            event.data.type === 'anyweb'
+          ) {
+            console.log('SDK收到子页面信息: ', event.data)
+            callback = event.data.data as IIframeData
+
+            if (callback.type === 'callback') {
+              window.removeEventListener(
+                'message',
+                receiveMessageFromIframePage
+              )
+              clearTimeout(timer)
+              if (callback.success) {
+                close()
+                resolve(callback.data)
+              } else {
+                close()
+                reject(new Error(callback.data as string))
+              }
             }
-            next(i++)
           }
-        }, delay)
-      }
-      next(0)
+        },
+        false
+      )
     })
+  } else {
+    await getIframe(
+      `${path}?appId=${appId}&authType=${authType}&random=${Math.floor(
+        Math.random() * 1000
+      )}&chainId=${chainId}&params=${params}&scope=${JSON.stringify(scope)}`,
+      () => {
+        return
+      }
+    )
+    return 'ok'
   }
-  await getIframe(
-    `${BASE_URL}${path}?appId=${appId}&authType=${authType}&serialNumber=${serialNumber}&hash=${hash}&random=${Math.floor(
-      Math.random() * 1000
-    )}&chainId=${chainId}&params=${params}&scope=${JSON.stringify(scope)}`,
-    () => {
-      return
-    }
-  )
-  return 'ok'
 }
 
 export const readCache = (provider: Provider) => {

src/utils/common.ts

@@ -2310,13 +2310,6 @@
   "resolved" "https://registry.npmmirror.com/atob/download/atob-2.1.2.tgz"
   "version" "2.1.2"
 
-"axios@^0.25.0":
-  "integrity" "sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g=="
-  "resolved" "https://registry.npmmirror.com/axios/-/axios-0.25.0.tgz"
-  "version" "0.25.0"
-  dependencies:
-    "follow-redirects" "^1.14.7"
-
 "babel-jest@^27.4.6":
   "version" "26.6.3"
   dependencies:
@@ -4470,11 +4463,6 @@
   "resolved" "https://registry.npmmirror.com/flatted/download/flatted-3.2.4.tgz?cache=0&sync_timestamp=1636473899515&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fflatted%2Fdownload%2Fflatted-3.2.4.tgz"
   "version" "3.2.4"
 
-"follow-redirects@^1.14.7":
-  "integrity" "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA=="
-  "resolved" "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.14.8.tgz"
-  "version" "1.14.8"
-
 "for-in@^1.0.2":
   "integrity" "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
   "resolved" "https://registry.npmmirror.com/for-in/download/for-in-1.0.2.tgz"