Skip to content

Commit

Permalink
Merge pull request #455 from skyflowapi/SK-1600
Browse files Browse the repository at this point in the history 
SK-1600: Client Domain Bug Fix
  • Loading branch information
@amith-skyflow
amith-skyflow authored Aug 21, 2024
2 parents 748ccf1 + 7bef9f9 commit 40a9e1b
Show file tree
Hide file tree
Showing 12 changed files with 89 additions and 46 deletions.
4 changes: 3 additions & 1 deletion src/core/external/collect/collect-container.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down
4 changes: 3 additions & 1 deletion src/core/external/collect/compose-collect-container.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down
6 changes: 5 additions & 1 deletion src/core/external/common/iframe.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
4 changes: 3 additions & 1 deletion src/core/external/reveal/reveal-container.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down
4 changes: 2 additions & 2 deletions src/core/external/reveal/reveal-element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
);
Expand Down
6 changes: 5 additions & 1 deletion src/core/external/skyflow-container.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down
8 changes: 6 additions & 2 deletions src/core/internal/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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(
Expand Down
7 changes: 6 additions & 1 deletion src/core/internal/reveal/reveal-frame-controller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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(
Expand Down
60 changes: 34 additions & 26 deletions src/core/internal/reveal/reveal-frame.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -46,6 +46,8 @@ class RevealFrame {

#containerId: string;

#clientDomain: string;

#inputStyles!: object;

#labelStyles!: object;
Expand Down Expand Up @@ -74,6 +76,11 @@ class RevealFrame {

constructor(record, context) {
this.#name = window.name;
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);
this.#clientDomain = document.referrer.split('/').slice(0, 3).join('/') || clientDomain;
this.#containerId = this.#name.split(':')[2];
this.#record = record;
this.#context = context;
Expand Down Expand Up @@ -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(''); }
}
Expand Down Expand Up @@ -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() {
Expand Down
8 changes: 6 additions & 2 deletions src/core/internal/skyflow-frame/skyflow-frame-controller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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,
Expand Down
6 changes: 6 additions & 0 deletions src/utils/helpers/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
18 changes: 10 additions & 8 deletions tests/core/external/reveal/reveal-element.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -67,8 +68,8 @@ const metaData = {
metaData: {
vaultID: "vault123",
vaultURL: "https://sb.vault.dev",
clientDomain: "http://abc.com",
},
clientDomain: clientDomain,
};
const skyflowConfig = {
vaultID: 'e20afc3ae1b54f0199f24130e51e0c11',
Expand Down Expand Up @@ -97,7 +98,8 @@ const clientData = {
},
skyflowContainer: {
renderFile : renderFile
}
},
clientDomain: clientDomain,
}
const client = new Client(clientData.client.config, clientData);

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand Down

0 comments on commit 40a9e1b

Please sign in to comment.