Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Referencing Untrusted Third-Party Content with iframes

It’s a good idea to isolate static resources downloaded from an untrusted source. You can use an iframe to separate third-party content from your Visualforce page to provide an extra layer of security and help you protect your assets.

To reference a static HTML file on a separate domain, use $IFrameResource.<resource_name> as a merge field, where resource_name is the name you specified when you uploaded the resource. For example:

1<apex:iframe src="{!$IFrameResource.TestHtml}" id ="theiframe" width="500" height="500"/>

The iframe tag injects JavaScript into both the parent document and the child iframe to establish a secure communication between the two elements. The parent document can have multiple iframes. Each uniquely named static resource lives in its own subdomain of force-user-content.com.

Access to an iframe is not authenticated, so any third-party content it contains can’t access a user’s session ID.

Communicating with the iframe in the Parent Document

You can write JavaScript code in the parent document to communicate with the iframe.

To send a message to theiframe:

1SfdcApp.iframe.sendMessage('theiframe', {
2    key1: value1, 
3    key2: value2
4});

To receive messages from theiframe:

1SfdcApp.iframe.addMessageHandler('theiframe', function(data) {
2    if(data.key1) {
3        …
4    }
5});

To catch an error from theiframe:

1SfdcApp.iframe.addErrorHandler('theiframe', function(error) {
2    console.log(error);
3});

Communicating with the Parent Document in the iframe

You can also communicate the other way from the iframe document.

To send a message to the parent document:

1LCC.onlineSupport.sendMessage('containerUserMessage', {
2    key1: value1, 
3    key2: value2
4});

To set up a handler to receive messages from the parent document:

1LCC.onlineSupport.addMessageHandler(function(message) {
2    if(data.key1) {
3        …
4    }
5});

To remove this handler:

1LCC.onlineSupport.removeMessageHandler(function)

To set up a handler for message errors from the parent document:

1LCC.onlineSupport.addMessageErrorHandler(function(message) {
2    if(data.key1) {
3        …
4    }
5});

To remove this handler:

1LCC.onlineSupport.removeMessageErrorHandler(function)

To set up a handler for other types of errors:

1LCC.onlineSupport.addErrorHandler(function(message) {
2    if(data.key1) {
3        …
4    }
5});

To remove this handler:

1LCC.onlineSupport.removeErrorHandler(function)

Visualforce Developer Guide

Referencing Untrusted Third-Party Content with iframes

Communicating with the iframe in the Parent Document

Communicating with the Parent Document in the iframe