feat(client,sdk): retrieve auth token from parent frame + better resize detection

pkg/sdk/client/src/client.ts

@@ -5,6 +5,8 @@ import SockJS from 'sockjs-client';
 
 const EventTypeMessage = "message";
 const EdgeAuth = "edge-auth"
+const EdgeAuthTokenRequest = "edge_auth_token_request"
+const EdgeAuthTokenResponse = "edge_auth_token_reponse"
 
 export class Client extends EventTarget {
 
@@ -19,10 +21,11 @@ export class Client extends EventTarget {
   constructor(autoReconnect = true) {
     super();
     this._conn = null;
-    
+
     this._onConnectionClose = this._onConnectionClose.bind(this);
     this._onConnectionMessage = this._onConnectionMessage.bind(this);
     this._handleRPCResponse = this._handleRPCResponse.bind(this);
+    this._handleEdgeAuthTokenRequest = this._handleEdgeAuthTokenRequest.bind(this);
 
     this._rpcID = 0;
     this._pendingRPC = {};
@@ -30,70 +33,146 @@ export class Client extends EventTarget {
     this._reconnectionDelay = 250;
     this._autoReconnect = autoReconnect;
     this.debug = false;
-    
+
     this.connect = this.connect.bind(this);
     this.disconnect = this.disconnect.bind(this);
     this.rpc = this.rpc.bind(this);
     this.send = this.send.bind(this);
     this.upload = this.upload.bind(this);
+    
 
     this.addEventListener(EventTypeMessage, this._handleRPCResponse);
+    window.addEventListener('message', this._handleEdgeAuthTokenRequest);
   }
 
-  connect(token = "") {
-    return new Promise((resolve, reject) => {
-      if (token == "") {
-        token = this._getAuthCookieToken()
-      }
+  connect(token = ""): Promise<Client> {
+    let getToken: Promise<string>
 
-      const url = `//${document.location.host}/edge/sock?${EdgeAuth}=${token}`;
-      this._log("opening connection to", url);
-      const conn: any = new SockJS(url);
+    if (token) {
+      getToken = Promise.resolve(token)
+    } else {
+      getToken = this._retrieveToken()
+    }
 
-      const onOpen = () => {
-        this._log('client connected');
-        resetHandlers();
-        conn.onclose = this._onConnectionClose;
-        conn.onmessage = this._onConnectionMessage;
-        this._conn = conn;
-        this._sendQueued();
-        setTimeout(() => {
-          this._dispatchConnect();
-        }, 0);
-        return resolve(this);
-      };
-
-      const onError = (evt) => {
-        resetHandlers();
-        this._scheduleReconnection();
-        return reject(evt);
-      };
-
-      const resetHandlers = () => {
-        conn.removeEventListener('open', onOpen);
-        conn.removeEventListener('close', onError);
-        conn.removeEventListener('error', onError);
-      };
-      
-      conn.addEventListener('open', onOpen);
-      conn.addEventListener('error', onError);
-      conn.addEventListener('close', onError);
-    });
+    return getToken.then(token => this._connect(token))
   }
 
   disconnect() {
     this._cleanupConnection();
   }
 
-  _getAuthCookieToken() {
-    const cookie = document.cookie.split("; ")
-      .find((row) => row.startsWith(EdgeAuth));
-    
-    if (cookie) {
-      return cookie.split("=")[1];
+  _connect(token: string): Promise<Client> {
+    return new Promise((resolve, reject) => {
+      const url = `//${document.location.host}/edge/sock?${EdgeAuth}=${token}`;
+        this._log("opening connection to", url);
+        const conn: any = new SockJS(url);
+
+        const onOpen = () => {
+          this._log('client connected');
+          resetHandlers();
+          conn.onclose = this._onConnectionClose;
+          conn.onmessage = this._onConnectionMessage;
+          this._conn = conn;
+          this._sendQueued();
+          setTimeout(() => {
+            this._dispatchConnect();
+          }, 0);
+          return resolve(this);
+        };
+
+        const onError = (evt) => {
+          resetHandlers();
+          this._scheduleReconnection();
+          return reject(evt);
+        };
+
+        const resetHandlers = () => {
+          conn.removeEventListener('open', onOpen);
+          conn.removeEventListener('close', onError);
+          conn.removeEventListener('error', onError);
+        };
+
+        conn.addEventListener('open', onOpen);
+        conn.addEventListener('error', onError);
+        conn.addEventListener('close', onError);
+    })
+  }
+
+  _retrieveToken(): Promise<string> {
+    let token = this._getAuthCookieToken();
+    if (token) {
+      return Promise.resolve(token);
     }
 
-    return "";
+    return this._getParentFrameToken();;
+  }
+
+  _getAuthCookieToken(): string {
+    const cookie = document.cookie.split("; ")
+      .find((row) => row.startsWith(EdgeAuth));
+
+    let token = "";
+
+    if (cookie) {
+      token = cookie.split("=")[1];
+    }
+
+    return token;
+  }
+
+  _getParentFrameToken(timeout = 5000): Promise<string> {
+    if (!window.parent || window.parent === window) {
+      return Promise.resolve("");
+    }
+
+    return new Promise((resolve, reject) => {
+      let timedOut = false;
+      const timeoutId = setTimeout(() => {
+        timedOut = true;
+        reject(new Error("Edge auth token request timed out !"));
+      }, timeout);
+
+      const listener = (evt) => {
+        const message = evt.data;
+
+        if (!message || !message.type || !message.data) {
+          return
+        }
+
+        if (message.type !== EdgeAuthTokenResponse) {
+          return;
+        }
+
+        window.parent.removeEventListener('message', listener);
+        clearTimeout(timeoutId);
+
+        if (timedOut) return;
+
+        if (!message.data || !message.data.token) {
+          reject("Unexpected auth token request response !");
+          return;
+        }
+
+        resolve(message.data.token);
+      }
+
+      window.parent.addEventListener('message', listener);
+      window.parent.postMessage({ type: EdgeAuthTokenRequest }, '*');
+    })
+  }
+
+  _handleEdgeAuthTokenRequest(evt: MessageEvent) {
+    const message = evt.data;
+    if (!message || !message.type || message.type !== EdgeAuthTokenRequest) {
+      return;
+    }
+
+    if (!evt.source) {
+      return;
+    }
+
+    const token = this._getAuthCookieToken();
+    evt.source.postMessage({ type: EdgeAuthTokenResponse, data: { token }});
   }
 
   _onConnectionMessage(evt) {
@@ -108,7 +187,7 @@ export class Client extends EventTarget {
 
   _handleRPCResponse(evt) {
     const { jsonrpc, id, error, result } = evt.detail;
-    
+
     if (jsonrpc !== '2.0' || id === undefined) return;
     if (!evt.detail.hasOwnProperty("error") && !evt.detail.hasOwnProperty("result")) return;
 
@@ -216,20 +295,20 @@ export class Client extends EventTarget {
     return this._conn !== null;
   }
 
-  upload(blob: string|Blob, metadata: any) {
+  upload(blob: string | Blob, metadata: any) {
     return new Promise((resolve, reject) => {
       const formData = new FormData();
       formData.set("file", blob);
-      
+
       if (metadata) {
         try {
           formData.set("metadata", JSON.stringify(metadata));
-        } catch(err) {
+        } catch (err) {
           return reject(err);
         }
       }
       const xhr = new XMLHttpRequest();
-        
+
       const result = {
         onProgress: null,
         abort: () => xhr.abort(),
@@ -239,7 +318,7 @@ export class Client extends EventTarget {
               let data;
               try {
                 data = JSON.parse(xhr.responseText);
-              } catch(err) {
+              } catch (err) {
                 reject(err);
                 return;
               }