How to change style of iframe content cross- domain ?

When you need to change the styles of iframe content across domains, you often encounter issues due to same-origin policy restrictions. The same-origin policy is a security measure that prevents scripts from one domain from interacting with content from another domain. However, there are still ways to achieve style changes while adhering to security restrictions.

Method One: CORS (Cross-Origin Resource Sharing)

If you have control over the server hosting the iframe content, you can implement CORS to allow cross-domain style changes. You need to set the Access-Control-Allow-Origin header on the server to permit interaction with the parent page's domain.

http
Access-Control-Allow-Origin: https://example.com

This method is only applicable if you have control over both domains.

Method Two: Using window.postMessage

If you cannot control the server hosting the iframe, another approach is to use the window.postMessage API. This is a secure method for enabling cross-document communication. You can send messages from the parent page to the iframe, and the script inside the iframe receives the message to modify styles accordingly.

Parent page code example:

javascript
var iframe = document.getElementById('myIframe');
var message = {
  task: 'changeStyle',
  style: {
    color: 'blue',
    fontSize: '14px'
  }
};
iframe.contentWindow.postMessage(JSON.stringify(message), 'https://iframe-domain.com');

Iframe page internal script:

javascript
window.addEventListener('message', function(event) {
  // Verify message origin
  if (event.origin !== 'https://parent-domain.com') return;

  var data = JSON.parse(event.data);
  if (data.task === 'changeStyle') {
    // Modify styles
    document.body.style.color = data.style.color;
    document.body.style.fontSize = data.style.fontSize;
  }
});

Method Three: Proxy Page

If neither of the above methods is applicable, a workaround is to create a middle proxy page. This page resides on the same domain as the iframe content, and you can control it to modify the styles of the iframe content. The principle involves embedding the target iframe within the proxy page and then modifying the styles through the proxy page.

This requires setting up a middle page on the same domain, which embeds the target iframe, and the parent page communicates with this middle page for style modifications.

Important Considerations

• Before attempting these methods, ensure you understand all security and privacy considerations, especially when handling user data.
• Modifying third-party services' iframes may violate their terms of service, so carefully review the relevant terms before making any changes.