@payyo/ptp-js 2.1.1 → 2.2.0

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export declare type FieldConfig = {
     endpoint: string;
     mode: Mode;
     debug: boolean;
+    parentOrigin: string;
 };
 
 export declare type FieldEvent = {

package/dist/index.es.js

@@ -8,12 +8,36 @@ var FieldType = /* @__PURE__ */ ((FieldType2) => {
   FieldType2["SecurityCode"] = "securityCode";
   return FieldType2;
 })(FieldType || {});
+function originAllowed(origin, allowed) {
+  if (!origin) {
+    return false;
+  }
+  return allowed.includes(origin);
+}
+function formIdMatches(incoming, expected) {
+  if (!incoming || !expected) {
+    return false;
+  }
+  return incoming === expected;
+}
+function fieldOriginFrom(fieldUrl) {
+  if (!fieldUrl) {
+    return "";
+  }
+  try {
+    return new URL(fieldUrl).origin;
+  } catch {
+    return "";
+  }
+}
 function createForm(config) {
   const fields = {};
   const fieldNames = [];
   const callbacks = {};
   const formId = generateRandomId();
-  let fieldUrl = config.fieldUrl && config.mode === Mode.Test ? config.fieldUrl : "https://cdn.ptp.payyo.ch/ptp-js/2.1.1/field.html";
+  let fieldUrl = config.fieldUrl && config.mode === Mode.Test ? config.fieldUrl : "https://cdn.ptp.payyo.ch/ptp-js/2.2.0/field.html";
+  const fieldOrigin = fieldOriginFrom(fieldUrl);
+  const sendTarget = fieldOrigin || "*";
   const EVENT_ON_CHANGE = "change";
   const EVENT_ON_READY = "ready";
   const EVENT_ON_FOCUS = "focus";
@@ -37,6 +61,7 @@ function createForm(config) {
       // @ts-ignore
       src: `${fieldUrl}?${new URLSearchParams({
         form_id: formId,
+        parent_origin: window.location.origin,
         field_name: field.name,
         field_type: field.type,
         field_names: fieldNames,
@@ -74,7 +99,7 @@ function createForm(config) {
       log("send message", message);
       if (mainFieldName) {
         const mainIFrameName = fields[mainFieldName].iFrameName;
-        window.frames[mainIFrameName].postMessage(message, "*");
+        window.frames[mainIFrameName].postMessage(message, sendTarget);
       }
     });
   }
@@ -97,7 +122,7 @@ function createForm(config) {
     for (let [, field] of Object.entries(fields)) {
       const iframe = window.frames[field.iFrameName];
       if (iframe) {
-        iframe.postMessage({ type: "checkFocus" }, "*");
+        iframe.postMessage({ type: "checkFocus", formId }, sendTarget);
       }
     }
   }
@@ -178,11 +203,12 @@ function createForm(config) {
       }
       window.frames[fields[fieldName].iFrameName].postMessage({
         type: "setStyle",
+        formId,
         params: {
           selector,
           rules: cssRules
         }
-      }, "*");
+      }, sendTarget);
     },
     destroy: function() {
       var _a;
@@ -198,9 +224,16 @@ function createForm(config) {
   };
   function receiveMessage(message) {
     const event = message.data;
-    if (formId !== event.formId) {
+    if (!formIdMatches(event.formId, formId)) {
       return;
     }
+    if (fieldOrigin && !originAllowed(message.origin, [fieldOrigin])) {
+      log("dropping message from disallowed origin", message.origin, event);
+      return;
+    }
+    if (!fieldOrigin) {
+      log("field origin unknown, skipping origin check on received message", event);
+    }
     log(`message received of type "${event.type}"`, event);
     const handlers2 = {
       fieldReady: (event2) => {

package/dist/index.js

@@ -10,12 +10,36 @@ var FieldType = /* @__PURE__ */ ((FieldType2) => {
   FieldType2["SecurityCode"] = "securityCode";
   return FieldType2;
 })(FieldType || {});
+function originAllowed(origin, allowed) {
+  if (!origin) {
+    return false;
+  }
+  return allowed.includes(origin);
+}
+function formIdMatches(incoming, expected) {
+  if (!incoming || !expected) {
+    return false;
+  }
+  return incoming === expected;
+}
+function fieldOriginFrom(fieldUrl) {
+  if (!fieldUrl) {
+    return "";
+  }
+  try {
+    return new URL(fieldUrl).origin;
+  } catch {
+    return "";
+  }
+}
 function createForm(config) {
   const fields = {};
   const fieldNames = [];
   const callbacks = {};
   const formId = generateRandomId();
-  let fieldUrl = config.fieldUrl && config.mode === Mode.Test ? config.fieldUrl : "https://cdn.ptp.payyo.ch/ptp-js/2.1.1/field.html";
+  let fieldUrl = config.fieldUrl && config.mode === Mode.Test ? config.fieldUrl : "https://cdn.ptp.payyo.ch/ptp-js/2.2.0/field.html";
+  const fieldOrigin = fieldOriginFrom(fieldUrl);
+  const sendTarget = fieldOrigin || "*";
   const EVENT_ON_CHANGE = "change";
   const EVENT_ON_READY = "ready";
   const EVENT_ON_FOCUS = "focus";
@@ -39,6 +63,7 @@ function createForm(config) {
       // @ts-ignore
       src: `${fieldUrl}?${new URLSearchParams({
         form_id: formId,
+        parent_origin: window.location.origin,
         field_name: field.name,
         field_type: field.type,
         field_names: fieldNames,
@@ -76,7 +101,7 @@ function createForm(config) {
       log("send message", message);
       if (mainFieldName) {
         const mainIFrameName = fields[mainFieldName].iFrameName;
-        window.frames[mainIFrameName].postMessage(message, "*");
+        window.frames[mainIFrameName].postMessage(message, sendTarget);
       }
     });
   }
@@ -99,7 +124,7 @@ function createForm(config) {
     for (let [, field] of Object.entries(fields)) {
       const iframe = window.frames[field.iFrameName];
       if (iframe) {
-        iframe.postMessage({ type: "checkFocus" }, "*");
+        iframe.postMessage({ type: "checkFocus", formId }, sendTarget);
       }
     }
   }
@@ -180,11 +205,12 @@ function createForm(config) {
       }
       window.frames[fields[fieldName].iFrameName].postMessage({
         type: "setStyle",
+        formId,
         params: {
           selector,
           rules: cssRules
         }
-      }, "*");
+      }, sendTarget);
     },
     destroy: function() {
       var _a;
@@ -200,9 +226,16 @@ function createForm(config) {
   };
   function receiveMessage(message) {
     const event = message.data;
-    if (formId !== event.formId) {
+    if (!formIdMatches(event.formId, formId)) {
       return;
     }
+    if (fieldOrigin && !originAllowed(message.origin, [fieldOrigin])) {
+      log("dropping message from disallowed origin", message.origin, event);
+      return;
+    }
+    if (!fieldOrigin) {
+      log("field origin unknown, skipping origin check on received message", event);
+    }
     log(`message received of type "${event.type}"`, event);
     const handlers2 = {
       fieldReady: (event2) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payyo/ptp-js",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "JS library for Payyo Tokenization service (PTP)",
   "private": false,
   "author": "developers@payyo.ch",

package/src/form/form.ts

@@ -1,4 +1,5 @@
 import {Field, FieldEvent, Form, FormConfig, Message, MessageResponse, Mode, SetStyleEvent} from "../types.ts";
+import {fieldOriginFrom, formIdMatches, originAllowed} from "../messaging.ts";
 
 export function createForm(config: FormConfig): Form {
     const fields: Record<string, Field> = {};
@@ -8,6 +9,9 @@ export function createForm(config: FormConfig): Form {
 
     let fieldUrl = (config.fieldUrl && config.mode === Mode.Test) ? config.fieldUrl : import.meta.env.VITE_PTP_FIELD_URL;
 
+    const fieldOrigin = fieldOriginFrom(fieldUrl);
+    const sendTarget = fieldOrigin || '*';
+
     const EVENT_ON_CHANGE = 'change';
     const EVENT_ON_READY = 'ready';
     const EVENT_ON_FOCUS = 'focus';
@@ -37,6 +41,7 @@ export function createForm(config: FormConfig): Form {
                 // @ts-ignore
                 src: `${fieldUrl}?${(new URLSearchParams({
                     form_id: formId,
+                    parent_origin: window.location.origin,
                     field_name: field.name,
                     field_type: field.type,
                     field_names: fieldNames,
@@ -83,7 +88,7 @@ export function createForm(config: FormConfig): Form {
             if (mainFieldName) {
                 const mainIFrameName = fields[mainFieldName].iFrameName;
                 // @ts-ignore
-                window.frames[mainIFrameName].postMessage(message, '*');
+                window.frames[mainIFrameName].postMessage(message, sendTarget);
             }
         });
     }
@@ -112,7 +117,7 @@ export function createForm(config: FormConfig): Form {
             // @ts-ignore
             const iframe = window.frames[field.iFrameName];
             if (iframe) {
-                iframe.postMessage({type: 'checkFocus'}, '*');
+                iframe.postMessage({type: 'checkFocus', formId: formId}, sendTarget);
             }
         }
     }
@@ -204,11 +209,12 @@ export function createForm(config: FormConfig): Form {
             // @ts-ignore
             window.frames[fields[fieldName].iFrameName].postMessage({
                 type: 'setStyle',
+                formId: formId,
                 params: {
                     selector: selector,
                     rules: cssRules,
                 } as SetStyleEvent
-            }, '*');
+            }, sendTarget);
         },
         destroy: function () {
             window.removeEventListener('message', receiveMessage, false);
@@ -224,10 +230,18 @@ export function createForm(config: FormConfig): Form {
 
     function receiveMessage(message: MessageEvent<Message>) {
         const event: Message = message.data;
-        if (formId !== event.formId) {
+        if (!formIdMatches(event.formId, formId)) {
             return;
         }
 
+        if (fieldOrigin && !originAllowed(message.origin, [fieldOrigin])) {
+            log('dropping message from disallowed origin', message.origin, event);
+            return;
+        }
+        if (!fieldOrigin) {
+            log('field origin unknown, skipping origin check on received message', event);
+        }
+
         log(`message received of type "${event.type}"`, event);
 
         const handlers: Record<string, Function> = {