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

AstonJ
Sprinkles of JS, or full frontend frameworks? What do you use and why?
New
michael
So I have a table of MediaItems and when that list changes, say new entries, I’d like LiveView to know about that so that the Timeline up...
New
AstonJ
I was watching this video by Richard Feldman (Elm core team) and he’s predicting TypeScript is going to take over the JS world: ...
New
AstonJ
We should probably add a WASM portal at some point :nerd_face: Edit: Done:
New
First poster: bot
23.44% of the PRs made by outsiders (not owners/members) get merged. PRs usually closed after 0.17 days (median) ** Based on most recen...
New
mafinar
Just like I did one on Tailwind some time ago, I am going to play with AlpineJS the next few days. It’s a nice little JS framework that ...
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
XSukhpreet
My Favorite tool is figma, It helps a lot in designing .
New
harwind
Why does the image in my <img> tag appear larger than its specified width within a flex container? Here’s my HTML and CSS code: HT...
New
jaeyson
Hi Elixir and React friends! I read a post (Stephen Bussey - React in LiveView: How and Why?) on use case for reaching react for complex...
New

Other popular topics Top

PragmaticBookshelf
Machine learning can be intimidating, with its reliance on math and algorithms that most programmers don't encounter in their regular wor...
New
PragmaticBookshelf
Brace yourself for a fun challenge: build a photorealistic 3D renderer from scratch! In just a couple of weeks, build a ray tracer that r...
New
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
Design and develop sophisticated 2D games that are as much fun to make as they are to play. From particle effects and pathfinding to soci...
New
husaindevelop
Inside our android webview app, we are trying to paste the copied content from another app eg (notes) using navigator.clipboard.readtext ...
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
AnfaengerAlex
Hello, I’m a beginner in Android development and I’m facing an issue with my project setup. In my build.gradle.kts file, I have the foll...
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
Fl4m3Ph03n1x
Background Lately I am in a quest to find a good quality TTS ai generation tool to run locally in order to create audio for some videos I...
New
PragmaticBookshelf
Use advanced functional programming principles, practical Domain-Driven Design techniques, and production-ready Elixir code to build scal...
New