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

Question

我正在尝试制作 shopify app with phoenix-framework as the backend. I've been following this tutorial 以在 shopify 后台加载我的应用程序，我需要修改 x-frame-options header.

这是我的插件：

@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 浏览器中的控制台抱怨说：

Invalid 'X-Frame-Options' header encountered when loading .....: ALLOW-FROM https://skbeautysupply.myshopify.com/' is not a recognized directive. The header will be ignored.

我在这里错过了什么？

Answer 1

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

---

1。不要设置 Header

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

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

---

2。使用 Content-Security-Policy

第二个选项是在 CSP header 的 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 来（取消）设置这些 header。我将 post 解决方案放在这里，因为我花了一些时间才弄明白。发布新的应用程序版本不是一个选项。

/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) 中删除了 header。