mrmurphy

mrmurphy

LiveView & End-to-end encryption

The situation

Hi there! I’m working on a live view app right now that encrypts sensitive user content (text and images) using the browser’s subtlecrypto Javascript APIs.

Showing Content

For text, I implemented a custom HTML element that can take a base64 string of encrypted text, decrypt it, and render it to the page. For images, it takes a link to the image, downloads it, decrypts it, and then renders and image tag with the decrypted data. This is working well!

Creating Content

This gets trickier. When the user writes text or uploads an image, I want to show the plain text, and a preview of the image in the browser. I’d love to do as little custom coding as possible around form interactions, meaning I’d love to just let Live View do its magic with form submission, validation, etc, but I’d love to have a Javascript Hook from Live View that would let me transform the form data before it reaches the server. I’d encrypt the body text and any uploaded images, and then let Live View continue on as if I hadn’t done anything at all.

The Question

I’m not aware of any existing LiveView JS hooks that would let me do something like this. What’s the cleanest and simplest architecture you can think of to put as much of the work as possible on Live View, while still encrypting text and images before they get sent to the server?

Most Liked

jc00ke

jc00ke

Rubinius Core Team

I believe Livebook does this. If I understood the developer correctly when I listened to #046 Livebook with Jonatan Kłosko - Thinking Elixir Livebook uses a custom editor that sends operational transforms to the server, not just the text itself.

Hopefully this puts you on a fruitful path.

mrmurphy

mrmurphy

Thanks for your response @jc00ke! I wanted to follow-up here and tell a little bit about what I actually ended up doing.

I’m using live view to deliver my encrypted content to the browser, which then uses custom HTML elements to decrypt the content and render it on-page.

The form for creating new content is not a live view form.

The screen accepting new content has faux inputs where the user can write plain text, and see the decrypted version of their images, but the actual form inputs, which are hidden, end up being the encrypted versions of the plain text content. I use alpine-js to bind to the change events on the faux inputs, and modify the values in the hidden ones. Then I use javascript and the fetch API to submit the form over AJAX outside of LiveView. Then, the endpoint that creates new content broadcasts the creation event over PubSub, so all viewers get live updates anyway.

Initially I tried using a LiveView form and just setting the content with Javascript, but I had a difficult time getting Live View to behave predictably when I was setting input values through JS, rather than plain user input. The traditional form cleared of all of the strange inconsistencies I was seeing.

Popular Frontend topics Top

malloryerik
Any thoughts on Svelte? Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue...
New
AstonJ
Here’s a pretty good list of them: https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS What’s your favou...
New
AstonJ
DHH might like you to believe they are a thing of the past: https://twitter.com/dhh/status/1275902566719610880 I actually went down thi...
New
First poster: bot
Fable 3.1.2 has been released. Link: Release 3.1.2 · fable-compiler/Fable · GitHub
New
First poster: bot
ThinScript ThinScript is an experimental programming language that compiles to JavaScript, WebAssembly, and C. It’s meant to be a thin la...
New
First poster: bot
Local PDF uses Webassembly to edit your PDFs inside your Browser. Your files won’t leave your System, they will not be sent to another se...
New
mrmurphy
The situation Hi there! I’m working on a live view app right now that encrypts sensitive user content (text and images) using the browser...
New
First poster: bot
Fable 3.2.0 has been released. Link: Release 3.2.0 · fable-compiler/Fable · GitHub
New
First poster: bot
Pablo is a small, open-source JavaScript library for SVG, the web standard for vector graphics. It can be used for vector-based art, game...
New
Fl4m3Ph03n1x
Background I have a button that may be disabled or not, depending on a set of conditions. I want to disable/enable the button without hav...
New

Other popular topics Top

PragmaticBookshelf
Rust is an exciting new programming language combining the power of C with memory safety, fearless concurrency, and productivity boosters...
New
Exadra37
On modern versions of macOS, you simply can’t power on your computer, launch a text editor or eBook reader, and write or read, without a ...
New
dimitarvp
Small essay with thoughts on macOS vs. Linux: I know @Exadra37 is just waiting around the corner to scream at me “I TOLD YOU SO!!!” but I...
New
PragmaticBookshelf
“A Mystical Experience” Hero’s Journey with Paolo Perrotta @nusco Ever wonder how authoring books compares to writing articles?...
New
New
PragmaticBookshelf
A Hero’s Journey with Chris Pine @chrispine Chris Pine, author of Learn to Program, Third Edition, discusses his journey to beco...
New
Maartz
Hi folks, I don’t know if I saw this here but, here’s a new programming language, called Roc Reminds me a bit of Elm and thus Haskell. ...
New
Help
I am trying to crate a game for the Nintendo switch, I wanted to use Java as I am comfortable with that programming language. Can you use...
New
PragmaticBookshelf
Author Spotlight: Bruce Tate @redrapids Programming languages always emerge out of need, and if that’s not always true, they’re defin...
New
CommunityNews
A Brief Review of the Minisforum V3 AMD Tablet. Update: I have created an awesome-minisforum-v3 GitHub repository to list information fo...
New