In the realm of web security and browser safety, two essential concepts play a significant role: CORS (Cross-Origin Resource Sharing) and Same Origin Policy. This blog post aims to shed light on these concepts and their significance in ensuring secure web interactions.
1. Same Origin Policy (SOP):
Same Origin Policy is a security measure implemented by web browsers that allows JavaScript code executed on a web page to access resources only from the same origin, which encompasses the same domain, protocol, and port combination. This policy prevents requests between different origins and restricts browser-based attacks.
Same Origin Policy is based on three components of an origin:
Origin Domain:The domain name of the web page where the resources originate, e.g., "example.com".
Protocol:The communication protocol used to access the web page, e.g., "https://" or "http://".
Port:"80" or "443" as default.This policy ensures that a web page can only access resources from the same origin it belongs to. For example, JavaScript can only retrieve data from a resource that shares the same origin (same domain, protocol, and port).
2. Cross-Origin Resource Sharing (CORS):
Cross-Origin Resource Sharing (CORS) is a mechanism used to overcome the limitations imposed by the Same Origin Policy. CORS allows a web browser to relax the restrictions and grant access to its resources for requests coming from a different origin. It is an HTTP header-based mechanism.
When a web browser makes a request to a different origin (domain, protocol, or port), the browser initiates a CORS process to determine if the requested resource should be accessible. The server, in response, includes the "Access-Control-Allow-Origin" header in its HTTP response. This header specifies the allowed origins that are permitted to access the requested resource.
For example, if a website at "example.com" wants to make a request to an API at "api.example.org," the API server needs to include the following header in its response:
Access-Control-Allow-Origin: https://example.com
With this header, the API server explicitly grants permission for the website at "example.com" to access its resources. If the requesting origin is not listed in the "Access-Control-Allow-Origin" header or the header is missing, the browser enforces the Same Origin Policy and denies access to the requested resource.
CORS also includes additional headers, such as "Access-Control-Allow-Methods" and "Access-Control-Allow-Headers," to specify the allowed HTTP methods and headers for the cross-origin request.
Let's visualize the CORS:
In Summary
Same Origin Policy and CORS are essential concepts for ensuring web security and browser safety. While the Same Origin Policy restricts access between different origins, CORS provides a controlled mechanism for relaxing those restrictions when needed. By properly configuring CORS headers on the server-side, web developers can allow cross-origin requests while still maintaining a secure environment.
- Follow me on 👾 YouTube and Github link in bio.
- Thank you for taking the time to read our blog post. Your support is greatly appreciated!🙋
Top comments (1)
Thank you :) 👾