Frappe WebForm Embedding

What is Frappe WebForm Embedding?

Any WebForm created in Frappe Framework can be used outside the Frappe Environment by using using simple IFRAME in html as shown below:

<html>
    <iframe src="https://your-frappe-app.com/your-webform" width="100%" height="500"></iframe>
</html>


Issue with Frappe WebForm Embedding?

Due to security reason, Frappe Cloud does not allows other origin to access the frappe webform, this gives and error on the client side console with message

Refused to display 'https://your-domain.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.


Solution to Frappe WebForm Embedding!

We can resolve this issue with adding an extended headers in response to every request that frappe receives.

  1. Create a Python file in your Custom App add the domain you want to whitelist and allow Frappe WebForm embedding.

# import frappe & response
import frappe
from frappe import response

# use the response imported from frappe.response
def after_request(response):
    # add new header key in response as "Content-Security-Policy" 
    # and value for the key as "frame-ancestors" along with your domain url, you need to whitelist
    response.headers.extend({"Content-Security-Policy": "frame-ancestors https://your.domaain.com/"})


  1. Edit the hooks.py file in your Custom App and add after_request as shown below:

    after_request=["path.of.the.python.code.where.origin.path.is.added"]

The above code snippet will check each request coming to your Frappe Application and will allow whitelisted domain to access the WebForm.


Written by

Rajat Tripathi, Tech Lead

Linkedin

    last updated 4 months ago