uipath-apps-communication-driver
Advanced tools
A lightweight and secure communication library for cross-window messaging between parent windows and iframes.
A lightweight and secure communication library for cross-window messaging between parent windows and iframes.
npm install uipath-apps-communication-driver
# or
yarn add uipath-apps-communication-driver
Here's how to integrate the communication-driver in your parent window:
import { handshake } from 'uipath-apps-communication-driver;
// Create an iframe element
const iframe = document.createElement('iframe');
iframe.src = 'https://your-child-origin.com';
document.body.appendChild(iframe);
// Initialize communication
const { channel } = await handshake({
targetOrigin: 'https://your-child-origin.com',
iframe: iframe,
timeout: 10000 // Optional: Set a custom timeout in milliseconds (default: 5000ms)
});
// Listen for messages from the child
channel.on('someEvent', (data) => {
console.log('Received from child:', data);
});
// Send messages to the child
channel.send('someEvent', { message: 'Hello from parent!' });
Here's a complete example of a parent window implementation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parent Window</title>
</head>
<body>
<h1>Parent Window</h1>
<div style="display: flex; gap: 16px; margin-bottom: 16px;">
<input type="text" id="messageInput" placeholder="Enter your message">
<input type="text" id="eventName" placeholder="Enter event name">
<button onclick="sendMessage()">Submit</button>
</div>
<iframe id="app-frame"
src="https://your-child-origin.com"
width="100%" height="800">
</iframe>
<script>
var channel;
function sendMessage() {
const messageInput = document.getElementById('messageInput');
const eventName = document.getElementById('eventName').value;
const message = messageInput.value;
if (message.trim()) {
channel.send(`${eventName}`, { message });
messageInput.value = '';
}
}
</script>
<script type="module">
import { handshake } from './driver.js';
try {
const iframe = document.getElementById("app-frame");
const { channel: localChannel } = await handshake({
targetOrigin: "https://your-child-origin.com",
iframe,
targetWindow: iframe.contentWindow,
timeout: 10000 // Optional: Set a custom timeout in milliseconds
});
channel = localChannel;
// Listen for messages from the child
channel.on("EVENT_FROM_APP", (data) => {
console.log("Received from App:", data);
});
} catch (error) {
console.error('Communication error:', error);
}
</script>
</body>
</html>
This example demonstrates:
In your child window or iframe:
import { handshake } from 'uipath-apps-communication-driver';
// Initialize communication with parent
const { channel } = await handshake({
targetOrigin: 'https://your-parent-origin.com',
timeout: 10000 // Optional: Set a custom timeout in milliseconds
});
// Listen for messages from the parent
channel.on('someEvent', (data) => {
console.log('Received from parent:', data);
});
// Send messages to the parent
channel.send('someEvent', { message: 'Hello from parent!' });
interface HandshakeOptions {
targetOrigin: string; // The expected origin for messages
targetWindow?: Window; // The window to communicate with (optional)
iframe?: HTMLIFrameElement; // Optional iframe instance for communication
timeout?: number; // Optional timeout in milliseconds (default: 5000ms)
}
interface Channel {
send: (event: string, data: any) => void;
on: (event: string, callback: (data: any) => void) => void;
}
targetOrigin to ensure messages are only accepted from trusted sourcesError Handling: Always wrap the handshake in a try-catch block:
try {
const { channel } = await handshake({
targetOrigin: 'https://your-child-origin.com',
iframe: iframe,
timeout: 10000 // Set an appropriate timeout for your use case
});
} catch (error) {
console.error('Failed to establish communication:', error);
// Handle timeout errors specifically
if (error.message.includes('timed out')) {
console.error('Handshake timed out. The other party did not respond in time.');
}
}
Event Naming: Use consistent and descriptive event names across your application
Data Validation: Validate data received through the channel before processing
Cleanup: Remove event listeners when they're no longer needed:
channel.on('someEvent', null); // Remove the listener
Timeout Configuration: Set an appropriate timeout value based on your application's needs:
The library uses the standard postMessage API and is supported in all modern browsers:
MIT
FAQs
A lightweight and secure communication library for cross-window messaging between parent windows and iframes.
We found that uipath-apps-communication-driver demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Security News
Open VSX has removed three extension IDs from its malicious-extension list as the legitimate publishers they impersonated move to claim the names for themselves.
Product
Socket’s PHP and Composer support is now in Beta for all customers, with PHP reachability analysis generally available.
Product
Socket is bringing experimental protection to Firefox, scanning 97,000+ extensions in Mozilla's official directory for malware and risky updates.