Phoenix Liveview - Websocket connect_info 阻止 iframe 内容答案

【问题标题】：Phoenix Liveview - Websocket connect_info blocking iframe contentPhoenix Liveview - Websocket connect_info 阻止 iframe 内容
【发布时间】：2020-12-20 20:26:17
【问题描述】：

我实际上正在开发一个 phoenix 应用程序，我需要在一些嵌入 iframe 的网站中进行渲染，我完成了逻辑编码，但我发现它只适用于 Firefox，当在 Chome 或 Opera 上使用它时，它以无限循环充电结束，尝试渲染内容，抛出以下警告：

我试图通过像这样的额外选项来允许这样做，但没有成功。

  @session_options [
    store: :cookie,
    key: "_analytics_key",
    signing_salt: "BM3P8GYS",
    extra: "SameSite=None;",
  ]

然后我发现在 Endpoint 的最后一个版本中，它有一个名为 same_site 的 cookie 的特定选项，所以我尝试了这样，但得到了相同的结果：

  @session_options [
    store: :cookie,
    key: "_analytics_key",
    signing_salt: "BM3P8GYS",
    same_site: "None",
    #extra: "SameSite=None;",
    secure: true
  ]

每次渲染失败时，我都会在控制台上看到以下日志：

似乎一切正常，但我发现从端点上的 websocket 中删除 connect_info 自动解决了问题，就像这样：

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

但这会影响诸如监护人之类的事情，我猜还有一些安全问题，所以我一直在寻找一种方法来仅在尝试在 iframe 上呈现页面时删除它，我正在考虑使用插件来做到这一点，但我不知道这对于这个特定部分是否可行，也许有人知道我可以在这里做些什么来完成我想要的事情？提前致谢！

【问题讨论】：

您是否还定义了会话插件？ plug Plug.Session
是的，先生，我实际上尝试使用自定义插头，但它对我没有帮助，因为 livesocket 创建直接在端点上，我无法访问它上的 conn。解决我的问题的唯一方法是为 iframe 请求使用第二个端点，但我不知道这是否可以在生产环境中配置

标签： elixir phoenix-live-view

【解决方案1】：

嵌入到另一个页面/站点时，您需要配置 csp 标头。像它一样离开 connect_info 是默认的。

defmodule UtasksWeb.Plugs.Csp do
  import Plug.Conn
  import Phoenix.Controller

  def init(opts), do: opts

  def call(conn, _opts) do
    put_resp_header conn, "content-security-policy", csp(conn)
  end

  defp csp(conn) do
    "default-src 'self' *.googleapis.com *.gstatic.com; \
    connect-src 'self' #{ws_url conn} #{ws_url conn, "wss"}; \
    script-src 'self' 'unsafe-inline' 'unsafe-eval' https://statics.teams.cdn.office.net; \
    style-src 'self' 'unsafe-inline' 'unsafe-eval' *.googleapis.com *.gstatic.com; \
    frame-ancestors teams.microsoft.com *.teams.microsoft.com *.skype.com"
  end

  defp ws_url(conn, protocol \\ "ws") do
    endpoint = Phoenix.Controller.endpoint_module(conn)
    %{endpoint.struct_url | scheme: protocol} |> URI.to_string()
  end
end

【讨论】：