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