@coherentglobal/data-integration-lib v1.0.13

Data Integration Library

• Cross-domain browser storage API and secure bi-directional postMessage iFrame communication.
• Data object size is limited up to 3MB.

Package

Public (Minified) - https://data-integration-lib.s3.ap-southeast-1.amazonaws.com/index.min.js

Features

Cross-Domain Storage Communication

• Local Storage support
• Validates origin of Client to gain access to Host

Iframe Embedded Communication

• Secure bi-directional Host<->Client communication
• Client emits event that the Host can listen to and vice versa

Example

Cross-Domain Storage Communication

DEMO

Host: https://data-integration-lib.s3.ap-southeast-1.amazonaws.com/hub.html Client1: https://data-integration-lib.s3.ap-southeast-1.amazonaws.com/client1.html Client2: https://data-integration-lib.s3.ap-southeast-1.amazonaws.com/client2.html Client3: https://data-integration-lib.s3.ap-southeast-1.amazonaws.com/client3.html

Limitations on Safari 7+ (OSX, iOS)

All cross-domain local storage access is disabled by default with Safari 7+. This is a result of the "Block cookies and other website data" privacy setting being set to "From third parties and advertisers". Any cross-storage client code will not crash, however, it will only have access to a sandboxed, isolated local storage instance. As such, none of the data previously set by other origins will be accessible. If an option, one could fall back to using root cookies for those user agents, or requesting the data from a server-side store.

Host

The Host will determine the whitelisted domains that can access the Host

new CoherentDataIntegration.Host([
  {
    origin: /\.host.com$/,
    allow: ["get", "set"],
  {
    origin: /\.client.com$/,
    allow: ["get"],
  },
]);

Client

The Client will determine the Host domain and the mode that it will be used is handover

 const client = new CoherentDataIntegration.Client('handover', 'http://www.host.com');

  // Client triggers sending the payload to Host
  client.send({
    name: 'John Doe',
    age: '35',
    gender: 'Male',
  })

  // Client listens to received payload and automatically deletes the storage
  client.receive()
    .then((result) => {
      return result; // Result: { name: 'John Doe', age: '35', gender: 'Male' }
    })
  });

Iframe Embedded Communication

DEMO

Parent: https://data-integration-lib.s3.ap-southeast-1.amazonaws.com/host.html Client: https://data-integration-lib.s3.ap-southeast-1.amazonaws.com/client.html

Parent

The Parent can send and receive data to Child.

<!-- host.html -->
<iframe src="https://www.client.com" id="coherent-frame"></iframe>

// @param
// mode: embedded | handover
// iFrameID: string
const client = new CoherentDataIntegration.Client('embedded', 'coherent-frame');

client.onReceive(data => console.log(data)); // Result: {name: 'Jane', age: 34}
client.send({ name: 'John', age: 28 });

Client

The Client can send and receive data to the Parent

// @param
// mode: embedded | handover
const client = new CoherentDataIntegration.Client('embedded');

client.send({ name: 'Jane', age: 34 });
client.onReceive(data => console.log(data)); // Result: {name: 'John', age: 28}

Benchmarks

Results are using Node v16.11.1 on Macbook Pro M1 8GB Ram

Diagram

Cross-Domain Storage

iFrame Embedded Communication