A postMessage bridge to connect to dapps loaded into an iframe.

Overview

cardano-dapp-connector-bridge

A postMessage bridge to connect to dApps loaded into an iframe.

Motivation

In April 2022, browser extensions are the only way to connect to Cardano dApps. The ecosystem lacks a dapp-connector API on mobile devices and the web. This bridge script attempts to fill this gap.

With CIP-0030, Cardano already has a dapp-connector specification. Reusing this API will contribute to rapid adoption.

How to: dApps

DApp includes cardano-dapp-connector-bridge.js and calls:

// Calling this function is mandatory.
initCardanoDAppConnectorBridge(async (walletApi) => {

  // Bridge was established by the wallet.
  // In this callback you can do, whatever is necessary to setup a good connection, eg.
  
  if(walletApi.name === 'eternl') {
    
    // Here you can set any global flags, eg. 
    // isIframeEmbedded = true
    // addWalletFee = true

    // You could also just connect through the dapp-connector as you would normally do via your connect wallet button.
    // eg.:

    // const fullApi = await walletApi.enable() // walletApi is window.cardano.eternl
    
    // Eternl fee address (mainnet/testnet), see EternlDAppBrowser.md for more info.
    // const feeAddress = window.cardano.eternl.experimental.feeAddress // normal string, bech32 address.
  }
})

How to: wallets

Wallets need to provide their API object as usual, but replace all functions with a simple string:

var bridgeInitialApi          = {

  isBridge:                   true,

  isEnabled:                  'isEnabled',
  enable:                     'enable',

  experimental: {             // your experimental object, if it exist

    appVersion: {

      major:                  1,
      minor:                  7,
      patch:                  0
    }
  },

  apiVersion:                 '0.1.0',
  name:                       'yourWalletNameSpace',
  icon:                       'data:image/png;base64,youricon',
}

var bridgeFullApi = {

  getNetworkId:               'getNetworkId',
  getUsedAddresses:           'getUsedAddresses',
  getUnusedAddresses:         'getUnusedAddresses',
  getRewardAddresses:         'getRewardAddresses',
  getChangeAddress:           'getChangeAddress',
  getBalance:                 'getBalance',
  getUtxos:                   'getUtxos',

  signTx:                     'signTx',
  signData:                   'signData',
  submitTx:                   'submitTx',

  getCollateral:              'getCollateral',

  experimental: {             // your experimental object, if it exist

    getCollateral:            'getCollateral'
  }
}

The API objects will be automatically recreated on the dApp side using postMessage calls.
See cardano-dapp-connector-bridge-init-wallet.js for more hints on how to implement it.

Response headers

To be able to load a dApp page into an iframe, response headers must be configured correctly. This includes pages, images (CDNs) etc. (also remove X-Frame-Options, if present):

Add:

content-security-policy: frame-ancestors https://staging.eternl.io/ https://eternl.io/ ionic: capacitor: chrome-extension: http://localhost:*/ https://localhost:*/;

cross-origin-embedder-policy: require-corp
cross-origin-opener-policy: same-origin
cross-origin-resource-policy: cross-origin

Remove:

X-Frame-Options

What frame-ancestors do?

https://staging.eternl.io/ https://eternl.io/ -- page loadable on eternl pages.  
ionic: capacitor: chrome-extension: -- page loadable in apps.  
http://localhost:*/ https://localhost:*/ -- page loadable in development environments.  
You might also like...

A simple javascript utility library to include partial html (iframe alternate) without a framework or jQuery.

alt-iframe A simple javascript utility library to include partial html (iframe alternate) without a framework or jQuery. !doctype html html lang="e

Dec 30, 2022

A MagicMirror² module which embeds multiple other websites with iframe or webview

A MagicMirror² module which embeds multiple other websites with iframe or webview

MMM-EmbedURL This is a MagicMirror² module which embeds other websites either by "iframe" (default), "webview" or a custom HTML-element to your mirror

Dec 18, 2022

Components and tools for building DeFi dapps on Solana + Anchor. Public domain license.

Solana DeFi Framework Components and tools for building DeFi dapps on Solana + Anchor. Public domain license. Status Pre-pre-pre-alpha. Contributing A

Mar 28, 2022

Lightweight reusable Web3 UI components for dapps.

Lightweight reusable Web3 UI components for dapps.

Web3UIKit 🧙‍♂️ Beautiful and lightweight UI components for web3 developers. This UI library will speed up your dapp development no matter which chain

Dec 26, 2022

Weaver IBAX IDE. IBAX Network offers a polished development tool Weaver to develop DApps for ecoLibs (side chains).

Weaver Provide the user interface for ibax. Provide the IDE for App development. Save the private key of the user account and grant the permissions. R

Nov 4, 2022

The Remix Stack for Web2 apps and Web3 DApps with authentication with Magic, testing, linting, formatting, etc.

The Remix Stack for Web2 apps and Web3 DApps with authentication with Magic, testing, linting, formatting, etc.

Remix French House Stack Learn more about Remix Stacks. npx create-remix --template janhesters/french-house-stack What's in the Stack? The French Hou

Dec 26, 2022

Browser extension that enables you to Log-in as ANY address on ALL dapps

Browser extension that enables you to Log-in as ANY address on ALL dapps

Impersonator Extension Log-in as ANY address on ALL dapps. Impersonator injects into the dapps just like Metamask, but gives you the freedom to set cu

Dec 14, 2022

A developer's guide to building dapps on Fuel.

Fuel Fuel Labs is building Fuel, the fastest modular execution layer. Learn more about Fuel: Fuel docs Getting Fuelpilled: Why Developers Should Be Lo

Dec 1, 2022

A Collection of Solana dApps for workshops!

Solana Workshop dApps Your instructor may use one of the applications stored in this repository to conduct a Building on Solana workshop. There are a

Dec 15, 2022
Owner
Tastenkunst GmbH
Development Studio - Face Tracking - Online Ad production - Custom Software
Tastenkunst GmbH
Sheetzapper imports your account value accross Zapper.fi supported wallets and dapps into a Google Sheet

Overview Sheetzapper imports your account value accross Zapper.fi supported wallets and dapps into a Google Sheet. This allows you to chart your net w

null 4 Nov 27, 2022
MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

MUI Core MUI Core contains foundational React UI component libraries for shipping new features faster. Material UI is a comprehensive library of compo

MUI 83.6k Dec 30, 2022
A movie schema sandbox for playing with EdgeDB and the EdgeQL query builder, pre-loaded with MCU data

The EdgeDB MCU sandbox ?? This is a sandbox for playing with EdgeDB and the EdgeQL query builder. It includes a simple movie database schema (dbschema

EdgeDB 13 Nov 9, 2022
Connect Web Integration illustrates the integration of Connect-Web in various JS frameworks and tooling

Connect Web Integration Connect Web Integration is a repository of example projects using Connect-Web with various JS frameworks and tooling. It provi

Buf 43 Dec 29, 2022
A web app to post emoji implemented in connect-go and connect-web.

emotter Emotter is an app to post and share single emoji. This is an example app of connect. Example https://emotter.syumai.com API: Cloud Run Web cli

syumai 11 Oct 30, 2022
BRIDGE is a collaborative project for fx(hash), conceived by Camille Roux.

BRIDGE collaborative project for fxhash BRIDGE is an experimental project for fxhash. Any artist can contribute. The main rule: draw the tiles at the

Camille Roux 11 Jul 22, 2022
A lightweight extension to automatically detect and provide verbose warnings for embedded iframe elements in order to protect against Browser-In-The-Browser (BITB) attacks.

Enhanced iFrame Protection - Browser Extension Enhanced iFrame Protection (EIP) is a lightweight extension to automatically detect and provide verbose

odacavo 16 Dec 24, 2022
A bridge between different EVM based Chains.

Blockchain Bridge between different Ethereum based chains. This project uses DApps and smart contracts to Bridge assets between blockchains and it is

Yadav! ✔ 4 Jun 2, 2022
StarkNet wallet <-> dApp bridge

get-starknet StarkNet wallet <-> dApp bridge Alpha version Goals Allow dApps to seamlessly connect to any wallet on StarkNet Allow wallets to seamless

null 44 Dec 21, 2022
iframe and html5 file uploader

Upload iframe and html5 uploader. ⇪ 演示 查看演示,你需要 clone 一份代码: $ git clone git://github.com/aralejs/upload $ cd upload $ npm install $ spm install $ node

aralejs 85 Apr 7, 2022