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.

Where Next?

Popular Frontend topics Top

First poster: bot
The Analytics That Matter | CSS-Tricks. I’ve long been skeptical of quoting global browser usage percentages to justify their usage of b...
New
MikhailPertsev
Finally, I am going to enhance my css skills! I have always somehow ignored this, but now I finally decided to understand animations, tr...
New
AstonJ
We should probably add a WASM portal at some point :nerd_face: Edit: Done:
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
ClaudiaGiv
Hi all, I recently started working with Svelte and created a small app with SvelteKit in order to understand better the framework. I hav...
New
First poster: bot
Interactive periodic table showing names, electrons, and oxidation states. Visualize trends, 3D orbitals, isotopes, and mix compounds. Fu...
New
XSukhpreet
My Favorite tool is figma, It helps a lot in designing .
New
AstonJ
Was just curious to see if any were around, found this one: I got 51/100: Not sure if it was meant to buy I am sure at times the b...
New
Fl4m3Ph03n1x
Background I am trying to recycle myself and improve my knowledge about Phoenix. With 1.7 now out, this seems like a good opportunity. ...
New
zoosky
Hi! After working hard on this side project (a Rust based Markdown CMS for humans and agents) and reaching a level, where the product can...
New

Other popular topics Top

PragmaticBookshelf
Free and open source software is the default choice for the technologies that run our world, and it’s built and maintained by people like...
New
PragmaticBookshelf
Use WebRTC to build web applications that stream media and data in real time directly from one user to another, all in the browser. ...
New
AstonJ
We’ve talked about his book briefly here but it is quickly becoming obsolete - so he’s decided to create a series of 7 podcasts, the firs...
New
PragmaticBookshelf
Rails 7 completely redefines what it means to produce fantastic user experiences and provides a way to achieve all the benefits of single...
New
First poster: AstonJ
Jan | Rethink the Computer. Jan turns your computer into an AI machine by running LLMs locally on your computer. It’s a privacy-focus, l...
New
PragmaticBookshelf
Explore the power of Ash Framework by modeling and building the domain for a real-world web application. Rebecca Le @sevenseacat and ...
New
PragmaticBookshelf
A masterclass in the fundamentals and principles of functional programming. Minh Quang Tran The Art of Functional Programming is a ma...
New
AstonJ
This is cool! DEEPSEEK-V3 ON M4 MAC: BLAZING FAST INFERENCE ON APPLE SILICON We just witnessed something incredible: the largest open-s...
New
PragmaticBookshelf
Overarching tutorial for Python beginner and intermediate developers that teaches web development with the Flask framework. Miguel Gr...
New
CommunityNews
Open-source implementation of the classic GTA engine now running directly in your browser. Experience the reVC technology demo on DOS.Zon...
New