How can i iframe a mesop app in a https site

[JohnHardline]

Since Mesop runs a http server - i can not iframe a mesop app into a https site ....

What is the solution to this problem ?

[richard-to]

In Mesop you need to explicitly allow a website to iframe a mesop app. This is described here: https://google.github.io/mesop/guides/web_security/#iframe-security

Quick example copied from that page:

@me.page(
  path="/allows_iframed",
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.com"],
  ),
)
def app():
  me.text("Test CSP")

[JohnHardline]

Well this is no solution because we have mixed content - i already tried it with the proposed method - but this only prevents clickjacking

IT does not work on a https website!

So this is the output of the browser console
Blocked loading mixed active content “http://[2a02:8071:3e85:b340:1f37:3469:4927:cd16]:32123/allows_iframed” ki-interior-design-app

Despite - even when this should work - its a seo disaster since mixed content will be downranked...

So how can mesop run in a https session ?

[richard-to]

I see. I overlooked that you're running Mesop on an HTTP server. Yes, that's not allowed for good reason. As you said, it's not safe to host mixed content like that.

So I guess this depends on how you're hosting the Mesop application. There are many options you could consider. It's hard to give a concrete suggestion without some idea of your architecture.

You can see our Deployment Guide here examples of how to deploy Mesop: https://google.github.io/mesop/guides/deployment/.

[JohnHardline]

Well your answers implies that i can determine the server for mesop - so how can i do this - i want to host mesop by myself on my own server infrastructure!

[richard-to]

Yes. I think this depends on your server architecture.

Here's a high level example of what you'd need:

• Domain/Subdomain - I'm assuming you already have a domain, so you can set up a sub domain in your domain registrar's UI
• SSL Certificate - Can use LetsEncrypt or whatever you prefer
• Nginx as a reverse proxy to Mesop run, also configure your SSL certificate on Nginx
• As in the examples we use Gunicorn as WSGI server to serve the Mesop app. Mesop uses Flask under the hood which comes a with a dev server, but it's not something you'd use with production, which is why we use Gunicorn.

That's the high level example of how you'd run Mesop on a custom server architecture. You can replace Nginx / Gunicorn with whatever you're familiar with.

Basically the set up should be similar to serving a Flask App. For more details you can look up tutorials on serving Flask Apps.