Visualforce Developer Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
Introducing Visualforce
Tools for Visualforce Development
Getting a Quick Start with Visualforce
Customizing the Appearance and Output of Visualforce Pages
Standard Controllers
Standard List Controllers
Custom Controllers and Controller Extensions
Advanced Examples
Override Buttons, Links, and Tabs with Visualforce
Using Static Resources
Creating a Static Resource
Referencing a Static Resource in Visualforce Markup
Referencing Untrusted Third-Party Content with iframes
Creating and Using Custom Components
Dynamic Visualforce Bindings
Dynamic Visualforce Components
Integrate Email with Visualforce
Visualforce Charting
Creating Maps with Visualforce
Render Flows with Visualforce
Templating with Visualforce
Developing Salesforce Apps with Visualforce
Adding Visualforce to a Salesforce AppExchange App
Using JavaScript in Visualforce Pages
Communicating Across the DOM with Lightning Message Service
Visualforce Best Practices
Standard Visualforce Component Reference
Appendices
PDF

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:

<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:
    SfdcApp.iframe.sendMessage('theiframe', {
    key1: value1, 
    key2: value2
});
  • To receive messages from theiframe:
    SfdcApp.iframe.addMessageHandler('theiframe', function(data) {
    if(data.key1) {
        …
    }
});
  • To catch an error from theiframe:
    SfdcApp.iframe.addErrorHandler('theiframe', function(error) {
    console.log(error);
});

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:
    LCC.onlineSupport.sendMessage('containerUserMessage', {
    key1: value1, 
    key2: value2
});
  • To set up a handler to receive messages from the parent document:
    LCC.onlineSupport.addMessageHandler(function(message) {
    if(data.key1) {
        …
    }
});

    To remove this handler:

    LCC.onlineSupport.removeMessageHandler(function)
  • To set up a handler for message errors from the parent document:
    LCC.onlineSupport.addMessageErrorHandler(function(message) {
    if(data.key1) {
        …
    }
});

    To remove this handler:

    LCC.onlineSupport.removeMessageErrorHandler(function)
  • To set up a handler for other types of errors:
    LCC.onlineSupport.addErrorHandler(function(message) {
    if(data.key1) {
        …
    }
});

    To remove this handler:

    LCC.onlineSupport.removeErrorHandler(function)