Why are my iframes loading in development, but not in my live server? aka how to allow iframes to load from external site?

This is for an elixir phoenix application. To reproduce my code, one would simply have to do

mix phx.new hello --no-ecto

add an iframe which connects to an external website at lib/templates/page/index.html.heex

  1. and then
flyctl launch

if you run a server locally with

mix phx.server

you will find the iframe works and loads on the local server, but on the fly.io deployment it doesn’t.

I am coming from a data sci background and new to web dev, so I assume the solution is relatively simple but Im a bit lost as theres no logs or anything which I can check. I ASSUME the reason why the iframe does not load is because in the fly io deployment, there is some condition where iframes can not be loaded with content from external websites.

just wondering if anyone can point my in the correct direction of how to allow iframes from external websites to load with fly io deployments.

thank you for any and all help, and let me know if this question would better be asked somewhere else.

Do you see anything unusual on your browser devtools Network tab like it’s saying the frame was blocked?

It’s also possible something like this is happening:

1 Like

perfect, thank you this helped lead me to a solution. the devtools network tab told me it was blocked due to mixed content, and switching to https:// fixed the issue, so the problem was specifically that i was loading an http:// iframe.

thanks once again!

1 Like