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.

sreyansjain

sreyansjain

Thank you so much for the detailed response.
I am sorry I used so much of your time for this.

I get what you explain. Thank you so much.

Where Next?

Popular in Questions Top

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
LegitStack
I’m hoping you guys can give me some general advice and perhaps code examples if you’re feeling up to it. I’m very interested in Elixir,...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
New
fireproofsocks
I’m working on defining a simple Ecto schema for a table (in PostGres), but I don’t see where I can define a column as NOT NULL. Conside...
New
myronmarston
The Elixir Typespec docs show the following syntax for keyword lists in typespecs: # ... | [key: type] # keyword lis...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
sabri
Can someone explain the settings of pool_size of Ecto in config file? and what is the recommend size? Thanks
New
Codball
Mix format works fine if run from the cmd. I’ve followed this to facilitate the implementation into VSC which involves downloading an ext...
New

Other popular topics Top

chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 30048 115
New
dotdotdotPaul
Okay, I'm having a heck of a time trying to figure out how to best handle the validation of belongs_to associations in Ecto. I'm sure I'...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
malloryerik
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
273 38985 115
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
Nvim
Elixir appears to be a superior language to Python. I don’t see any advantage of Python over Elixir. Are there any?
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New

We're in Beta

About us Mission Statement