Troubleshooting Embedded Web Content
By Oliver Steinmeier-Oracle on Mar 05, 2014
Mashups are a popular way to leverage information from various sources in one application, and the Fusion Applications customization tools Page Composer and Applications Composer (CRM/Sales Cloud only) give you the ability to just that: you can embed web content into tabs or regions. This article explains some of the problems you may face.
Let's first quickly summarize the various options to embed content:
Page Composer is available in all applications families. You can add new web content regions and entirely new tabs to dashboards:
In the property sheet specify the URL. You can use expression language to construct a dynamic URL.
If you need more space than a region offers, you can also add an entire new tab and fill it with web content:
Here's a video demo from our YouTube channel that shows this in functionality in more detail.
Application Composer is a Sales Cloud/CRM-specific tool to extend standard objects and create new ones. You can add new web-content-based subtabs to workareas, both for classic Desktop UI and for the new simplified UI.
Here are the basic steps. First add a new subtab to the workarea:
Choose the type Web Content:
Then use Expression Builder to construct the URL. In this example I am just hardcoding this blog's URL, but with Groovy you can get very creative.
If you then look at the work area that you customized, you should see the new tab:
Our YouTube channel has a brief video that shows you the steps in action.
How Does It Work?
How does embedding of other web content work technically? Fusion Applications uses iFrames to include other sites' content. Here's an example of the HTML for a web content region created with Page Composer:
What looks pretty straightforward in these screenshots and Youtube videos unfortunately doesn't always work if you pick the "wrong" URL to embed. There are two main problems that you might run into:
1. The region or tab is blank due to a technique often referred to as framebusting.
2. The browser gives you a security warning (it's a bit hard to see, so you might think it's case #1)
Let's look at these in more detail.
Blank iFrames are typically the result of "framebusting". For a variety of reasons primarily related to security, not all sites and applications are willing to let themselves be embedded in iFrames. Web developers have developed framebusting techniques, and browser vendors nowadays honor X-Frame-Options HTTP header tags. In fact, Fusion Applications themselves employ framebusting to prevent clickjacking of its pages. You can find the X-Frame-Options header tag via popular tools like Chrome's Developer Tools or Firebug:
The SAMEORIGIN value instructs browsers to only show the page in an iFrame if the surrounding page is from the same site.
If you own and control the site you want to embed, you may be able to turn off these countermeasures, but if it's an internet site such as LinkedIn or Google, you will likely not have any options. In that case, instead of embedding the page directly via iFrames, consider adding a link or button to your Fusion UI that opens the desired page in a separate browser window or tab.
The second category of problems you may face are due to recent browser security enhancements: if your iFrame references an HTTP URL and the hosting application uses HTTPS (generally the case for Cloud and most on-premises production applications), modern browsers are concerned about that untrusted/unsecure content delivered as part of the overall application page. They'll show an easy-to-miss warning icon in the URL bar:
Click the icon and you see something like this:
If you disable the protection for the page, the iFrame content will load as desired.
Why are the browser vendors doing this? To protect the users from man-in-the-middle attacks. See this blog post from the Mozilla developers announcing the feature for Firefox for more details.
What are your options here? If the site offers an HTTPS version, use that. If it doesn't, but you own or control the site (for example, a corporate intranet site), consider switching it to HTTPS. If you absolutely must use an HTTP URL, you could instruct your users to allow the access. But with a large user community that is probably fairly error prone, and it's generally not a good idea to teach users to ignore or override security warnings. The better approach once again would be to open the desired URL via a button or link added to the base page.
Adding Links and Buttons
The Application Composer feature to add links and buttons is explained here. You can also watch this video on our YouTube Channel. In Page Composer you can choose the appropriate component from the palette shown in the above screenshot or construct your own HTML as needed.