Overview
You have created an iframe in your app to embed a third-party website or portal, but you are receiving an error message like, This page will not open in an iframe
or This page is blocked due to insecure content
and will not open. Alternatively, your app opens the default browser instead of an iframe with the error message, This site cannot be displayed in embed iframe inside the app.
Solution
Errors while embedding iframes are usually due to the following reasons:
- Sites that have insecure connections can be blocked from being displayed in an iframe by the browser. Browsers like Chrome, Safari, Firefox, and others choose how to block these pages, and they even do it differently depending on the platform. (i.e. Safari on your laptop can act differently to Safari on your iPhone.)
- Websites can prevent being placed in an iframe using the X-Frame-Options HTTP Header or other detectable means. Websites such as Google.com, Facebook.com, Amazon.com, and others are blocked from being displayed in an iframe. It is possible to check whether a website is not allowing the iframe by using a website such as Free Iframe Checker. Enter the URL and run the checker. Here is a sample of the blocking output from Amazon.com:
- Frame killer scripts: This is another way websites can prevent being displayed in an iframe. Using the frame killer checker on the same website as above, paste the URL and run the checker. If you see the website displayed in the box on their site, you should be ok. If it does not display, they are using alternative means to block the iframe.
- (Applicable to PWA) Our Progressive Web App product is a fully secure web app that is hosted over an SSL secure connection. Sites that have insecure connections can be blocked from being iframed by the browser. Browsers like Chrome, Safari, Firefox, and others choose how to block these pages, and they even do it differently depending on the platform.
This issue is out of BiznessApps Support scope, since it's strictly about the third-party site configuration, and you have to contact them to get the IFrame restriction removed. More specifically, you will need to contact the administrator of the webserver hosting the page you want to embed and have them disable the security constraints not allowing you to use that page.
As a workaround, you can also check the "Open in new browser window" option, if the feature you are working in has it, which will open the web page on the user's device native browser (if that doesn't break your app's policies).
Note: If you do wish to check if your problem is related to iframe restriction you can use the tinywebgallery site to check their site for iframes. For more information about security restrictions, you can have a look at this iframe link.
Testing
If the third-party site configuration has been changed to allow embedding in an iframe, you will not be getting an error anymore, and you will be able to browse the site inside your app without any problem.
Comments
0 comments
Please sign in to leave a comment.