sreyansjain

sreyansjain

Can Hologram leak data

I have been working mostly on liveview or other server driven frameworks. I have one question.

Can hologram leak unwanted data?

For example lets say a user struct contains name, profile_picture, email and mobile.
I have a UserAvatar component that generates user avatars using name and profile_picture.

Now if I pass the whole user struct to it

<UserAvatar user={@user} /> 

will the email and mobile also get passed down to the browser.
While they might not be directly visible in the template, but can someone see the other details by changing the js in browser.

Please advise.

P.S: I am exploring hologram and so far it looks pretty good. The action and command system is simple and powerful. Thanks.

Marked As Solved

bartblast

bartblast

Creator of Hologram

Short answer: Hologram won’t “leak” data across users, but anything you send to the browser for the current user is visible to that user (e.g., via DevTools). Think of it like a REST response: only send what the current user is allowed to see.

What gets compiled to JavaScript

  • Compiled to the page bundle: functions reachable from page/component template/0 and action/3, plus component init/2 (see also: Hologram Elixir → JS compilation)
  • Not compiled to JS: server init/3 (page and component), command/3
  • Bundles are generic and public; they don’t contain per-user data.

What data reaches the browser

  • Per-user state is serialized into the initial HTML mount payload (for client runtime to start). They are visible to the current user in DevTools.
  • Passing a whole struct as a prop is acceptable; it just means all its fields are present client-side for that user. If you want to minimize payload and exposure, pass only the fields you need.

About secrets (same rules as frontend JS frameworks)

  • Never hardcode or send global/shared secrets (e.g., service API keys, service account creds, DB creds) in any code compiled to the client: action/3, template/0, helpers they call, or component init/2. As with React/Vue/Svelte, anything hardcoded in client-compiled code ships in the bundle and is visible to anyone.
  • Don’t place global/shared secrets into state/props either - mount payloads are visible to the current user.
  • Sending sensitive data that the current user is authorized to access is fine if it’s intentional and needed for UX (e.g., account balance, email, or a user‑scoped short‑lived token). Just remember it will be visible to that user in the browser.

OK (user-authorized data in server init/3, visible only to that user in the mount payload):

def init(_params, component, _server) do
  put_state(component, :account_balance_cents, 123_45)
end

OK (user-scoped, least‑privilege token if truly needed client-side):

def init(_params, component, _server) do
  put_state(component, :photo_upload_token, issue_user_scoped_token())
end

Not OK (global/shared secret compiled to the public bundle):

def action(:my_action, _params, component) do
  put_state(component, :api_key, "my_global_service_key")
end

TL;DR

  • Bundles are public and generic; per-user data isn’t stored there.
  • Per-user data is in the HTML mount payload and visible to the current user.
  • Only send data the current user should see (same mindset as a REST response).
  • Same as frontend JS frameworks: never hardcode or send global/shared secrets to the client; user-authorized sensitive data can be sent intentionally, knowing it will be visible client-side.

Glad to hear the actions/commands model clicks! :slight_smile:

Also Liked

bartblast

bartblast

Creator of Hologram

You get a very simple action/command programming model with zero latency, but you need to account for actions/templates living client-side. So use:

  • Actions & templates for data that’s public to the user (gets zero latency interactions)
  • Commands for operations that should be private and when you need security (executed on the server)

For example, if a bank is processing a credit score using trade secrets, internal algorithms, and user data that should only be visible to the bank, you’d use a command that calls your Phoenix context or some service and returns the data for the template (like the final score or approval status). Actions and templates are basically your view layer that lives in the user’s browser.

The action/command model gives you a clean separation that works nicely in practice, with usage patterns emerging for different cases like server-to-client state updates, and patterns will likely emerge around these client/server data decisions as well.

Looking ahead, I have ideas for additional tooling like a DSL for defining data shapes, and eventually a local-first data layer where user data syncs declaratively and automatically between client and server.

The mindset shift is: “What does this user need to see/interact with?” goes client-side (and gets instant responsiveness), everything else stays server-side. :slightly_smiling_face:

FlyingNoodle

FlyingNoodle

As far as I understand there is quite a big difference compared to liveview.

Let’s say I have a user that has some attribute that should not be visible for the user, let’s say “is_blocked”. In liveview I can safely pass the entire user struct to a component and all I need to do is make sure that I don’t actually put {@user.is_blocked} in the template. Pretty easy.

However, if I understand correctly, in hologram I would be able to get to this info through Dev tools if I pass the entire struct so I would have to be careful to only pass the args that are supposed to be visible to the user.

Did I understand this correctly? If so, that is quite a big difference.

derek-zhou

derek-zhou

If your bundle contains malicious 3rd party js then your user’s privacy is compromised anyway.

Where Next?

Popular in Questions Top

myronmarston
The Elixir Typespec docs show the following syntax for keyword lists in typespecs: # ... | [key: type] # keyword lists...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New
shahryarjb
Hello, I get Persian date from my client and convert it to normal calendar like this: def jalali_string_to_miladi_english_number(persi...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New

Other popular topics Top

johnnyicon
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 52673 488
New
jaysoifer
Is there a way to rollback a specific migration and only that one (“skipping” all the other ones)? Would mix ecto.rollback -v 200809061...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 43487 311
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New

Latest on Elixir Forum

We're in Beta

About us Mission Statement