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

justinjunodev
:rotating_light: Silly Post Alert :rotating_light: With the Coronavirus keeping the majority of us developers quarantined, how many “new...
New
First poster: bot
React is Dead. Long live Reactive Rails! Long live StimulusReflex and ViewComponent!. Let me tell you about the feeling that I get when ...
New
First poster: bot
Why do ARM chips have an instruction with Javascript in the name (FJCVTZS)?. FJCVTZS is “Floating-point Javascript Convert to Signed fix...
New
finner
Some resources for Spring Home of Spring Spring Initializr Head First Spring with Reactor
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
I (re-)realized I had the book “Modern CSS with Tailwind” bought, never read a page of it until today. With me being a fast reader and th...
New
First poster: bot
Interactive periodic table showing names, electrons, and oxidation states. Visualize trends, 3D orbitals, isotopes, and mix compounds. Fu...
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
riyajohnson
When it comes to selecting a framework for a development project, it’s crucial to make an informed decision. With so many options availab...
New
guaip
I’ve been doing front-end as a freelancer for 15 years. I have some PHP background and still do some backend stuff to this day, but I spe...
New

Other popular topics Top

Devtalk
Reading something? Working on something? Planning something? Changing jobs even!? If you’re up for sharing, please let us know what you’...
1033 17470 383
New
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
AstonJ
I have seen the keycaps I want - they are due for a group-buy this week but won’t be delivered until October next year!!! :rofl: The Ser...
New
AstonJ
Do the test and post your score :nerd_face: :keyboard: If possible, please add info such as the keyboard you’re using, the layout (Qw...
New
Exadra37
Oh just spent so much time on this to discover now that RancherOS is in end of life but Rancher is refusing to mark the Github repo as su...
New
AstonJ
Seems like a lot of people caught it - just wondered whether any of you did? As far as I know I didn’t, but it wouldn’t surprise me if I...
New
Margaret
Hello everyone! This thread is to tell you about what authors from The Pragmatic Bookshelf are writing on Medium.
1143 25883 760
New
PragmaticBookshelf
Author Spotlight: Karl Stolley @karlstolley Logic! Rhetoric! Prag! Wow, what a combination. In this spotlight, we sit down with Karl ...
New
PragmaticBookshelf
Author Spotlight: Peter Ullrich @PJUllrich Data is at the core of every business, but it is useless if nobody can access and analyze ...
New