Given the complexity of eCommerce websites today and the multiple scripts/integrations that need to work together seamlessly, technical errors are inevitable regardless of the quality of your codebase and the efficiency of debugging.

In this blog post, we will break down a common HTML iframe error triggered as a standard web security measure:

Blocked a frame with origin “<URL>” from accessing a cross-origin frame. Protocols, domains, and ports must match.

This error is triggered by a standard web security measure called the same-origin policy. The policy is meant to protect web resources from malicious actions or attacks.

By default, iframes are protected by this policy. This means that any site hosting an iframe is not allowed to access any content within the iframe unless they share the same protocol, domain, and port.

If a site contains a cross-origin iframe (with a different domain, protocol, or port), the site will be unable to access anything within the iframe. The only two actions a site can perform with this iframe are to access its contentWindow attribute and modify its location attribute, which would redirect the iframe to a different site. Any other interaction with the iframe is considered a violation of the same-origin rule and results in the cross-origin error.

To understand how this works, we present an example code snippet that calls a cross-domain iframe onto the target site. You can copy and paste this into your browser on any site (e.g. google.com) to replicate the error.

// This function takes a given url and creates an iframe for it 
let injectIframe = function(url) {

   let iframe = document.createElement('iframe');

   iframe.src = url;

	
	// This adds a listener to run some code once the iframe initializes
   iframe.addEventListener("load", function() {

			// This is allowed! 
      console.log(iframe.contentWindow);

			// This is not allowed!
      console.log(iframe.contentWindow.document);

   });

	// This adds the iframe onto the target site
   document.body.appendChild(iframe);

};

// This is the origin URL for our iframe (and the webpage it will show)
let scriptUrl = "<https://www.iframedummyurl.com>";

// If the page is loaded, create the iframe on the site
if (document.readyState !== "loading" && document.body) {

   injectIframe(scriptUrl);

} 
// If the page isn't yet loaded yet, add a listener to create the iframe when 
// loading is complete
else {

   document.addEventListener("DOMContentLoaded", function() {

      injectIframe(scriptUrl);

   });

}