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

Question

我正在尝试使用shopify作为后端制作一个phoenix-framework应用。我一直在关注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无关，但是它会从代理应用程序（凤凰）中删除标头。