Allow embedding from one URL to a website that doesn't support cross origin

November 6, 2023

If you want to allow website embeding only for specific path, here’s what you need to do:

  • Update <Location> directive on your website’s server’s config (in our case apache2)
  • apache2 config is located in /etc/apache2/sites-available which has a symlink to /etc/apache2/sites-enabled

Example of <Location> directive:

<Location "/path">
	Header always set Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval' app.website.net; frame-ancestors 'self' http://localhost:8080; navigate-to 'self' app.website.net;"
</Location>

Key directive here allowing us to allow framing is frame-ancestors.

  • this directive is not supported in the <meta> element, so it needs to be set on the webserver

This will not work:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' app.website.net; frame-ancestors 'self' http://localhost:8080; navigate-to 'self' app.website.net;">
  • <host-source> parameter in the example above is 'self' http://localhost:8080

WARNING: If no URL scheme is specified for a host-source and the iframe is loaded from an https URL, the URL for the page loading the iframe must also be https.

So if we would just put localhost:8080 as <host-source> parameter, it would only work if the iframe would also be loaded from http://.

  • Reload/restart webserver to use the new config and you’re good to go!