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 forceusercontent.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