npm - signal-bridge - Versions diffs - 1.0.9 → 1.0.12 - Mend

signal-bridge 1.0.9 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md CHANGED Viewed

@@ -244,88 +244,33 @@ Dirancang untuk kebutuhan komunikasi microfrontend / iframe integration dengan f
 ---
-## 🐘 Tutorial: Integrasi dengan Laravel
+## 🐘 Tutorial: Integrasi dengan Laravel (sebagai Remote)
-### Gambaran Skenario
+Posisi Laravel di sini adalah **Remote** — halaman Laravel berjalan di dalam iframe yang di-embed oleh aplikasi Host lain.
 ```
-[ Laravel Host (parent) ] <---postMessage---> [ iframe (Remote) ]
+[ Host (parent window) ] ---postMessage---> [ Laravel (iframe / remote) ]
 ```
-Ada dua posisi Laravel dalam integrasi ini:
-| Posisi | Deskripsi |
-|---|---|
-| **Host** | Laravel menampilkan halaman yang memuat iframe aplikasi lain |
-| **Remote** | Halaman Laravel di-embed sebagai iframe oleh aplikasi lain |
 ---
-### Skenario A — Laravel sebagai Host (menampilkan iframe)
-Laravel membuka halaman yang memuat iframe dari SPA lain (React, Vue, dsb).
+### Instalasi
-**`resources/views/host.blade.php`**
+Via CDN di Blade:
 ```html
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Host App</title>
-    <!-- Sertakan library untuk fungsi encrypt jika dibutuhkan -->
-    <script src="https://cdn.jsdelivr.net/npm/signal-bridge/dist/index.global.js"></script>
-</head>
-<body>
-    <iframe
-        id="remote-frame"
-        src="https://app-remote.example.com"
-        width="100%"
-        height="600"
-    ></iframe>
-    <script>
-        const iframe = document.getElementById('remote-frame');
-        const REMOTE_ORIGIN = 'https://app-remote.example.com';
-        // Terima pesan dari iframe
-        window.addEventListener('message', function (event) {
-            if (event.origin !== REMOTE_ORIGIN) return;
-            if (event.data.__source !== 'remote') return;
-            const { type, payload } = event.data;
-            if (type === 'ready') {
-                console.log('Remote siap:', payload);
-                // Kirim data ke remote setelah ia siap
-                iframe.contentWindow.postMessage({
-                    type: 'user-data',
-                    payload: {
-                        name: '{{ auth()->user()->name }}',
-                        role: '{{ auth()->user()->role }}',
-                    },
-                    txn: 'txn-001',
-                    __source: 'host',
-                }, REMOTE_ORIGIN);
-            }
+<script src="https://cdn.jsdelivr.net/npm/signal-bridge/dist/index.global.js"></script>
+```
-            if (type === 'logout') {
-                // Remote minta logout di host juga
-                window.location.href = '/logout';
-            }
-        });
-    </script>
+Atau via NPM (Laravel Vite):
-</body>
-</html>
+```bash
+npm install signal-bridge
 ```
 ---
-### Skenario B — Laravel sebagai Remote (berjalan di dalam iframe)
-Halaman Laravel di-embed sebagai iframe oleh aplikasi lain.
+### Setup Dasar
 **`resources/views/remote.blade.php`**
@@ -337,159 +282,145 @@ Halaman Laravel di-embed sebagai iframe oleh aplikasi lain.
     <script src="https://cdn.jsdelivr.net/npm/signal-bridge/dist/index.global.js"></script>
 </head>
 <body>
-    <div id="app">
-        <p id="user-name">Memuat data...</p>
-    </div>
+    <div id="app"></div>
     <script>
-        // Inisialisasi bridge — otomatis mengirim sinyal "ready" ke host
-        const bridge = window.signalBridge.init('my-laravel-app', {
+        const bridge = window.signalBridge.initBridge('my-laravel-app', {
             allowedHostOrigins: ['https://host-app.example.com'],
-            debug: true, // aktifkan log di console (nonaktifkan di production)
+            debug: true,
         });
-        // Dengarkan pesan dari host
         bridge.listen(function (message) {
-            // Handshake awal dari host — host mengirim token & user terenkripsi
-            // txn digunakan sebagai key dekripsi per-sesi
+            /**
+             * Handshake dari host.
+             * Payload yang diterima:
+             * {
+             *   "type": "connection",
+             *   "payload": {
+             *     "token": "xxxx",
+             *     "txn": "2mFMfAtLD",
+             *     "idChangeRole": null,
+             *     "ticket": "ST-1780470879-VGVVGUVY0L",
+             *     "path": "/dashboard"
+             *   },
+             *   "__source": "host",
+             *   "__origin": "https://host-app.example.com"
+             * }
+             */
             if (message.type === 'connection') {
-                const token    = bridge.decrypt(message?.token, message?.txn);
-                const userData = bridge.decrypt(message?.user,  message?.txn);
+                const { token, txn, ticket, path, idChangeRole } = message.payload;
+                // Dekripsi token menggunakan txn sebagai key per-sesi
+                const decryptedToken = window.signalBridge.decrypt(token, txn);
-                console.log('Decrypted Token:', token);
-                console.log('Decrypted User Data:', userData);
+                console.log('Decrypted Token:', decryptedToken);
+                console.log('Ticket:', ticket);
+                console.log('Path:', path);
+                console.log('idChangeRole:', idChangeRole);
-                // Simpan ke state atau tampilkan ke UI
-                document.getElementById('user-name').textContent = userData?.name ?? '';
+                // Simpan token ke state / localStorage sesuai kebutuhan
+                // Arahkan ke path yang dikirim host
+                if (path && path !== window.location.pathname) {
+                    window.location.href = path;
+                }
             }
-            // Host mengirim perintah ganti role
+            // Host meminta ganti role
             if (message.type === 'change-role') {
-                const role = bridge.decrypt(message?.data, message?.txn);
-                console.log('Decrypted Role selected:', role);
+                const { data, txn } = message.payload;
+                const role = window.signalBridge.decrypt(data, txn);
-                // Lakukan sesuatu dengan role, misalnya redirect atau reload data
+                console.log('Decrypted Role selected:', role);
+                // Lakukan reload atau update state sesuai role baru
             }
         });
-        // Kirim event ke host
-        bridge.emit('page-loaded', { path: window.location.pathname });
-    </script>
+        // Emit navigate saat halaman pertama kali dimuat
+        bridge.emit('navigate', { path: window.location.pathname });
+        // Emit navigate setiap perubahan URL (back/forward browser)
+        window.addEventListener('popstate', function () {
+            bridge.emit('navigate', { path: window.location.pathname });
+        });
+        // Emit navigate setiap perubahan hash (untuk hash-based routing)
+        window.addEventListener('hashchange', function () {
+            const path = location.hash.startsWith('#/')
+                ? location.hash.slice(1)
+                : location.pathname;
+            bridge.emit('navigate', { path });
+        });
+    </script>
 </body>
 </html>
 ```
+> Pesan yang dikirim ke host akan berbentuk:
+> ```json
+> {
+>   "app_id": "my-laravel-app",
+>   "type": "navigate",
+>   "payload": { "path": "/u/dashboard" },
+>   "txn": "",
+>   "__origin": "https://your-laravel-app.com",
+>   "__source": "remote"
+> }
+> ```
 **Route:**
 ```php
 // routes/web.php
 Route::get('/remote', function () {
     return view('remote');
-})->middleware('auth');
-```
----
-### Skenario C — Dengan Enkripsi AES
-Gunakan `cryptoKey` agar payload dienkripsi saat dikirim lewat postMessage.
-**`.env`**
-```
-BRIDGE_KEY=Xk9mN3pQrT2wAbCd
-```
-**`config/app.php`**
-```php
-'bridge_key' => env('BRIDGE_KEY'),
-```
-**Sisi Host (mengirim payload terenkripsi):**
-```html
-<script src="https://cdn.jsdelivr.net/npm/signal-bridge/dist/index.global.js"></script>
-<script>
-    const SECRET_KEY = '{{ config("app.bridge_key") }}';
-    const REMOTE_ORIGIN = 'https://app-remote.example.com';
-    window.addEventListener('message', function (event) {
-        if (event.origin !== REMOTE_ORIGIN) return;
-        if (event.data.__source !== 'remote') return;
-        if (event.data.type === 'ready') {
-            // Enkripsi payload sebelum dikirim
-            const encryptedPayload = window.signalBridge.encrypt(
-                { token: '{{ session("api_token") }}', userId: {{ auth()->id() }} },
-                SECRET_KEY
-            );
-            document.getElementById('remote-frame').contentWindow.postMessage({
-                type: 'auth',
-                payload: encryptedPayload,
-                txn: 'txn-auth-001',
-                __source: 'host',
-            }, REMOTE_ORIGIN);
-        }
-    });
-</script>
-```
-**Sisi Remote (blade dalam iframe — payload otomatis di-decrypt):**
-```html
-<script src="https://cdn.jsdelivr.net/npm/signal-bridge/dist/index.global.js"></script>
-<script>
-    const bridge = window.signalBridge.init('my-laravel-app', {
-        allowedHostOrigins: ['https://host-app.example.com'],
-        cryptoKey: '{{ config("app.bridge_key") }}', // key yang sama
-    });
-    bridge.listen(function (message) {
-        // payload sudah otomatis di-decrypt oleh library
-        if (message.type === 'auth') {
-            console.log('User ID:', message.payload.userId);
-            console.log('Token:', message.payload.token);
-        }
-    });
-</script>
+});
 ```
 ---
-### Skenario D — Menggunakan NPM + Vite (Laravel Modern)
-**Install:**
-```bash
-npm install signal-bridge
-```
+### Menggunakan NPM + Vite
 **`resources/js/bridge.js`**
 ```js
-import { initBridge, signalBridge } from 'signal-bridge';
+import { initBridge } from 'signal-bridge';
-const bridge = initBridge('my-app', {
+const bridge = initBridge('my-laravel-app', {
     allowedHostOrigins: [import.meta.env.VITE_HOST_ORIGIN],
-    cryptoKey: import.meta.env.VITE_BRIDGE_KEY,
     debug: import.meta.env.DEV,
 });
 bridge.listen((message) => {
-    if (message.type === 'user-data') {
-        console.log('Data dari host:', message.payload);
+    if (message.type === 'connection') {
+        const { token, txn, ticket, path, idChangeRole } = message.payload;
+        const decryptedToken = window.signalBridge.decrypt(token, txn);
+        console.log('Decrypted Token:', decryptedToken);
+        console.log('Ticket:', ticket);
+        console.log('Path:', path);
+        console.log('idChangeRole:', idChangeRole);
     }
+    if (message.type === 'change-role') {
+        const { data, txn } = message.payload;
+        const role = window.signalBridge.decrypt(data, txn);
+        console.log('Decrypted Role selected:', role);
+    }
 });
-bridge.emit('page-loaded', { path: window.location.pathname });
+// Emit navigate saat halaman pertama kali dimuat
+bridge.emit('navigate', { path: window.location.pathname });
+// Untuk Inertia.js — hook ke router event
+// import { router } from '@inertiajs/vue3';
+// router.on('navigate', () => bridge.emit('navigate', { path: window.location.pathname }));
-// Export untuk dipakai di file lain
 export { bridge };
 ```
@@ -497,7 +428,6 @@ export { bridge };
 ```
 VITE_HOST_ORIGIN=https://host-app.example.com
-VITE_BRIDGE_KEY=Xk9mN3pQrT2wAbCd
 ```
 **`resources/views/remote.blade.php`**
@@ -514,26 +444,32 @@ VITE_BRIDGE_KEY=Xk9mN3pQrT2wAbCd
 </html>
 ```
-**Akses instance dari file lain (misalnya di komponen Alpine.js / Livewire):**
+---
+### Akses Instance dari File Lain
 ```js
 import { signalBridge } from 'signal-bridge';
-// Ambil instance yang sudah dibuat sebelumnya
+// Ambil instance yang sudah dibuat tanpa init ulang
 const bridge = signalBridge();
 bridge.emit('form-submit', { id: 123 });
 ```
 ---
-### Menggunakan generateKey untuk Membuat Key Baru
+### Catatan Keamanan
-Jika butuh membuat `BRIDGE_KEY` baru, jalankan di console browser atau Node:
-```js
-import { generateKey } from 'signal-bridge';
+- Selalu set `allowedHostOrigins` secara eksplisit, jangan pakai wildcard.
+- `txn` adalah key dekripsi per-sesi yang dikirim Host — jangan simpan permanen.
+- Konfigurasi `Content-Security-Policy: frame-ancestors` agar hanya Host yang diizinkan bisa embed halaman Laravel:
-console.log(generateKey(24)); // contoh: "Xk9mN3pQrT2wAbCdEfGhIjKl"
+```php
+// Middleware atau kernel
+$response->headers->set(
+    'Content-Security-Policy',
+    "frame-ancestors 'self' https://host-app.example.com"
+);
 ```
 ---

package/dist/index.global.js CHANGED Viewed

@@ -1,5 +1,5 @@
 "use strict";
-var signalBridge = (() => {
+var _signalBridgeLib = (() => {
   var __create = Object.create;
   var __defProp = Object.defineProperty;
   var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "signal-bridge",
-  "version": "1.0.9",
+  "version": "1.0.12",
   "description": "Secure iframe communication bridge",
   "author": "Ekahersada <ekahersada@gmail.com>",
   "main": "dist/index.js",