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

Question

我正在尝试制作一个以phoenix-framework为后端的shopify应用程序。我一直在按照本教程在 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/ '不是可识别的指令。标头将被忽略。

我在这里缺少什么？

Answer 1

是的，这是一个有记录的问题。根据规范，这在 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;")