Understanding CORS and Same Origin Policy in Web Security🚨
Tags: webdev, security, tutorial, backend
Published: 2023-06-13 08:37:45

> 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.

---

#### <u>1. Same Origin Policy (SOP):</u>

> 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 <mark>(same domain, protocol, and port)</mark>.

#### <u>2. Cross-Origin Resource Sharing (CORS):</u>

> 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:

![CORS Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04q4aambpdculf28fzth.png)

---

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!🙋

---

#### <u>References:</u>
- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
- [ChatGPT](https://openai.com/blog/chatgpt)

## My other contents

- [A-Z: Git Cheat Sheet🔥](https://dev.to/burakboduroglu/a-z-git-cheat-sheet-14pm)

- [A-Z: MongoDB Cheat Sheet🌱](https://dev.to/burakboduroglu/mongodb-cheat-sheet-1a6a)

- [Building a Node.js Server Without Using Express.js🐤](https://dev.to/burakboduroglu/building-a-nodejs-server-without-using-expressjs-3mc8)

- [Boost Your Programming Efficiency: Essential Tools for Success ⚙️](https://dev.to/burakboduroglu/boost-your-programming-efficiency-essential-tools-for-success-5h00)

- [JS Guide: Map, Reduce, Filter and forEach Methods](https://dev.to/burakboduroglu/js-guide-map-reduce-filter-and-foreach-methods-5fmi)