twist of SharedWorker to allow CORS
npm install remote-shared-workerA powerful tool that extends the native SharedWorker functionality, making it easy to load and use scripts from different domains. It bypasses common CORS issues, enables dynamic cookie syncing, and provides enhanced control over session management.
importScripts Handling: Overrides importScripts in the worker to resolve script URLs relative to the worker script, ensuring compatibility across origins.To get started, install the package via npm:
``bash`
npm install remote-shared-worker
After installation, you can use RemoteSharedWorker just like a regular SharedWorker, but with enhanced features for cross-origin compatibility and cookie management.
`javascript
import RemoteSharedWorker from 'remote-shared-worker';
const worker = new RemoteSharedWorker('https://example.com/worker.js');
worker.port.start();
worker.port.postMessage('Hello, remote worker!');
`
`javascript
import RemoteSharedWorker from 'remote-shared-worker';
const worker = new RemoteSharedWorker('worker.js');
worker.port.onmessage = (event) => {
console.log('Message from worker:', event.data);
};
worker.port.postMessage('Hello, worker!');
`
`javascript
import RemoteSharedWorker from 'remote-shared-worker';
const worker = new RemoteSharedWorker('https://external-site.com/worker.js');
worker.port.onmessage = (event) => {
console.log('Message from cross-origin worker:', event.data);
};
worker.port.postMessage('Hello from the main thread!');
`
The RemoteSharedWorker provides robust cookie handling capabilities, making it easy to sync and manage session-related cookies between the main thread and the worker.
You can dynamically update the list of cookie prefixes to be synced using the updateFilter() method.
`javascript
import RemoteSharedWorker from 'remote-shared-worker';
const worker = new RemoteSharedWorker('worker.js');
worker.updateFilter(['custom_', 'tracking_', 'auth_']);
worker.port.onmessage = (event) => {
console.log('Filtered cookies:', event.data);
};
worker.port.postMessage('Requesting filtered cookies.');
`
The worker periodically checks for expired cookies and removes them to prevent stale data.
`javascript
import RemoteSharedWorker from 'remote-shared-worker';
const worker = new RemoteSharedWorker('worker.js');
worker.port.onmessage = (event) => {
console.log('Valid cookies after cleanup:', event.data);
};
worker.port.postMessage('Check for expired cookies.');
`
#### 1. Syncing Process
- The syncCookies() method retrieves cookies from document.cookie in the main thread.updateFilter()
- The cookies are filtered based on the prefixes specified in .port.postMessage()
- The filtered cookies are sent to the worker using .
#### 2. Dynamic Filter Updates
- Use updateFilter(newFilter) to change the list of cookie prefixes at any time.
`javascript`
worker.updateFilter(['session_']);
#### 3. Cookie Expiration Handling
- The worker inspects each cookieโs expires attribute and excludes expired cookies.`javascript
import RemoteSharedWorker from 'remote-shared-worker';
const worker = new RemoteSharedWorker('worker.js');
// The worker handles cookie expiry cleanup automatically
worker.port.onmessage = (event) => {
console.log('Received up-to-date cookies:', event.data);
};
worker.port.postMessage('Check for expired cookies.');
``