Comment on page
Widget as a service from Bubble as an embedded iFrame
How to set up a page of your Bubble app to be displayed as an iFrame only in whitelisted domains.
Getting a Bubble app page to display as an iFrame only in whitelisted domains can be tricky because you can't directly check if the page embedding the iFrame is in the whitelist due to cross-domain policies.
Here is a way to do it. We'll need some custom code in the Bubble app and in the client page:
- 1.Make the iFrame ask the parent page about its domain.
- 2.Page answers with its domain
- 3.IFrame listens and gets the page domain
- 4.In our Bubble page, we check if the domain is whitelisted
- 5.If the domain is whitelisted, we show the iFrame content
Clients who wants to have a Widget as a service app, using a Bubble app as an embedded iFrame.
The goal of this article is to provide the step-by-step on how to set up our Bubble app and the client web page where the iFrame will be embedded, including the needed code snippets.
You can create a datatype "Allowed domains" with a field "Allowed domain" (where you'll save the client domain without the https://) as a text, and link it to a User, Company, or any other datatype that identifies your client.
1 Add a javascript_to_bubble element, name it "domain"
2 Add the following code to the Page HTML Header of the Bubble page you want to embed (your widget):
<script>
// When the iframe loads
window.onload = function() {
// Send message to parent window to get its domain
window.parent.postMessage('getDomain', '*');
}
// Function to receive messages from parent window
function receiveMessage(event) {
// Make sure that the received message is the one you are expecting
if(event.data !== 'getDomain'){
// Log parent's domain
bubble_fn_domain(event.data);
}
}
// Set up event listener to receive messages from parent window
window.addEventListener('message', receiveMessage, false);
</script>
3 When the javascrip_to_Bubble element receives the domain, check that it's whitelisted, you should do this in a backend workflow that will return yes or no. This is to ensure the check is made on the server, don't rely on variables on the page that can be hacked.
4 Set up an API Call to check the backend workflow
5 Set up the appropriate logic to show the content only if the domain is whitelisted.
You have to provide a code snippet to your Bubble app clients so they can add it to their page html to embed the widget:
<iframe src="https://www.YOURURL.com/widget" style="overflow:hidden;height:100%;width:100%" frameborder="0" id="myIframe"></iframe>
<script>
// Function to receive messages from iframe
function receiveMessage(event) {
// Make sure that the received message is the one you are expecting
if(event.data === 'getDomain') {
// Send back our domain
event.source.postMessage(document.domain, event.origin);
}
}
// Set up event listener to receive messages from iframe
window.addEventListener('message', receiveMessage, false);
</script>
Make sure to replace https://www.YOURURL.com/widget with the Bubble app widget page url. Also, you may add any parameters you may need to show specific content on your widget.
Security is crucial when working with iFrames, follow the steps above to check the domain in the backend so the check cannot be hacked.
If your widget is not showing on the client page, review that there's no other third party service blocking it. We've had some issues with client pages in the past where they used security plugins/services that didn't allow our widget to load. To bypass that the client had to whitelist our widget (Bubble app) domain in that service.
You can see the widget, backend workflow, and API Call in the following app: https://bubble.io/page?type=page&name=widget&id=helpdesk-airdev-demos&tab=tabs-1
And here you can see the widget embedded in a whitelisted domain (username/password): https://adsandbox-juan.bubbleapps.io/version-test/widget-iframe
Last modified 3mo ago