时间戳

首页 > 解决方案 > 在 Phoenix 响应中设置 X-Frame-Options

elixir - 在 Phoenix 响应中设置 X-Frame-Options

问题描述

我正在尝试制作一个以作为后端的应用程序。我一直在按照本教程在 shopify 管理员中加载我的应用程序，我需要修改标题。x-frame-options

这是我的插头：

@doc false
def init(opts \\ %{}), do: Enum.into(opts, %{})

@doc false
def call(%{params: %{"shop" => shopify_domain}} = conn, _opts) do
  IO.puts("++++++++++ Plug Call ++++++++++++++")
  IO.inspect(shopify_domain)
  # %{"shopify_domain" => shopify_domain_only} = shopify_domain
  shop = ShopifyApp.find_shop_by(shopify_domain)

  allow_shop_or_halt(conn, shop)
end

def call(conn, _opts), do: conn

defp allow_shop_or_halt(conn, nil), do: Conn.halt(conn)

defp allow_shop_or_halt(conn, shop) do
  conn
  |> Conn.put_private(:shop, shop)
  |> Conn.put_resp_header("x-frame-options", "ALLOW-FROM https://#{shop.shopify_domain}/")
end

但是 Chrome 浏览器中的控制台抱怨说：

加载时遇到无效的“X-Frame-Options”标头.....：ALLOW-FROM https://skbeautysupply.myshopify.com/ '不是公认的指令。标题将被忽略。

我在这里想念什么？

标签： elixirphoenix-frameworkx-frame-options

解决方案

是的，这是一个记录在案的问题。根据规范，这在 Chrome 或 Safari 中不起作用。您可以执行以下两项操作之一：

1.不要设置Header

您可以通过不:put_secure_browser_headers首先使用插件或删除x-frame-options标题（在调用它之后）来做到这一点：

delete_resp_header(conn, "x-frame-options")

2.使用Content-Security-Policy

第二个选项是frame-ancestors在 CSP 标头的源中指定您的域以获得完全支持。您可以选择同时使用X-Frame-Options 和 Content-Security-Policy/或仅使用 CSP：

conn
|> put_resp_header("X-Frame-Options", "ALLOW-FROM https://example.com")
|> put_resp_header("Content-Security-Policy", "frame-ancestors https://example.com;")

推荐阅读