React/Phoenix - выход из HTML кратко высветит не выложенный HTML в браузере

Question

Я запускаю приложение React/Phoenix, которое использует рендеринг на стороне сервера, и обнаруживаю, что, когда я быстро обновляю приложение, я могу на долю секунды увидеть не обработанный HTML-код с сервера в браузере, прежде чем все будет правильно отображаться, Это происходит только с экранированным HTML, но я хочу использовать экранированный HTML для этого приложения, так как не хочу, чтобы браузер предполагал, что это безопасно. Это происходит в Chrome и Firefox, но не в Safari.

Приложение было создано с использованием RePh (что я настоятельно рекомендую) - https://github.com/reph-stack/reph - и соответствующий контроллер:

defmodule MyAppWeb.ReactController do
  use MyAppWeb, :controller

  def index(conn, _params) do
    initial_state = %{}
    react_stdio_args = %{
      component: Application.app_dir(:my_app, "priv/static/server/js/app.js"),
      props: %{
        "location" => conn.request_path,
        "initial_state" => initial_state
      }
    }
    {:ok, %{"html" => html}} = StdJsonIo.json_call(react_stdio_args)
    render(conn, "index.html", html: html, initial_state: initial_state)
  end
end

какие каналы данных к index.html.eex:

<div id="index"><%= @html %></div>
<script>__INITIAL_STATE__=<%= @initial_state |> Poison.encode! |> raw %></script>

В настройках по умолчанию для этого леса, @html помечен как безопасный с raw - <%= raw @html %> - но, как вы видите, я это убрал.

Так или иначе, если я обновлю окно браузера в "разумном" темпе, проблем не возникнет... но если я начну быстро обновлять, я смогу кратко увидеть неотрисованный HTML в окне браузера, что-то вроде:

<div class="AppContainer wrapper" data-reactroot="" data-reactid="1" data-react-checksum="-1859726426"><header class="site-header" data-reactid="2"> etc...

Само собой разумеется, этого не произойдет, если я уйду raw в. Я пробовал некоторые другие методы побега, такие как Phoenix.HTML.html_escape(html) в контроллере, но такая же проблема возникает.

Я полагаю, что это происходит потому, что браузеру нужна небольшая доля секунды, чтобы правильно проанализировать и визуализировать экранированный HTML, а различия в производительности браузера можно объяснить различными механизмами компоновки (возможно?)... но я не эксперт в этих вопросах, поэтому я не знаю точно. Есть ли способ заставить мое приложение ждать, пока HTML-код будет правильно отображен, прежде чем отображать его для пользователя?

Answer 1

@html Вот строка HTML. Вы не можете сделать это "безопаснее", удалив raw, Удаление raw избежит всех < а также > в строке, заставляющей браузер показывать необработанный HTML-код. Вам нужно использовать raw здесь для SSR, чтобы работать правильно. Вы можете увидеть это поведение, если попробуете следующее:

<%= raw "<strong>Raw</strong>" %>
<%= "<strong>Escaped</strong>" %>