# 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:

```nolang
<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:

  ```nolang
  SfdcApp.iframe.sendMessage('theiframe', {
      key1: value1, 
      key2: value2
  });

  ```

- To receive messages from theiframe:

  ```nolang
  SfdcApp.iframe.addMessageHandler('theiframe', function(data) {
      if(data.key1) {
          …
      }
  });

  ```

- To catch an error from theiframe:

  ```nolang
  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:

  ```nolang
  LCC.onlineSupport.sendMessage('containerUserMessage', {
      key1: value1, 
      key2: value2
  });

  ```

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

  ```nolang
  LCC.onlineSupport.addMessageHandler(function(message) {
      if(data.key1) {
          …
      }
  });

  ```

  To remove this handler:

  ```nolang
  LCC.onlineSupport.removeMessageHandler(function)
  ```

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

  ```nolang
  LCC.onlineSupport.addMessageErrorHandler(function(message) {
      if(data.key1) {
          …
      }
  });

  ```

  To remove this handler:

  ```nolang
  LCC.onlineSupport.removeMessageErrorHandler(function)
  ```

- To set up a handler for other types of errors:

  ```nolang
  LCC.onlineSupport.addErrorHandler(function(message) {
      if(data.key1) {
          …
      }
  });

  ```

  To remove this handler:

  ```nolang
  LCC.onlineSupport.removeErrorHandler(function)

  ```