markupguy
Shopify Phoenix iFrame app document head stripped out
Hey Everyone,
Having a whale of a time with getting my Shopify Phoenix app’s CSS to render.
Auth is sorted and the HTML renders fine, however, the entire document head is stripped out (and therefore the CSS with it).
I’ve added Content-Security-Policy frame-ancestors to allow https://.shopify.com https://.myshopify.com.
Shout out to @ericdude4 for making the setup pretty smooth with Shopifex 
but now, the dang CSS!
Does anyone have an idea off the top of your head what could be going wrong?
Marked As Solved
markupguy
Everyone here, I just want to say @ericdude4 is an absolute legend, going way beyond what can sensibly be expected from anyone i.t.o helping a stranger.
His solution:
it turns out that new phoenix specifies the root layout in plug :put_root_layout, {MyappWeb.LayoutView, :root} which is in the :browser pipeline by default. Shopifex provides the :shopifex_browser pipeline which replicates the default :browser pipeline plus the plug(Shopifex.Plug.LoadInIframe) plug. This doesn’t include the newer :put_root_layout plug though, which is why your app wasn’t loading anything from lib/myapp_web/templates/layout/root.html.heex
(loadiniframe plug was my addition to remove x-frame-options which Eric has built in already)
Also Liked
ericdude4
Hey @markupguy! This looks really strange… I don’t think it will have anything to do with the CSP headers. Can you include a link to a git repo which reproduces the error? Maybe just whatever code you have here, with your app’s API secret key removed?
PS. Love to see Shopifex getting used! I am hoping to spend some time refactoring the library in the new year and improving the documentation.
zachallaun
Also happily using Shopifex in an internal app for our store.
I’ve been using Shopify’s Polaris library for styling along with Phoenix components. Been working out pretty well! I’ll look into how I have CSS stuff set up later.
markupguy
Thanks for the reply @zachallaun and @ericdude4 appreciate it! It really is quite strange.
But good to know this isn’t somehow expected, hah.
@ericdude4 it’s a super vanilla Phoenix app (just wanted to get it working first), with the Shopifex added bits. I’ve redone it a few times thinking I made a mistake somewhere. I can add you to the repo if you like, as it’s a private repo (doing a thing for a friend). Any and all help is welcome 
PS: Merry Christmas!
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Develop your skills with books, videos, and courses.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Develop your skills with books, videos, and courses.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"