Current Location: Home> Latest Articles> PHP Cross-Subdomain Solution: Using document.domain and iframe for Data Communication

PHP Cross-Subdomain Solution: Using document.domain and iframe for Data Communication

gitbox 2025-06-30

Introduction

Cross-domain issues are a common challenge in frontend development. Due to the browser's same-origin policy, cross-domain requests are typically blocked, which presents a challenge for developers. However, in certain scenarios, we need to establish data communication between different subdomains. This article will explain how to use document.domain and iframe to solve the problem of cross-subdomain communication.

What is the Role of document.domain?

Before we dive into the solution, let's first understand the role of document.domain. document.domain is a string property used to set the domain of the current document. For example, if the page URL is "http://www.example.com", by setting document.domain = "example.com", the domain of the page becomes "example.com", enabling cross-subdomain communication.

Solution

Setting document.domain

First, create a parent page under the main domain, which will act as the data communication intermediary. To maintain consistency across subdomains, we need to set document.domain. The steps are as follows:

// Parent page (http://www.example.com)
document.domain = "example.com";

Next, create an iframe on the main domain to load the child page from the subdomain.

// Parent page (http://www.example.com)
<iframe src="http://sub.example.com/child.html"></iframe>

Setting document.domain in the Child Domain Page

The page on the subdomain also needs to set document.domain to the main domain to ensure proper communication between the parent and child domains. Here's how you do it:

// Child domain page (http://sub.example.com/child.html)
document.domain = "example.com";

Implementing Cross-Domain Communication

In the child domain page, you can access the parent page's global variables and functions via the window.parent object. By using this, the child page can send requests to the parent page, enabling cross-subdomain communication. Here's the code:

// Child domain page (http://sub.example.com/child.html)
var parentWindow = window.parent;
parentWindow.postMessage("Hello, parent page!", "http://www.example.com");

On the parent page, you can listen for the message event to receive the message sent by the child page. Here's the code for that:

// Parent page (http://www.example.com)
window.addEventListener("message", function(event) {
    console.log("Message received from sub page: " + event.data);
}, false);

Considerations

  • This solution is only applicable if the parent and child domains are the same. If the parent and child domains differ, cross-subdomain communication will not be possible.
  • When implementing this solution, it's essential to ensure data security to prevent issues like cross-site scripting (XSS) attacks.

Conclusion

By using document.domain and iframe together, we can establish cross-subdomain data communication. This solution is suitable for situations where the parent and child domains are the same, helping developers tackle cross-subdomain challenges. When using this approach, it's crucial to prioritize data security and avoid potential security vulnerabilities. By following these practices, we can efficiently address cross-domain issues.

Related