Embedding a form is a really cool way to access a form or another piece of content from another website.

One of our plugins allows you to embed a Formidable Form on another website.

It's good because the site embedding the form can be a pure static HTML site and the form hosted on another site.

Nowadays the browsers require additional information to be sent from the source server in order to allow any content to be shown at all. This is of course done for security reasons. The developers have to explicitly define what's allowed.

The code below is part of the plugin. Because those so called headers allow embedding the plugin only sends those when necessary.

// CSP only works in modern browsers Chrome 25+, Firefox 23+, Safari 7+
$output_CSP = "Content-Security-Policy:".
			 "connect-src 'self' *;". // XMLHttpRequest (AJAX request), WebSocket or EventSource.
			 "default-src 'self' *;". // Default policy for loading html elements
			 "frame-ancestors 'self' *;". // allow parent framing - this one blocks click jacking and ui redress
			 "frame-src 'self' *;". // vaid sources for frames
			  // https://stackoverflow.com/questions/45366744/refused-to-load-the-font-datafont-woff-it-violates-the-following-content
			 "font-src 'self' data: *;" .
			 "media-src 'self' *;". // vaid sources for media (audio and video html tags src)
			 "object-src 'self' *; ". // valid object embed and applet tags src
			 //"report-uri https://example.com/violationReportForCSP.php;". //A URL that will get raw json data in post that lets you know what was violated and blocked
			 "script-src 'self' 'unsafe-inline' *;". // allows js from self, jquery and google analytics.  Inline allows inline js
			 "style-src 'self' 'unsafe-inline' *;";// allows css from self and inline allows inline css
//Sends the Header in the HTTP response to instruct the Browser how it should handle content and what is whitelisted
//Its up to the browser to follow the policy which each browser has varying support
header($output_CSP, true);
header('Access-Control-Allow-Origin: *', true); // allow ajax from any host
header("X-Frame-Options: allow-from '*'", true);

Useful links on how to allow embedding of a form

https://stackoverflow.com/questions/27358966/how-to-set-x-frame-options-on-iframe
https://stackoverflow.com/questions/7564832/how-to-bypass-access-control-allow-origin
https://gist.github.com/phpdave/24d879514e7411047267

Referral Note: When you purchase through a referral link (if any) on this page, we may earn a commission.
If you're feeling thankful, you can buy me a coffee or a beer