Phoenix_live_view: [debug] LiveView session doesn't work with Brave browser

Created on 19 Apr 2020 · 6Comments · Source: phoenixframework/phoenix_live_view

Environment

Elixir version (elixir -v): 1.10.2
Phoenix version (mix deps): 1.5.0-rc.0
Phoenix LiveView version (mix deps): 0.12.0
NodeJS version (node -v): 13.13.0
NPM version (npm -v): 6.14.4
Operating system: Ubuntu 5.3.0-46-generic
Browsers you attempted to reproduce this bug on (the more the merrier): Brave Browser
Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: yes

Actual behavior

Start a new app with:
mix phx.new appname --live

mix phx.server

Use Brave browser and Go to:
http://localhost:4000

Get the following:

[info] Sent 200 in 113ms
[debug] LiveView session was misconfigured or the user token is outdated.

1) Ensure your session configuration in your endpoint is in a module attribute:

@session_options [
  ...
]

2) Change the plug Plug.Session to use said attribute:

plug Plug.Session, @session_options

3) Also pass the @session_options to your LiveView socket:

socket "/live", Phoenix.LiveView.Socket,
  websocket: [connect_info: [session: @session_options]]

4) Define the CSRF meta tag inside the <head> tag in your layout:

<%= csrf_meta_tag() %>

5) Pass it forward in your app.js:

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}});

[info] REFUSED CONNECTION TO Phoenix.LiveView.Socket in 256µs
Transport: :websocket
Serializer: Phoenix.Socket.V2.JSONSerializer
Parameters: %{"_csrf_token" => "JxEcKVwQcxU9VFJ0EzRAWAJUZ1sACSUyHKfO5UKsp8d2aL8j2bWosAsS", "vsn" => "2.0.0"}

Expected behavior

Should work out of the box.

Works ok using Firefox and Chrome

Brave's "Shields down" setting for 'localhost' doesn't help.

This isn't a Phoenix issue directly - but unless there's a workaround LiveView won't work for a quickly growing number of web users.

Source

sanford

👍1

All 6 comments

I also use Brave and I have never run into any issues. Maybe there is some particular setup in your Brave installation that is making it not work? To be double sure, I just created a new app and everything worked just fine here.

josevalim on 19 Apr 2020

Also be aware that "old" tabs running a previous app on localhost will attempt to reconnect and provide invalid csrftokens.

chrismccord on 21 Apr 2020

Closing this as I can’t replicate. If you have more info, please let us know!

josevalim on 21 Apr 2020

I just did a clean Ubuntu 19.10 VM install and re-installed the full phoenix stack from scratch.

I can't reproduce the issue on the new VM. Only the old one.

Humble apologies for the false alarm.

sanford on 23 Apr 2020

FWIW I just stumbled upon this problem as well and it was due to a misconfiguration in the @session_options.

In my specific case I was including secure: true and Firefox was happily accepting the connection while Chrome and Safari were rejecting the connection.

yeraydiazdiaz on 10 Jun 2020

👀2 👍1

I also came across this issue — I use Firefox for development and browsing. Absolutely no issues. Was debugging something else and decided to test on Chrome, clean version with no pre-existing cookies etc.

Like @yeraydiazdiaz I also had enabled cookie setting secure: true and Chrome only worked once I removed this.