From 3cb12891a228c1b49fe46982def68e2104163423 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Camith-skyflow=E2=80=9D?= <“amit@skyflow.com”> Date: Tue, 20 Aug 2024 16:48:51 +0000 Subject: [PATCH 1/2] SK-1600: Client Domain Bug Fix --- .../external/collect/collect-container.ts | 4 +- .../collect/compose-collect-container.ts | 4 +- src/core/external/common/iframe.ts | 6 +- src/core/external/reveal/reveal-container.ts | 4 +- src/core/external/reveal/reveal-element.ts | 4 +- src/core/external/skyflow-container.ts | 6 +- src/core/internal/index.ts | 8 ++- .../reveal/reveal-frame-controller.ts | 7 ++- src/core/internal/reveal/reveal-frame.ts | 60 +++++++++++-------- .../skyflow-frame/skyflow-frame-controller.ts | 8 ++- src/utils/helpers/index.ts | 6 ++ 11 files changed, 79 insertions(+), 38 deletions(-) diff --git a/src/core/external/collect/collect-container.ts b/src/core/external/collect/collect-container.ts index 2c7da35d..98b31eaa 100644 --- a/src/core/external/collect/collect-container.ts +++ b/src/core/external/collect/collect-container.ts @@ -78,8 +78,10 @@ class CollectContainer extends Container { this.#context = context; this.#eventEmitter = new EventEmitter(); + const clientDomain = this.#metaData.clientDomain || ''; const iframe = iframer({ - name: `${COLLECT_FRAME_CONTROLLER}:${this.#containerId}:${this.#context.logLevel}`, + name: `${COLLECT_FRAME_CONTROLLER}:${this.#containerId}:${btoa(clientDomain)}:${this.#context.logLevel}`, + referrer: clientDomain, }); setAttributes(iframe, { src: getIframeSrc(), diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index bb45b318..75e5d05b 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -93,8 +93,10 @@ class ComposableContainer extends Container { this.#options = options; this.#eventEmitter = new EventEmitter(); + const clientDomain = this.#metaData.clientDomain || ''; const iframe = iframer({ - name: `${COLLECT_FRAME_CONTROLLER}:${this.#containerId}:${this.#context.logLevel}`, + name: `${COLLECT_FRAME_CONTROLLER}:${this.#containerId}:${btoa(clientDomain)}:${this.#context.logLevel}`, + referrer: clientDomain, }); setAttributes(iframe, { src: getIframeSrc(), diff --git a/src/core/external/common/iframe.ts b/src/core/external/common/iframe.ts index dfc6e29e..108e6f24 100644 --- a/src/core/external/common/iframe.ts +++ b/src/core/external/common/iframe.ts @@ -22,7 +22,11 @@ export default class IFrame { constructor(name, metadata, containerId, logLevel) { this.name = `${name}:${containerId}:${logLevel}`; this.metadata = metadata; - this.iframe = iframer({ name: this.name }); + const clientDomain = this.metadata.clientDomain || ''; + this.iframe = iframer({ + name: this.name, + referrer: clientDomain, + }); } mount = (domElement, elementId?: string) => { diff --git a/src/core/external/reveal/reveal-container.ts b/src/core/external/reveal/reveal-container.ts index 68b719f0..2ab2835a 100644 --- a/src/core/external/reveal/reveal-container.ts +++ b/src/core/external/reveal/reveal-container.ts @@ -71,8 +71,10 @@ class RevealContainer extends Container { this.#containerId = uuid(); this.#eventEmmiter = new EventEmitter(); this.#context = context; + const clientDomain = this.#metaData.clientDomain || ''; const iframe = iframer({ - name: `${REVEAL_FRAME_CONTROLLER}:${this.#containerId}`, + name: `${REVEAL_FRAME_CONTROLLER}:${this.#containerId}:${btoa(clientDomain)}`, + referrer: clientDomain, }); setAttributes(iframe, { src: getIframeSrc(), diff --git a/src/core/external/reveal/reveal-element.ts b/src/core/external/reveal/reveal-element.ts index 96e0a8fb..4b8f522a 100644 --- a/src/core/external/reveal/reveal-element.ts +++ b/src/core/external/reveal/reveal-element.ts @@ -79,8 +79,8 @@ class RevealElement extends SkyflowElement { updateMetricObjectValue(this.#elementId, METRIC_TYPES.ELEMENT_TYPE_KEY, ELEMENT_TYPES.REVEAL); updateMetricObjectValue(this.#elementId, METRIC_TYPES.CONTAINER_NAME, ELEMENT_TYPES.REVEAL); this.#iframe = new IFrame( - `${FRAME_REVEAL}:${btoa(uuid())}`, - { metaData }, + `${FRAME_REVEAL}:${btoa(uuid())}:${btoa(metaData.clientDomain)}`, + metaData, this.#containerId, this.#context.logLevel, ); diff --git a/src/core/external/skyflow-container.ts b/src/core/external/skyflow-container.ts index 2f0f5d35..09f60d00 100644 --- a/src/core/external/skyflow-container.ts +++ b/src/core/external/skyflow-container.ts @@ -53,12 +53,16 @@ class SkyflowContainer { #context: Context; + #clientDomain: string; + constructor(client, context) { this.#client = client; this.#containerId = this.#client.toJSON()?.metaData?.uuid || ''; this.#context = context; + this.#clientDomain = document.referrer.split('/').slice(0, 3).join('/') || ''; const iframe = iframer({ - name: `${SKYFLOW_FRAME_CONTROLLER}:${this.#containerId}`, + name: `${SKYFLOW_FRAME_CONTROLLER}:${this.#containerId}:${btoa(this.#clientDomain)}`, + referrer: this.#clientDomain, }); setAttributes(iframe, { src: getIframeSrc(), diff --git a/src/core/internal/index.ts b/src/core/internal/index.ts index d6b87201..1955302b 100644 --- a/src/core/internal/index.ts +++ b/src/core/internal/index.ts @@ -42,7 +42,7 @@ import { addSeperatorToCardNumberMask, appendMonthFourDigitYears, appendMonthTwoDigitYears, - appendZeroToOne, domReady, getMaskedOutput, handleCopyIconClick, styleToString, + appendZeroToOne, domReady, getMaskedOutput, getValueFromName, handleCopyIconClick, styleToString, } from '../../utils/helpers'; import { ContainerType } from '../../skyflow'; @@ -60,7 +60,11 @@ export class FrameController { private CLASS_NAME = 'FrameController'; constructor(controllerId: string, logLevel: LogLevel) { - this.clientDomain = document.referrer.split('/').slice(0, 3).join('/'); + const clientDomain = atob(getValueFromName(window.name, 2)); + // added for testing + // eslint-disable-next-line no-console + console.log('Client Domain in Frame Controller : ', clientDomain); + this.clientDomain = document.referrer.split('/').slice(0, 3).join('/') || clientDomain; this.#iFrameForm = new IFrameForm(controllerId, this.clientDomain, logLevel); this.controllerId = controllerId; printLog( diff --git a/src/core/internal/reveal/reveal-frame-controller.ts b/src/core/internal/reveal/reveal-frame-controller.ts index e334a0c1..100b03bc 100644 --- a/src/core/internal/reveal/reveal-frame-controller.ts +++ b/src/core/internal/reveal/reveal-frame-controller.ts @@ -18,6 +18,7 @@ import logs from '../../../utils/logs'; import { Context, IRevealRecord, MessageType, } from '../../../utils/common'; +import { getValueFromName } from '../../../utils/helpers'; const CLASS_NAME = 'RevealFrameController'; class RevealFrameController { @@ -33,7 +34,11 @@ class RevealFrameController { constructor(containerId) { this.#containerId = containerId; - this.#clientDomain = document.referrer.split('/').slice(0, 3).join('/'); + const clientDomain = atob(getValueFromName(window.name, 2)); + // added for testing + // eslint-disable-next-line no-console + console.log('Client Domain in Reveal FrameController : ', clientDomain); + this.#clientDomain = document.referrer.split('/').slice(0, 3).join('/') || clientDomain; bus // .target(this.#clientDomain) .emit( diff --git a/src/core/internal/reveal/reveal-frame.ts b/src/core/internal/reveal/reveal-frame.ts index 78fe06d6..da1d5bf6 100644 --- a/src/core/internal/reveal/reveal-frame.ts +++ b/src/core/internal/reveal/reveal-frame.ts @@ -23,7 +23,7 @@ import { import logs from '../../../utils/logs'; import { Context, MessageType } from '../../../utils/common'; import { - constructMaskTranslation, getMaskedOutput, handleCopyIconClick, styleToString, + constructMaskTranslation, getMaskedOutput, getValueFromName, handleCopyIconClick, styleToString, } from '../../../utils/helpers'; const { getType } = require('mime'); @@ -46,6 +46,8 @@ class RevealFrame { #containerId: string; + #clientDomain: string; + #inputStyles!: object; #labelStyles!: object; @@ -74,6 +76,11 @@ class RevealFrame { constructor(record, context) { this.#name = window.name; + const clientDomain = atob(getValueFromName(window.name, 2)); + // added for testing + // eslint-disable-next-line no-console + console.log('Client Domain in Reveal Frame : ', clientDomain); + this.#clientDomain = document.referrer.split('/').slice(0, 3).join('/') || clientDomain; this.#containerId = this.#name.split(':')[2]; this.#record = record; this.#context = context; @@ -203,7 +210,7 @@ class RevealFrame { sub, ); - bus.target(document.referrer.split('/').slice(0, 3).join('/')).on(ELEMENT_EVENTS_TO_IFRAME.REVEAL_ELEMENT_SET_ERROR, (data) => { + bus.target(this.#clientDomain).on(ELEMENT_EVENTS_TO_IFRAME.REVEAL_ELEMENT_SET_ERROR, (data) => { if (this.#name === data.name) { if (data.isTriggerError) { this.setRevealError(data.clientErrorText as string); } else { this.setRevealError(''); } } @@ -300,35 +307,36 @@ class RevealFrame { } private updateRevealElementOptions() { - bus.target(document.referrer.split('/').slice(0, 3).join('/')).on(ELEMENT_EVENTS_TO_IFRAME.REVEAL_ELEMENT_UPDATE_OPTIONS, (data) => { - if (data.name === this.#name) { - if (data.updateType === REVEAL_ELEMENT_OPTIONS_TYPES.ALT_TEXT) { - if (data.updatedValue) { + bus + .target(this.#clientDomain) + .on(ELEMENT_EVENTS_TO_IFRAME.REVEAL_ELEMENT_UPDATE_OPTIONS, (data) => { + if (data.name === this.#name) { + if (data.updateType === REVEAL_ELEMENT_OPTIONS_TYPES.ALT_TEXT) { + if (data.updatedValue) { + this.#record = { + ...this.#record, + altText: data.updatedValue, + }; + } else { + delete this.#record.altText; + } + this.updateDataView(); + } else if (data.updateType === REVEAL_ELEMENT_OPTIONS_TYPES.TOKEN) { + this.#record = { + ...this.#record, + token: data.updatedValue, + }; + this.updateDataView(); + } else if (data.updateType === REVEAL_ELEMENT_OPTIONS_TYPES.ELEMENT_PROPS) { + const updatedValue = data.updatedValue as object; this.#record = { ...this.#record, - altText: data.updatedValue, + ...updatedValue, }; - } else { - delete this.#record.altText; + this.updateElementProps(); } - - this.updateDataView(); - } else if (data.updateType === REVEAL_ELEMENT_OPTIONS_TYPES.TOKEN) { - this.#record = { - ...this.#record, - token: data.updatedValue, - }; - this.updateDataView(); - } else if (data.updateType === REVEAL_ELEMENT_OPTIONS_TYPES.ELEMENT_PROPS) { - const updatedValue = data.updatedValue as object; - this.#record = { - ...this.#record, - ...updatedValue, - }; - this.updateElementProps(); } - } - }); + }); } private updateElementProps() { diff --git a/src/core/internal/skyflow-frame/skyflow-frame-controller.ts b/src/core/internal/skyflow-frame/skyflow-frame-controller.ts index b5c7f8a0..c55f5107 100644 --- a/src/core/internal/skyflow-frame/skyflow-frame-controller.ts +++ b/src/core/internal/skyflow-frame/skyflow-frame-controller.ts @@ -28,7 +28,7 @@ import { } from '../../../utils/common'; import { deleteData } from '../../../core-utils/delete'; import properties from '../../../properties'; -import { getVaultBeffeURL } from '../../../utils/helpers'; +import { getValueFromName, getVaultBeffeURL } from '../../../utils/helpers'; const CLASS_NAME = 'SkyflowFrameController'; class SkyflowFrameController { @@ -42,7 +42,11 @@ class SkyflowFrameController { constructor(clientId) { this.#clientId = clientId || ''; - this.#clientDomain = document.referrer.split('/').slice(0, 3).join('/'); + const clientDomain = atob(getValueFromName(window.name, 2)); + // added for testing + // eslint-disable-next-line no-console + console.log('Client Domain in Skyflow Frame Controller : ', clientDomain); + this.#clientDomain = document.referrer.split('/').slice(0, 3).join('/') || clientDomain; bus .on( ELEMENT_EVENTS_TO_IFRAME.PUSH_EVENT + this.#clientId, diff --git a/src/utils/helpers/index.ts b/src/utils/helpers/index.ts index cf2dd7f5..fc97bfc8 100644 --- a/src/utils/helpers/index.ts +++ b/src/utils/helpers/index.ts @@ -398,3 +398,9 @@ export const generateUploadFileName = (fileName:string) => { const fileExtentsion = fileName?.split('.')?.pop() || ''; return `${uuid()}${fileExtentsion && `.${fileExtentsion}`}`; }; + +export const getValueFromName = (name: string, index: number) => { + const names = name.split(':'); + const value = names.length > index ? names[index] : ''; + return value; +}; From 7bef9f987a012893af8151051ac9f7f149725e0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Camith-skyflow=E2=80=9D?= <“amit@skyflow.com”> Date: Tue, 20 Aug 2024 17:28:55 +0000 Subject: [PATCH 2/2] SK-1600 fix test --- src/core/internal/reveal/reveal-frame.ts | 2 +- .../external/reveal/reveal-element.test.js | 18 ++++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/core/internal/reveal/reveal-frame.ts b/src/core/internal/reveal/reveal-frame.ts index da1d5bf6..2a99e920 100644 --- a/src/core/internal/reveal/reveal-frame.ts +++ b/src/core/internal/reveal/reveal-frame.ts @@ -76,7 +76,7 @@ class RevealFrame { constructor(record, context) { this.#name = window.name; - const clientDomain = atob(getValueFromName(window.name, 2)); + const clientDomain = document.referrer.split('/').slice(0, 3).join('/') || atob(getValueFromName(window.name, 2)); // added for testing // eslint-disable-next-line no-console console.log('Client Domain in Reveal Frame : ', clientDomain); diff --git a/tests/core/external/reveal/reveal-element.test.js b/tests/core/external/reveal/reveal-element.test.js index a1441ef1..9a4137a4 100644 --- a/tests/core/external/reveal/reveal-element.test.js +++ b/tests/core/external/reveal/reveal-element.test.js @@ -57,6 +57,7 @@ jest.mock('../../../../src/core/external/skyflow-container', () => { // bus.off = _off; // bus.emit = _emit; +const clientDomain = "http://abc.com"; const metaData = { uuid: "123", config: { @@ -67,8 +68,8 @@ const metaData = { metaData: { vaultID: "vault123", vaultURL: "https://sb.vault.dev", - clientDomain: "http://abc.com", }, + clientDomain: clientDomain, }; const skyflowConfig = { vaultID: 'e20afc3ae1b54f0199f24130e51e0c11', @@ -97,7 +98,8 @@ const clientData = { }, skyflowContainer: { renderFile : renderFile - } + }, + clientDomain: clientDomain, } const client = new Client(clientData.client.config, clientData); @@ -158,7 +160,7 @@ describe("Reveal Element Class", () => { expect(document.querySelector("iframe")).toBeTruthy(); - const testIframeName = `${FRAME_REVEAL}:${btoa(mockUuid)}:${containerId}:ERROR`; + const testIframeName = `${FRAME_REVEAL}:${btoa(mockUuid)}:${btoa(clientDomain)}:${containerId}:ERROR`; expect(document.querySelector("iframe")?.name).toBe(testIframeName); const eventListenerName = ELEMENT_EVENTS_TO_IFRAME.REVEAL_FRAME_READY; @@ -199,7 +201,7 @@ describe("Reveal Element Class", () => { expect(document.querySelector("iframe")).toBeTruthy(); - const testIframeName = `${FRAME_REVEAL}:${btoa(mockUuid)}:${containerId}:ERROR`; + const testIframeName = `${FRAME_REVEAL}:${btoa(mockUuid)}:${btoa(clientDomain)}:${containerId}:ERROR`; expect(document.querySelector("iframe")?.name).toBe(testIframeName); const eventListenerName = ELEMENT_EVENTS_TO_IFRAME.REVEAL_FRAME_READY; @@ -239,7 +241,7 @@ describe("Reveal Element Class", () => { expect(document.querySelector("iframe")).toBeTruthy(); - const testIframeName = `${FRAME_REVEAL}:${btoa(mockUuid)}:${containerId}:ERROR`; + const testIframeName = `${FRAME_REVEAL}:${btoa(mockUuid)}:${btoa(clientDomain)}:${containerId}:ERROR`; expect(document.querySelector("iframe")?.name).toBe(testIframeName); const eventListenerName = ELEMENT_EVENTS_TO_IFRAME.REVEAL_FRAME_READY; @@ -295,7 +297,7 @@ describe("Reveal Element Class", () => { expect(document.querySelector("iframe")).toBeTruthy(); - const testIframeName = `${FRAME_REVEAL}:${btoa(mockUuid)}:${containerId}:ERROR`; + const testIframeName = `${FRAME_REVEAL}:${btoa(mockUuid)}:${btoa(clientDomain)}:${containerId}:ERROR`; expect(document.querySelector("iframe")?.name).toBe(testIframeName); const eventListenerName = ELEMENT_EVENTS_TO_IFRAME.REVEAL_FRAME_READY; @@ -360,7 +362,7 @@ describe("Reveal Element Class", () => { groupOnCb({containerId}); expect(document.querySelector("iframe")).toBeTruthy(); - const testIframeName = `${FRAME_REVEAL}:${btoa(mockUuid)}:${containerId}:ERROR`; + const testIframeName = `${FRAME_REVEAL}:${btoa(mockUuid)}:${btoa(clientDomain)}:${containerId}:ERROR`; expect(document.querySelector("iframe")?.name).toBe(testIframeName); expect(testRevealElement.iframeName()).toBe(testIframeName); @@ -387,7 +389,7 @@ describe("Reveal Element Class", () => { groupOnCb({containerId}); expect(document.querySelector("iframe")).toBeTruthy(); - const testIframeName = `${FRAME_REVEAL}:${btoa(mockUuid)}:${containerId}:ERROR`; + const testIframeName = `${FRAME_REVEAL}:${btoa(mockUuid)}:${btoa(clientDomain)}:${containerId}:ERROR`; expect(document.querySelector("iframe")?.name).toBe(testIframeName); expect(testRevealElement.iframeName()).toBe(testIframeName);