SafeFrame is a web standard developed by IAB

The Interactive Advertising Bureau (IAB) created the web standard SafeFrame to improve web users' security and privacy while enabling more secure and controlled interactions with embedded ads. SafeFrame allows advertisers to display their content within a predefined, isolated iframe, providing more control over how ads interact with the host webpage. You should try SafeFrame if you are experiencing some kind of performance issues when your app is combined with video/banner ads - unsafe creatives could cause application vulunerabilities.
 

Here's a basic example of how SafeFrame works:

SafeFrame Container

The publisher's website includes a SafeFrame container in which the ad will be displayed. This container is an iframe element with specific attributes to define the dimensions and other properties.

<iframe id="safeframe" src="https://example.com/safeframe.html" width="300" height="250"></iframe>

SafeFrame HTML

The ad creative is loaded inside a SafeFrame HTML page. Typically, the advertiser or an ad network is hosting this HTML page. The SafeFrame HTML page contains the ad's content and instructions for how it should behave.

<!DOCTYPE html>
<html>
<head>
  <title>SafeFrame Ad</title>
</head>
<body>
  <div id="ad-content">
    <!-- Ad content goes here -->
  </div>
   
  <script>
    // SafeFrame API code to handle interactions with the host page
    function adjustSize(width, height) {
      window.parent.postMessage({
        type: 'resize',
        width: width,
        height: height,
      }, '*');
    }
 
    function expand() {
      window.parent.postMessage({
        type: 'expand'
      }, '*');
    }
 
    // Handle other SafeFrame API methods as needed
  </script>
</body>
</html>

Interactions

JavaScript functions within the SafeFrame HTML page, like adjustSize and expand in the example, can be used to adjust the size of the SafeFrame container, expand it, or perform other interactions.

Communication

The SafeFrame API enables communication between the SafeFrame HTML page and the host page. It uses the postMessage method to send and receive messages.

In this example, the SafeFrame API allows the ad to inform the host page about its size or request an expansion. This controlled communication ensures that the ad cannot access or manipulate the host page's content or scripts, enhancing security and privacy.

SafeFrame is especially useful for preventing malicious code or tracking mechanisms in ads from affecting the host webpage. It also provides better control over ad behavior and size, helping to maintain a smooth user experience.