Shopify Question posted in
The Shopify help center can be found here.

Setting X-Frame-Options in Phoenix response – Shopify

I am trying to make a app with as the backend. I’ve been following this tutorial to load my app in the shopify admin, and I need to modify x-frame-options header.

This is my plug:

@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

But the console in the Chrome browser complains that:

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

What am I missing here?

Tags:

2

Answers


  1. 0

    Yes, that’s a documented issue. According to the spec, this does not work in Chrome or Safari. You can do one of two things:

    1. Don’t set the Header

    You can do this by not using :put_secure_browser_headers plug in the first place or deleting x-frame-options header (after calling it):

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

    2. Use Content-Security-Policy

    The second option is to specify your domain in frame-ancestors sources in the CSP headers for full support. You may choose to use both X-Frame-Options and Content-Security-Policy or just CSP:

    conn
|> put_resp_header("X-Frame-Options", "ALLOW-FROM https://example.com")
|> put_resp_header("Content-Security-Policy", "frame-ancestors https://example.com;")
    Login or Signup to reply.
  2. 0

    I used NGINX to (un-)set these headers. I’ll post the solution here because it took me a while to figure this out. Releasing a new application version was not an option.

    /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

    Run service nginx reload to enable the change.

    I know this answer has nothing to do with shopify, but it removes the header from the proxy app (phoenix).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search