Understanding Same-Origin Policy and CORS in Web Development

Same-Origin Policy

In browsers, resources are open but unrestricted cross-origin interactions can lead to security issues such as XSS, SQL injection, CSRF, etc., so browsers enforce the Same-Origin Policy.

What is Same-Origin Policy

The policy restricts how a document or its scripts can interact with resources from another origin. Two URLs are considered same-origin when they share protocol, host, and port.

Protocol: e.g., HTTP, HTTPS.

Host: the network host name or IP address.

Port: the communication endpoint on the host.

The policy affects DOM access, web data (XMLHttpRequest/Fetch), and network communication.

DOM access restriction: scripts cannot read or manipulate the DOM of a page from a different origin.

Web data restriction: XHR/Fetch can only request resources from the same origin unless CORS headers are present.

Network communication restriction: browsers block cross-origin responses unless allowed.

CORS (Cross-Origin Resource Sharing)

CORS provides a controlled way for browsers to make cross-origin requests by having the server include specific HTTP headers.

CORB (Cross-Origin Read Blocking) is a mechanism that stops malicious scripts from accessing cross-origin response data before rendering.

For a simple request (GET, HEAD, POST with limited headers), the browser sends the request directly without a preflight.

Simple Request

A request is considered simple when it uses only GET, HEAD, or POST, contains only safe headers, does not use ReadableStream, and does not include custom request headers.

Preflight Request

Non-simple requests trigger a preflight OPTIONS request where the browser sends Access-Control-Request-Method and Access-Control-Request-Headers. The server responds with Access-Control-Allow-Origin, Access-Control-Allow-Methods, etc., to indicate permission.

Credentials and Wildcards

When credentials (cookies) are included, the server must not use a wildcard (*) for Access-Control-Allow-Origin or other headers; it must specify an explicit origin.

Summary

Preflight requests are automatic OPTIONS calls that protect security by letting the server decide whether to allow a cross-origin request. Proper CORS headers enable safe cross-origin communication while preventing data leakage.