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

Question

我正在尝试以phoenix-framework 作为后端制作一个shopify 应用程序。我一直关注this tutorial 在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

是的，这是一个记录在案的问题。 According to the spec，这在 Chrome 或 Safari 中不起作用。 你可以做以下两件事之一：

---

1。不要设置Header

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

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

---

2。使用Content-Security-Policy

第二个选项是在 CSP 标头中的 frame-ancestors 源中指定您的域以获得全面支持。您可以选择同时使用 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;")

Answer 2

我使用 NGINX 来（取消）设置这些标头。我将在此处发布解决方案，因为我花了一段时间才弄清楚这一点。发布新的应用程序版本不是一种选择。

/etc/nginx/sites-enabled/application.xyz.conf

    # I used this inside the location / { at the very END

    proxy_hide_header x-frame-options;
    proxy_set_header x-frame-options "ALLOW-FROM blabla";
    add_header x-frame-options "ALLOW-FROM blabla";

} # close location

运行 service nginx reload 以启用更改。

我知道这个答案与 shopify 无关，但它会从代理应用程序 (phoenix) 中删除标头。