Same-Origin Policy is a browser security mechanism used to prevent data interaction between different source web pages, protect user privacy and website security. Homologous requires that the protocol, domain name and port of the two URLs are completely consistent, and any difference is a different source. It mainly restricts cross-domain access to AJAX requests, DOM access, cookies, and Storage, but allows static resources to be loaded. The bypass method includes setting the response header using CORS, specifying the allowed source by the server. Common solutions in development include configuring a proxy server, temporarily releasing using browser plug-ins, or enabling CORS support in the backend.

Same-Origin Policy is one of the core concepts in the browser security mechanism. Its role is to prevent unauthorized data interactions between web pages from different sources, thereby protecting user privacy and website security. Simply put, it limits how scripts from one source communicate with resources from another source.

What is "homogen"?

In Same-Origin Policy, "homologous" refers to the protocol (http/https), domain name (domain) and port (port) of two URLs. As long as one of these three is different, it is considered a different source.

For example:

• https://example.com and https://example.com/page1 : Same Origin?
• http://example.com and https://example.com : Different sources? (different protocols)
• https://example.com and https://sub.example.com : Different sources? (domain names are different)
• https://example.com:8080 and https://example.com : Different sources? (different ports)

What behaviors do homologous policies mainly limit?

Same-origin policies do not block all cross-domain requests, but restrict the following common operations:

• AJAX Request : When requesting data from different sources using fetch or XMLHttpRequest through JavaScript, it will be intercepted by the browser by default.
• Accessing the DOM : You cannot use a script to read or modify the content of another different source page (such as the content in an iframe).
• Cookies and Storage : Web pages from different sources cannot access each other's cookies, localStorage, sessionStorage and other client storage data.

But it should be noted:

• The browser allows certain cross-domain resources to be loaded, such as static resources such as images, CSS, and JS files.
• Same-origin policy does not prevent the sending of requests, but prevents the reading of the response content.

How to bypass Same-Origin Policy?

If you control the target server, you can legally bypass the same-origin policy by setting CORS (cross-domain resource sharing).

CORS is a standard mechanism where servers can add fields in HTTP response headers to tell the browser which sources are allowed to access resources. For example:

 Access-Control-Allow-Origin: https://your-site.com

Or allow any source:

 Access-Control-Allow-Origin: *

In addition to this basic header information, you can also set whether to allow credentials (such as cookies), allowed methods (GET, POST, etc.), and allowed custom header information.

?? Note: CORS is configured by the server, and the front-end code cannot unilaterally decide whether it can be accessed across domains.

Common problems and solutions in development

Sometimes you will encounter cross-domain problems when developing front-end applications, such as failure to call the local back-end interface. Here are a few common solutions:

• Using a proxy server : In a development environment, you can configure the proxy function of Webpack Dev Server or Vite to forward the request to the target server, which looks like a same-origin request.
• Browser plug-ins temporary release : Some plug-ins can temporarily disable CORS, which is suitable for testing environments, but cannot be used for production.
• Backend enable CORS support : This is the most standardized approach to ensure normal communication under the front-end and backend separated architecture.

Basically that's it. Although Same-Origin Policy is sometimes a headache, it does play an important role in protecting users’ safety. Understanding how it works will help better deal with front- and back-end interaction issues.

The above is the detailed content of What is the Same-Origin Policy and how does it work?. For more information, please follow other related articles on the PHP Chinese website!