Web Security: Advanced Same-Origin Policy and Cross-Origin Solutions

1. The Nature of Same-Origin Policy

Same-Origin Policy (SOP) is one of the browser's core security mechanisms, restricting how documents or scripts from one origin can interact with resources from another origin.

• Definition of Same Origin: Protocol, domain, and port must be identical. For example:
  • https://a.com/index.html and https://a.com/api are same-origin (protocol, domain, port match).
  • https://a.com and http://a.com are cross-origin (different protocols).
• Scope of Restrictions:
  • Cookie/LocalStorage access
  • DOM operations (e.g., iframe embedding)
  • AJAX requests (can be sent, but responses are blocked by the browser)

2. Underlying Principles of Cross-Origin Solutions

2.1 JSONP (JSON with Padding)

Principle: Leverages the fact that <script> tags are not restricted by SOP, initiating GET requests by dynamically creating script tags.
Steps:

1. Define a global callback function on the frontend:

   function handleResponse(data) {
     console.log(data);
   }
   

2. Dynamically add a <script> tag:

   const script = document.createElement('script');
   script.src = 'https://api.example.com/data?callback=handleResponse';
   document.body.appendChild(script);
   

3. Server returns data wrapped in the callback function:

   handleResponse({ "status": "success", "data": ... });
   

Drawbacks: Only supports GET requests; lacks error handling mechanisms.

2.2 CORS (Cross-Origin Resource Sharing)

Principle: The server explicitly allows requests from certain origins by setting specific HTTP response headers.

• Simple Requests (trigger CORS directly):
  • Methods: GET/POST/HEAD; Content-Type: application/x-www-form-urlencoded, multipart/form-data, or text/plain.
  • Browser automatically adds the Origin: https://a.com request header. The server must respond with Access-Control-Allow-Origin: https://a.com (or *).
• Preflight Requests (require an initial OPTIONS request):
  • Trigger conditions: Custom headers (e.g., Authorization), non-simple Content-Type (e.g., application/json).
  • Browser sends an OPTIONS request first; server must respond with:

    Access-Control-Allow-Origin: https://a.com
    Access-Control-Allow-Methods: POST, GET
    Access-Control-Allow-Headers: Content-Type
    

• With Credentials (e.g., Cookies):
  • Frontend sets withCredentials: true. The server must specify Access-Control-Allow-Origin as a concrete origin (cannot be *) and return Access-Control-Allow-Credentials: true.

2.3 Proxy Server

Principle: Forwards cross-origin requests to a same-origin server, which then proxies the request to the target API.

• Development environment: Configure proxy in Webpack DevServer:

  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true  // Modifies the Origin header in the request to the target address
      }
    }
  }
  

• Production environment: Use Nginx reverse proxy:

  location /api/ {
    proxy_pass https://api.example.com/;
    proxy_set_header Host $host;
  }
  

2.4 postMessage

Principle: Allows windows from different origins to communicate via message events.

// Sender (https://a.com)
iframe.contentWindow.postMessage('Hello', 'https://b.com');

// Receiver (https://b.com)
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://a.com') return;
  console.log(event.data); // 'Hello'
});

2.5 document.domain (Suitable for Subdomain Cross-Origin)

Principle: Sets pages under the same top-level domain to share the same domain.

• Limitation: Only applicable for cross-origin between subdomains like a.example.com and b.example.com.
• Code:

  // Set in both pages
  document.domain = 'example.com';
  

3. Solution Comparison and Applicable Scenarios

4. Security Considerations

1. CORS's Access-Control-Allow-Origin: *: Use cautiously to avoid leaking sensitive data.
2. JSONP Risks: Vulnerable to malicious script injection; must validate data source.
3. Proxy Servers: Must guard against SSRF (Server-Side Request Forgery) attacks.

By understanding the constraints of the Same-Origin Policy and the underlying principles of various cross-origin solutions, you can select the most appropriate and secure solution for your specific scenario.