Cookieless Sessionless Phoenix HTML Caching

In this post, I explore creating a new cookieless pipeline for the Phoenix HTML.

I want to be able to cache HTML for Varnish or Cloudflare. Varnish (and Cloudflare) wont cache HTML (or other assets) if they have cookies. Varnish is designed to have conservative defaults, and caching cookies is VERY BAD, its a security and privacy risk, as cookies are the primary method for the authentication and personalization, think shopping cart, online.

• Elixir Forum discussion
  • Git Repo showing changes required

Version check

Install latest Phoenix on www.Ubuntu, using the Installation official docs.

I am running OK versions and don't need to upgrade.

niccolox@niccolox-xps:~/Projects/Devekko$ mix www.hex
Found existing entry: /home/niccolox/.asdf/installs/elixir/1.13.3-otp-24/.mix/archives/hex-1.0.1
Are you sure you want to replace it with "https://repo.hex.pm/installs/1.13.0/hex-1.0.1.ez"? [Yn] n
niccolox@niccolox-xps:~/Projects/Devekko$ elixir -v
Erlang/OTP 24 [erts-12.3.1] [source] [64-bit] [smp:16:16] [ds:16:16:10] [async-threads:1] [jit]

Elixir 1.13.3 (compiled with Erlang/OTP 24)
niccolox@niccolox-xps:~/Projects/Devekko$ erl -v
Erlang/OTP 24 [erts-12.3.1] [source] [64-bit] [smp:16:16] [ds:16:16:10] [async-threads:1] [jit]

Eshell V12.3.1  (abort with ^G)
1> 
BREAK: (a)bort (A)bort with dump (c)ontinue (p)roc info (i)nfo
       (l)oaded (v)ersion (k)ill (D)b-tables (d)istribution

Install Latest Phoenix Generator

niccolox@niccolox-xps:~/Projects/Devekko$ mix archive.install hex phx_new
Resolving Hex dependencies...
Dependency resolution completed:
New:
  phx_new 1.6.12
* Getting phx_new (Hex package)
All dependencies are up to date
Compiling 11 files (.ex)
Generated phx_new app
Generated archive "phx_new-1.6.12.ez" with MIX_ENV=prod
Are you sure you want to install "phx_new-1.6.12.ez"? [Yn] Y
* creating /home/niccolox/.asdf/installs/elixir/1.13.3-otp-24/.mix/archives/phx_new-1.6.12

Create Phoenix App

I am creating a Phoenix app to share on Github for peer review.

niccolox@niccolox-xps:~/Projects/Devekko$ mix archive.install hex phx_new
Resolving Hex dependencies...
Dependency resolution completed:
New:
  phx_new 1.6.12
* Getting phx_new (Hex package)
All dependencies are up to date
Compiling 11 files (.ex)
Generated phx_new app
Generated archive "phx_new-1.6.12.ez" with MIX_ENV=prod
Are you sure you want to install "phx_new-1.6.12.ez"? [Yn] Y
* creating /home/niccolox/.asdf/installs/elixir/1.13.3-otp-24/.mix/archives/phx_new-1.6.12
niccolox@niccolox-xps:~/Projects/Devekko$ mix phx.new phx_html_cookieless
* creating phx_html_cookieless/config/config.exs
* creating phx_html_cookieless/config/dev.exs
* creating phx_html_cookieless/config/prod.exs
* creating phx_html_cookieless/config/runtime.exs
* creating phx_html_cookieless/config/test.exs
* creating phx_html_cookieless/lib/phx_html_cookieless/application.ex
* creating phx_html_cookieless/lib/phx_html_cookieless.ex
* creating phx_html_cookieless/lib/phx_html_cookieless_web/views/error_helpers.ex
* creating phx_html_cookieless/lib/phx_html_cookieless_web/views/error_view.ex
* creating phx_html_cookieless/lib/phx_html_cookieless_web/endpoint.ex
* creating phx_html_cookieless/lib/phx_html_cookieless_web/router.ex
* creating phx_html_cookieless/lib/phx_html_cookieless_web/telemetry.ex
* creating phx_html_cookieless/lib/phx_html_cookieless_web.ex
* creating phx_html_cookieless/mix.exs
* creating phx_html_cookieless/README.md
* creating phx_html_cookieless/.formatter.exs
* creating phx_html_cookieless/.gitignore
* creating phx_html_cookieless/test/support/conn_case.ex
* creating phx_html_cookieless/test/test_helper.exs
* creating phx_html_cookieless/test/phx_html_cookieless_web/views/error_view_test.exs
* creating phx_html_cookieless/lib/phx_html_cookieless/repo.ex
* creating phx_html_cookieless/priv/repo/migrations/.formatter.exs
* creating phx_html_cookieless/priv/repo/seeds.exs
* creating phx_html_cookieless/test/support/data_case.ex
* creating phx_html_cookieless/lib/phx_html_cookieless_web/controllers/page_controller.ex
* creating phx_html_cookieless/lib/phx_html_cookieless_web/views/page_view.ex
* creating phx_html_cookieless/test/phx_html_cookieless_web/controllers/page_controller_test.exs
* creating phx_html_cookieless/test/phx_html_cookieless_web/views/page_view_test.exs
* creating phx_html_cookieless/assets/vendor/topbar.js
* creating phx_html_cookieless/lib/phx_html_cookieless_web/templates/layout/root.html.heex
* creating phx_html_cookieless/lib/phx_html_cookieless_web/templates/layout/app.html.heex
* creating phx_html_cookieless/lib/phx_html_cookieless_web/templates/layout/live.html.heex
* creating phx_html_cookieless/lib/phx_html_cookieless_web/views/layout_view.ex
* creating phx_html_cookieless/lib/phx_html_cookieless_web/templates/page/index.html.heex
* creating phx_html_cookieless/test/phx_html_cookieless_web/views/layout_view_test.exs
* creating phx_html_cookieless/lib/phx_html_cookieless/mailer.ex
* creating phx_html_cookieless/lib/phx_html_cookieless_web/gettext.ex
* creating phx_html_cookieless/priv/gettext/en/LC_MESSAGES/errors.po
* creating phx_html_cookieless/priv/gettext/errors.pot
* creating phx_html_cookieless/assets/css/phoenix.css
* creating phx_html_cookieless/assets/css/app.css
* creating phx_html_cookieless/assets/js/app.js
* creating phx_html_cookieless/priv/static/robots.txt
* creating phx_html_cookieless/priv/static/images/phoenix.png
* creating phx_html_cookieless/priv/static/favicon.ico

Fetch and install dependencies? [Yn] Y
* running mix deps.get
* running mix deps.compile

Create the Postgres DB

niccolox@niccolox-xps:~/Projects/Devekko$ cd phx_html_cookieless
niccolox@niccolox-xps:~/Projects/Devekko/phx_html_cookieless$ mix ecto.create
warning: the :gettext compiler is no longer required in your mix.exs.

Please find the following line in your mix.exs and remove the :gettext entry:

    compilers: [..., :gettext, ...] ++ Mix.compilers(),

  (gettext 0.20.0) lib/mix/tasks/compile.gettext.ex:5: Mix.Tasks.Compile.Gettext.run/1
  (mix 1.13.3) lib/mix/task.ex:397: anonymous fn/3 in Mix.Task.run_task/3
  (mix 1.13.3) lib/mix/tasks/compile.all.ex:92: Mix.Tasks.Compile.All.run_compiler/2
  (mix 1.13.3) lib/mix/tasks/compile.all.ex:72: Mix.Tasks.Compile.All.compile/4
  (mix 1.13.3) lib/mix/tasks/compile.all.ex:59: Mix.Tasks.Compile.All.with_logger_app/2
  (mix 1.13.3) lib/mix/tasks/compile.all.ex:36: Mix.Tasks.Compile.All.run/1

Compiling 14 files (.ex)
Generated phx_html_cookieless app
The database for PhxHtmlCookieless.Repo has been created

We get the app up and running

MIX_ENV=dev iex -S mix phx.server

Curl the app and see the cookie

niccolox@niccolox-xps:~/Projects/Devekko/phx_html_cookieless$ curl -I http://www.ost:4000
HTTP/1.1 200 OK
cache-control: max-age=0, private, must-revalidate
content-length: 2358
content-type: text/html; charset=utf-8
cross-origin-window-policy: deny
date: Sat, 10 Sep 2022 19:44:50 GMT
server: Cowboy
x-content-type-options: nosniff
x-download-options: noopen
x-frame-options: SAMEORIGIN
x-permitted-cross-domain-policies: none
x-request-id: FxOXV76Mi34Gm5UAAADC
x-xss-protection: 1; mode=block
set-cookie: _phx_html_cookieless_key=SFMyNTY.g3QAAAABbQAAAAtfY3NyZl90b2tlbm0AAAAYaDZsZk9MZm14ejJ1bDBfWlphQmxXOTdr.FkqSdNU9VpLGE2LBl4_ElaXvrA_8TX0UEcC3KhN4zu4; path=/; HttpOnly

Initiate the Git repo on Github

niccolox@niccolox-xps:~/Projects/Devekko/phx_html_cookieless$ git status
fatal: not a git repository (or any of the parent directories): .git
niccolox@niccolox-xps:~/Projects/Devekko/phx_html_cookieless$ git init
Initialized empty Git repository in /home/niccolox/Projects/Devekko/phx_html_cookieless/.git/
niccolox@niccolox-xps:~/Projects/Devekko/phx_html_cookieless$ git add .
niccolox@niccolox-xps:~/Projects/Devekko/phx_html_cookieless$ git commit -am "How to generate Sessionless, Cookie-Free Cacheable HTML"
[master (root-commit) 9b94e77] How to generate Sessionless, Cookie-Free Cacheable HTML
 46 files changed, 1764 insertions(+)
 create mode 100644 .formatter.exs
 create mode 100644 .gitignore
 create mode 100644 README.md
 create mode 100644 assets/css/app.css
 create mode 100644 assets/css/phoenix.css
 create mode 100644 assets/js/app.js
 create mode 100644 assets/vendor/topbar.js
 create mode 100644 config/config.exs
 create mode 100644 config/dev.exs
 create mode 100644 config/prod.exs
 create mode 100644 config/runtime.exs
 create mode 100644 config/test.exs
 create mode 100644 lib/phx_html_cookieless.ex
 create mode 100644 lib/phx_html_cookieless/application.ex
 create mode 100644 lib/phx_html_cookieless/mailer.ex
 create mode 100644 lib/phx_html_cookieless/repo.ex
 create mode 100644 lib/phx_html_cookieless_web.ex
 create mode 100644 lib/phx_html_cookieless_web/controllers/page_controller.ex
 create mode 100644 lib/phx_html_cookieless_web/endpoint.ex
 create mode 100644 lib/phx_html_cookieless_web/gettext.ex
 create mode 100644 lib/phx_html_cookieless_web/router.ex
 create mode 100644 lib/phx_html_cookieless_web/telemetry.ex
 create mode 100644 lib/phx_html_cookieless_web/templates/layout/app.html.heex
 create mode 100644 lib/phx_html_cookieless_web/templates/layout/live.html.heex
 create mode 100644 lib/phx_html_cookieless_web/templates/layout/root.html.heex
 create mode 100644 lib/phx_html_cookieless_web/templates/page/index.html.heex
 create mode 100644 lib/phx_html_cookieless_web/views/error_helpers.ex
 create mode 100644 lib/phx_html_cookieless_web/views/error_view.ex
 create mode 100644 lib/phx_html_cookieless_web/views/layout_view.ex
 create mode 100644 lib/phx_html_cookieless_web/views/page_view.ex
 create mode 100644 mix.exs
 create mode 100644 mix.lock
 create mode 100644 priv/gettext/en/LC_MESSAGES/errors.po
 create mode 100644 priv/gettext/errors.pot
 create mode 100644 priv/repo/migrations/.formatter.exs
 create mode 100644 priv/repo/seeds.exs
 create mode 100644 priv/static/favicon.ico
 create mode 100644 priv/static/images/phoenix.png
 create mode 100644 priv/static/robots.txt
 create mode 100644 test/phx_html_cookieless_web/controllers/page_controller_test.exs
 create mode 100644 test/phx_html_cookieless_web/views/error_view_test.exs
 create mode 100644 test/phx_html_cookieless_web/views/layout_view_test.exs
 create mode 100644 test/phx_html_cookieless_web/views/page_view_test.exs
 create mode 100644 test/support/conn_case.ex
 create mode 100644 test/support/data_case.ex
 create mode 100644 test/test_helper.exs
niccolox@niccolox-xps:~/Projects/Devekko/phx_html_cookieless$ git branch -M main
niccolox@niccolox-xps:~/Projects/Devekko/phx_html_cookieless$ git remote add origin [email protected]:niccolox/phx_html_cookieless.git
niccolox@niccolox-xps:~/Projects/Devekko/phx_html_cookieless$ git push -u origin main
Enumerating objects: 74, done.
Counting objects: 100% (74/74), done.
Delta compression using up to 16 threads
Compressing objects: 100% (66/66), done.
Writing objects: 100% (74/74), 44.02 KiB | 8.80 MiB/s, done.
Total 74 (delta 0), reused 0 (delta 0)
To github.com:niccolox/phx_html_cookieless.git
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'

Add new Cookieless endpoint to application

defmodule PhxHtmlCookieless.Application do
  # See https://hexdocs.pm/elixir/Application.html
  # for more information on OTP Applications
  @moduledoc false

  use Application

  @impl true
  def start(_type, _args) do
    children = [
      # Start the Ecto repository
      PhxHtmlCookieless.Repo,
      # Start the Telemetry supervisor
      PhxHtmlCookielessWeb.Telemetry,
      # Start the PubSub system
      {Phoenix.PubSub, name: PhxHtmlCookieless.PubSub},
      # Start the Endpoint (http/https)
      PhxHtmlCookielessWeb.Endpoint,
      PhxHtmlCookielessWeb.CookielessEndpoint
      # Start a worker by calling: PhxHtmlCookieless.Worker.start_link(arg)
      # {PhxHtmlCookieless.Worker, arg}
    ]

    # See https://hexdocs.pm/elixir/Supervisor.html
    # for other strategies and supported options
    opts = [strategy: :one_for_one, name: PhxHtmlCookieless.Supervisor]
    Supervisor.start_link(children, opts)
  end

  # Tell Phoenix to update the endpoint configuration
  # whenever the application is updated.
  @impl true
  def config_change(changed, _new, removed) do
    PhxHtmlCookielessWeb.Endpoint.config_change(changed, removed)
    :ok
  end
end

Add a Cookieless view to definition file

  def cookielessview do
    quote do
      use Phoenix.View,
        root: "lib/phx_html_cookieless_web/templates",
        namespace: PhxHtmlCookielessWeb

      # Import convenience functions from controllers
      import Phoenix.Controller,
        only: [view_module: 1, view_template: 1]

      # Include shared imports and aliases for views
      unquote(view_helpers())
    end
  end

Add a Cookieless Page controller

defmodule PhxHtmlCookielessWeb.CookielessPageController do
  use PhxHtmlCookielessWeb, :controller
  plug :put_layout, "cookielessapp.html"

  def index(conn, _params) do
    render(conn, "index.html")
  end
end

Add a Cookieless endpoint with no session or flash

defmodule PhxHtmlCookielessWeb.CookielessEndpoint do
  use Phoenix.Endpoint, otp_app: :phx_html_cookieless

  # Code reloading can be explicitly enabled under the
  # :code_reloader configuration of your endpoint.
  if code_reloading? do
    socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket
    plug Phoenix.LiveReloader
    plug Phoenix.CodeReloader
    plug Phoenix.Ecto.CheckRepoStatus, otp_app: :phx_html_cookieless
  end

  plug Plug.RequestId
  plug Plug.Telemetry, event_prefix: [:phoenix, :endpoint]

  plug Plug.MethodOverride
  plug Plug.Head
  plug PhxHtmlCookielessWeb.Router
end

Add a Cache Control Plug to add caching and cache if stale cache control for cookieless routes

defmodule PhxHtmlCookielessWeb.Plug.CacheControl do
  @moduledoc """
  Manages the adding of cache-control headers to public requests so CDN
  can do some caching
  """
  import Plug.Conn

  def init(opts), do: opts

  def call(conn = %{assigns: %{current_user: user}}, _opts) when not is_nil(user), do: conn

  # https://developers.cloudflare.com/cache/about/cache-control/
  # Cache assets with revalidation, but allow stale responses if origin server is unreachable
  # https://developer.fastly.com/learning/concepts/cache-freshness/#surrogate-control
  def call(conn, _opts) do
    conn
    |> put_resp_header("cache-control", "max-age=3600, stale-while-revalidate=60, stale-if-error=604800")
    |> put_resp_header(
         "surrogate-control",
         "max-age=3600, stale-while-revalidate=60, stale-if-error=604800"
       )
  end
end

Adjust the router with a Cookieless sessionless pipeline and scope for the static, cookieless pathes

defmodule PhxHtmlCookielessWeb.Router do
  use PhxHtmlCookielessWeb, :router

  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_live_flash
    plug :put_root_layout, {PhxHtmlCookielessWeb.LayoutView, :root}
    plug :protect_from_forgery
    plug :put_secure_browser_headers
  end


  pipeline :browserstatic do
    plug :accepts, ["html"]
    plug :put_root_layout, {PhxHtmlCookielessWeb.LayoutView, :rootcookieless}
    plug PhxHtmlCookielessWeb.Plug.CacheControl
  end

  pipeline :api do
    plug :accepts, ["json"]
  end

  scope "/", PhxHtmlCookielessWeb do
    pipe_through :browser

    get "/", PageController, :index
  end

  scope "/cookieless", PhxHtmlCookielessWeb do
    pipe_through :browserstatic

    get "/", CookielessPageController, :index
  end

  # Other scopes may use custom stacks.
  # scope "/api", PhxHtmlCookielessWeb do
  #   pipe_through :api
  # end

  # Enables LiveDashboard only for development
  #
  # If you want to use the LiveDashboard in production, you should put
  # it behind authentication and allow only admins to access it.
  # If your application does not have an admins-only section yet,
  # you can use Plug.BasicAuth to set up some basic authentication
  # as long as you are also using SSL (which you should anyway).
  if Mix.env() in [:dev, :test] do
    import Phoenix.LiveDashboard.Router

    scope "/" do
      pipe_through :browser

      live_dashboard "/dashboard", metrics: PhxHtmlCookielessWeb.Telemetry
    end
  end

  # Enables the Swoosh mailbox preview in development.
  #
  # Note that preview only shows emails that were sent by the same
  # node running the Phoenix server.
  if Mix.env() == :dev do
    scope "/dev" do
      pipe_through :browser

      forward "/mailbox", Plug.Swoosh.MailboxPreview
    end
  end
end

Add a cookieless_page template folder and index file

<section class="phx-hero">
  <h1><%= gettext "Welcome to %{name}!", name: "Cookieless Phoenix HTML" %></h1>
  <p>Peace of mind from prototype to production</p>
</section>

Add a cookieless app root layout for the cookieless page controller

<main class="container">
  <%= @inner_content %>
</main>

Add a layout for cookieless which has no CSRF, no sessions, no JS.

Obviously this is crude and not realistic for production, we probably need a second JS file with no CSRF.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <%= live_title_tag assigns[:page_title] || "PhxHtmlCookieless", suffix: " · Phoenix Framework" %>
    <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>

  </head>
  <body>
    <header>
      <section class="container">
        <nav>
        </nav>
        <a href="https://phoenixframework.org/" class="phx-logo">
          <img src={Routes.static_path(@conn, "/images/phoenix.png")} alt="Phoenix Framework Logo"/>
        </a>
      </section>
    </header>
    <%= @inner_content %>
  </body>
</html>

We create a cookieless page view which references our cookieless view definition, giving us no flash or session: view

defmodule PhxHtmlCookielessWeb.CookielessPageView do
  use PhxHtmlCookielessWeb, :cookielessview
end

You can see all these commits on Github

Validate in cURL

Cookieless scope

Now, In curl we can see the cookieless cacheable /cookieless scope

curl -I http://www.ost:4000/cookieless
HTTP/1.1 200 OK
cache-control: max-age=3600, stale-while-revalidate=60, stale-if-error=604800
content-length: 905
content-type: text/html; charset=utf-8
date: Sat, 10 Sep 2022 21:13:40 GMT
server: Cowboy
surrogate-control: max-age=3600, stale-while-revalidate=60, stale-if-error=604800
x-request-id: FxOcMLOpAdCZttoAAAAK

Cookie scope

Vs the default homepage, which is not cacheable and has cookies and sessions.

 curl -I http://www.ost:4000
HTTP/1.1 200 OK
cache-control: max-age=0, private, must-revalidate
content-length: 2358
content-type: text/html; charset=utf-8
cross-origin-window-policy: deny
date: Sat, 10 Sep 2022 21:14:35 GMT
server: Cowboy
x-content-type-options: nosniff
x-download-options: noopen
x-frame-options: SAMEORIGIN
x-permitted-cross-domain-policies: none
x-request-id: FxOcPakeOME1JvIAAABK
x-xss-protection: 1; mode=block
set-cookie: _phx_html_cookieless_key=SFMyNTY.g3QAAAABbQAAAAtfY3NyZl90b2tlbm0AAAAYdGJSeE8zX1pDNktYejZDYWwyN2Z6YTVn.TrZZ8ympcUrnhHPyzCSzeDA1flhRUmr0Gqn9prYWKz0; path=/; HttpOnly

Conclusion

IF you are hosting a website with MANY pages, you want to be able to cache HTML in Varnish or Cloudflare or Fastly. You don't need authentication on landing pages.

More advanced techniques would be to route in the Phoenix app by Cookies. Say if, a user visited the cookieless page with a backend, authenticated user cookie, either the Phoenix default or a cookie from a cart, then the router switches the scope to or controller and personalizes the page.

These kinds of caching issues can save money, speed up the site and generally improve the UX.