ENS Login iFrame proposal DRAFT.md

Ens Login iFrame draft proposal

Abstract

• User enters his ENS (e.g. user.my-wallet.eth)
• Dapp queries the Ethereum blockchain with an ENS to get the provider source URL/IPFS hash and loads the wallet provider in a sandboxed iframe.
• Dapp interacts with the wallet provider via PostMessage interface - https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
• Messages between dapp and wallet provider should comply with EIP-1474 - https://eips.ethereum.org/EIPS/eip-1474

Iframe benefits

• Better security: wallet provider code is loaded in a sandbox environment, can't read dapp's localstorage/cookies and can't track dapp location
• Formalized specs: a wallet provider needs to provide a js code that can respond to the eip-1474 messages

Example pseudo-code

Dapp

1. Fetch wallet provider source from ENS
2. Add the wallet provider iframe to the dapp's web page
3. Subscribe to events from wallet provider iframe
4. Exchange messages with wallet provider via iframe

// 1. Fetch wallet provider source from ENS 
walletProviderUrl = fetchIframeUrl(ensName)

// 2. Add the wallet provider iframe to the dapp's web page
walletIframe = document.body.append(‘iframe’)
walletIframe.src = walletProviderUrl

// 3. Subscribe to events from wallet provider iframe 
dappWindow.addEventListener("message",onMessageFromWallet, false)

// 4. Exchange messages with wallet provider via PostMessage interface
// e.g. when need to call some method like eth_sendTransaction
walletIframe.postMessage(msg, walletProviderUrl)
// Example of `msg`: 
// msg  = {
//    "id": 1337,
//    "jsonrpc": "2.0",
//    "method": "eth_blockNumber",
//    "params": []
// }`

Wallet provider

1. Subscribe to events (messages) from dapp
2. Handle request from the dapp
3. Send response back to the dapp

// 1. Subscribe for events from dapp 
walletIframe.addEventListener("message", onMessageFromDapp, false)
// 
// 2. Handle request from the dapp
onMessageFromDapp(msg) { 
//   make approtiate action: send transaction, sign message or other
//   ... 
//   3. Send response back to the dapp window in the jsonrpc format - https://www.jsonrpc.org/specification#response_object
     dappWindow.postMessage(response, dappUrl)
}

Implementation

A library similar to web3js or ethers can be implemented to abstract away the messaging routine between a dapp and wallet. The lib can comply with eip-1193 and be built on top of Penpal lib

Mockups with the user flow

https://www.figma.com/file/kueZe26fxl440s9hUFoWSO/%5BENS-login%5D-iFrame-Demo?node-id=0%3A1

Useful links

• Case-study by Figma, where they explore how they can safely design plugin system - https://www.figma.com/blog/how-we-built-the-figma-plugin-system/
• Kirby explores how to leverage iframes - https://medium.com/@austin_48503/kirby-32491315c5
• Penpal, a library for communication between an iframe and web page - https://github.com/Aaronius/penpal

Mockups with user flow: https://www.figma.com/file/kueZe26fxl440s9hUFoWSO/%5BENS-login%5D-iFrame-Demo?node-id=0%3A1