Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[debug] LiveView session was misconfigured for Google Chrome with AdGuard AdBlocker extension installed #1296

Closed
goofansu opened this issue Dec 31, 2020 · 2 comments
Closed

[debug] LiveView session was misconfigured for Google Chrome with AdGuard AdBlocker extension installed #1296

goofansu opened this issue Dec 31, 2020 · 2 comments

Comments

@goofansu
Copy link

I found the problem is caused by the extension: AdGuard AdBlocker.

Environment

  • Elixir version (elixir -v): 1.11.2
  • Phoenix version (mix deps): 1.5.7
  • Phoenix LiveView version (mix deps): 0.15.1
  • NodeJS version (node -v): 14.2.0
  • NPM version (npm -v): 6.14.7
  • Operating system: macOS 10.15.7
  • Browsers you attempted to reproduce this bug on (the more the merrier): Google Chrome Version 87.0.4280.88 (Official Build) (x86_64)
  • Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

Actual behavior

I created an example app here: https://github.com/goofansu/play

FYI, the app is created by following steps:

mix phx.new play --live
mix ecto.create
# add phx_gen_auth into mix.exs
mix deps.get
mix compile
mix phx.gen.auth Accounts User users
mix ecto.migrate

Steps to reproduce the problem:

  1. Install AdGuard AdBlocker from Chrome Web Store
  2. Open AdGuard AdBlocker option and enable "Filters -> Annoyances -> AdGuard Annoyances filter" like following:
    adguard option
  3. Start server with mix phx.server
  4. Visit http://localhost:4000 and register a user (You can see the "Register" link in the header as it has been added by phx_gen_auth), you will be auto logged in
  5. Click "Log out" link in the header and you can see message like [debug] LiveView session was misconfigured... in the console as following
[info] POST /users/log_out
[debug] Processing with PlayWeb.UserSessionController.delete/2
  Parameters: %{"_csrf_token" => "LDF6dgFfLzkFMzgoYAtOF18HIUY7Mn4FZdJDXiluUFAP-q8thowuMJ96", "_method" => "delete"}
  Pipelines: [:browser]
[debug] QUERY OK source="users_tokens" db=0.5ms idle=1083.9ms
SELECT u1."id", u1."email", u1."hashed_password", u1."confirmed_at", u1."inserted_at", u1."updated_at" FROM "users_tokens" AS u0 INNER JOIN "users" AS u1 ON u1."id" = u0."user_id" WHERE ((u0."token" = $1) AND (u0."context" = $2)) AND (u0."inserted_at" > $3::timestamp + (-60::decimal::numeric * interval '1 day')) [<<241, 26, 49, 228, 154, 155, 136, 99, 93, 41, 35, 169, 250, 211, 66, 149, 246, 98, 169, 229, 22, 156, 180, 100, 95, 39, 232, 142, 31, 6, 181, 85>>, "session", ~U[2020-12-31 09:36:26.233904Z]]
[debug] QUERY OK source="users_tokens" db=1.0ms queue=1.0ms idle=1079.1ms
DELETE FROM "users_tokens" AS u0 WHERE ((u0."token" = $1) AND (u0."context" = $2)) [<<241, 26, 49, 228, 154, 155, 136, 99, 93, 41, 35, 169, 250, 211, 66, 149, 246, 98, 169, 229, 22, 156, 180, 100, 95, 39, 232, 142, 31, 6, 181, 85>>, "session"]
[info] Sent 302 in 5ms
[info] CONNECTED TO Phoenix.LiveView.Socket in 115µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "LDF6dgFfLzkFMzgoYAtOF18HIUY7Mn4FZdJDXiluUFAP-q8thowuMJ96", "_mounts" => "0", "_track_static" => %{"0" => "http://localhost:4000/css/app.css", "1" => "http://localhost:4000/js/app.js"}, "vsn" => "2.0.0"}
[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] GET /
[debug] Processing with Phoenix.LiveView.Plug.index/2
  Parameters: %{}
  Pipelines: [:browser]
[info] Sent 200 in 3ms
[info] CONNECTED TO Phoenix.LiveView.Socket in 53µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "QzJ3U1hqG293YQFAF2IJYgNGKX18NTU1qQ150RZB3TYsA2c7f1d89Rel", "_mounts" => "0", "_track_static" => %{"0" => "http://localhost:4000/css/app.css", "1" => "http://localhost:4000/js/app.js"}, "vsn" => "2.0.0"}

Expected behavior

I don't know whether this is a bug as the "Log out" works and the search in "PageLive" also works without problem.
@goofansu goofansu changed the title [debug] LiveView session was misconfigured for Google Chrome [debug] LiveView session was misconfigured for Google Chrome with AdGuard AdBlocker extension installed Dec 31, 2020
@josevalim
Copy link
Member

@goofansu just to be clear: if you disable adguard, the issue doesn't happen at all?

In any case, because a logout just happened, this log message may be OK due to the reason in the error message: "the user token is outdated".

Whenever this happens, LiveView will refresh the page so you get an updated token. So because you see a GET request at the end with a CONNECTED message, then it means everything recovered just fine. 👍

@goofansu
Copy link
Author

goofansu commented Dec 31, 2020 •
edited
Loading

@josevalim The issue won’t happen if the setting in step 2 is disabled. No need to disable the extension.

Whenever this happens, LiveView will refresh the page so you get an updated token.

So LiveView can self-recovered, that’s cool. Feel free to close the issue if it’s not a problem. Many thanks. 💗

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@josevalim @chrismccord @goofansu