feat: add cors explanations (#44)

Added CORS explanations

_sidebar.md

@@ -30,6 +30,7 @@
     - [HTTP methods](/the-internet/http-methods.md)
   - [API](/the-internet/api.md)
     - [Fetch](/the-internet/fetch.md)
+    - [CORS](/the-internet/cors.md)
     - [Designing API's](/the-internet/designing-apis.md)
 - [HTML & CSS](/html-css/README.md)
   - [HTML](/html-css/html.md)

the-internet/assets/url.drawio

@@ -0,0 +1,46 @@
+<mxfile host="65bd71144e">
+    <diagram id="GnJlW6L_EI_F8NiEVgTS" name="Page-1">
+        <mxGraphModel dx="1593" dy="645" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+            <root>
+                <mxCell id="0"/>
+                <mxCell id="1" parent="0"/>
+                <mxCell id="13" value="" style="rounded=0;whiteSpace=wrap;html=1;labelBackgroundColor=none;strokeWidth=2;fontSize=20;fontColor=#000000;fillColor=default;strokeColor=none;" vertex="1" parent="1">
+                    <mxGeometry x="-100" y="200" width="770" height="170" as="geometry"/>
+                </mxCell>
+                <mxCell id="2" value="&lt;div style=&quot;font-family: &amp;quot;Fira Code&amp;quot;, &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace, &amp;quot;Droid Sans Fallback&amp;quot;, &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace; font-size: 20px; line-height: 19px;&quot;&gt;&lt;b style=&quot;font-size: 20px;&quot;&gt;&lt;font color=&quot;#cccc00&quot;&gt;https://&lt;/font&gt;&lt;font color=&quot;#990000&quot;&gt;my-super-application.com&lt;/font&gt;&lt;font color=&quot;#006600&quot;&gt;:443&lt;/font&gt;&lt;font color=&quot;#330066&quot;&gt;/images/super-image.png&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontStyle=0;fontColor=#000000;fontSize=20;" vertex="1" parent="1">
+                    <mxGeometry x="-90" y="220" width="750" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="3" value="" style="shape=curlyBracket;whiteSpace=wrap;html=1;rounded=1;flipH=1;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;labelBackgroundColor=none;fontSize=20;fontColor=#330066;fillColor=none;rotation=90;strokeWidth=2;" vertex="1" parent="1">
+                    <mxGeometry x="-45" y="215" width="20" height="90" as="geometry"/>
+                </mxCell>
+                <mxCell id="4" value="" style="shape=curlyBracket;whiteSpace=wrap;html=1;rounded=1;flipH=1;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;labelBackgroundColor=none;fontSize=20;fontColor=#330066;fillColor=none;rotation=90;strokeWidth=2;" vertex="1" parent="1">
+                    <mxGeometry x="153.75" y="111.25" width="20" height="297.5" as="geometry"/>
+                </mxCell>
+                <mxCell id="5" value="" style="shape=curlyBracket;whiteSpace=wrap;html=1;rounded=1;flipH=1;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;labelBackgroundColor=none;fontSize=20;fontColor=#330066;fillColor=none;rotation=90;strokeWidth=2;" vertex="1" parent="1">
+                    <mxGeometry x="330.63" y="240.63" width="20" height="38.75" as="geometry"/>
+                </mxCell>
+                <mxCell id="6" value="" style="shape=curlyBracket;whiteSpace=wrap;html=1;rounded=1;flipH=1;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;labelBackgroundColor=none;fontSize=20;fontColor=#330066;fillColor=none;rotation=90;strokeWidth=2;" vertex="1" parent="1">
+                    <mxGeometry x="500.32" y="120.32" width="20" height="279.38" as="geometry"/>
+                </mxCell>
+                <mxCell id="7" value="Scheme" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;fontSize=20;fontColor=#000000;" vertex="1" parent="1">
+                    <mxGeometry x="-77.5" y="275" width="85" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="8" value="Hostname" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;fontSize=20;fontColor=#000000;" vertex="1" parent="1">
+                    <mxGeometry x="130" y="275" width="60" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="9" value="Port" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;fontSize=20;fontColor=#000000;" vertex="1" parent="1">
+                    <mxGeometry x="310.63" y="275" width="60" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="10" value="Path" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;fontSize=20;fontColor=#000000;" vertex="1" parent="1">
+                    <mxGeometry x="480.32" y="275" width="60" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="11" value="" style="shape=curlyBracket;whiteSpace=wrap;html=1;rounded=1;flipH=1;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;labelBackgroundColor=none;fontSize=20;fontColor=#330066;fillColor=none;rotation=90;strokeWidth=2;" vertex="1" parent="1">
+                    <mxGeometry x="130" y="100" width="20" height="437.5" as="geometry"/>
+                </mxCell>
+                <mxCell id="12" value="Origin" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;fontSize=20;fontColor=#000000;" vertex="1" parent="1">
+                    <mxGeometry x="110" y="330" width="60" height="30" as="geometry"/>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>

the-internet/cors.md

@@ -0,0 +1,79 @@
+# Cross Origin Resources Sharing (CORS)
+
+CORS stands for Cross-Origin Resource Sharing. You may come across CORS when you want to fetch data from a Web API. So what is it?
+
+As per Mozilla Developer Network (MDN) documentation:
+
+> Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.
+
+While you should already be familiar with [HTTP headers](./http.md), at this point you may be asking yourself:
+
+- What is an `origin`?
+- What is this header based mechanism?
+- Why do I need to know about CORS?
+- How can I deal with it?
+
+No worries, we will answer those questions in the following part.
+
+## What is CORS ?
+
+Let's imagine that we have an application available at `https://my-super-application.com/index.html`. When we open the application using our Web browser, it will fetch a set of resources defined in the `index.html`. Example of resources are a `css` file, some `js` scripts and maybe one or two `png`. The following resources are loaded without any issue:
+
+- `https://my-super-application.com/index.html`
+- `https://my-super-application.com/style.css`
+- `https://my-super-application.com/script.js`
+- `https://my-super-application.com/images/background.png`
+- `https://my-super-application.com/images/logo.png`
+
+The browser has no issues loading them. The application is working just fine! Now we want to rely on [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) or [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) to query new resources on the web *(Note: While fetch is a more modern implementation, both ways offer similar capabilities)*.
+
+The user does something on our page, like clicking a button to display a new image. In the first version of the application, the image is stored at the same web site. We can use `fetch` to get the resource at `https://my-super-application.com/images/super-image.png`:
+
+```js
+async function getImage() {
+  const response = await fetch("https://my-super-application.com/images/super-image.png");
+  return await response.blob();
+}
+```
+
+It works without any issue! But now, for some reason, we want the image to come from another location or, stated more correctly, from another *origin*. For example, We want the user to see the image from `https://www.commitstrip.com/wp-content/uploads/2018/05/Strip-La-joie-du-message-derreur-english650-final.jpg`.
+
+> Now is the right time to explain what is an [Origin](https://developer.mozilla.org/en-US/docs/Glossary/Origin) when we talk about the Web. The Web uses HTTP as its core protocol to exchange resources in a [REST](https://simple.wikipedia.org/wiki/Representational_state_transfer) fashion. Each resource is identified by its [URL](https://developer.mozilla.org/en-US/docs/Glossary/URL). The [Origin](https://developer.mozilla.org/en-US/docs/Glossary/Origin) is defined by the **scheme** (protocol), **hostname** (domain), and **port** of the URL used to identify and access a resource. Two resources have the same origin only when the **scheme**, **hostname**, and **port** all match.
+>
+> ![URL Parts](assets/url.png)
+
+The origin of the new image (`https://www.commitstrip.com`) is different compared to our application origin (`https://my-super-application.com`).  It means that we are requesting a resource from a different origin and therefore making a **cross-origin request**.
+
+![Cross-Origin Request](assets/cross-origin-request.png)
+
+Back to my application, when requesting `https://www.commitstrip.com/wp-content/uploads/2018/05/Strip-La-joie-du-message-derreur-english650-final.jpg`. On the origin server, CORS is not configured to allow users to fetch resource from our application, and more precisely our application's *origin*. Requests are blocked by the browser and we get the following error:
+
+![CORS Error](assets/cors-error.png)
+
+## Why CORS?
+
+But why do we need CORS and why can't users access resource from any Origin? Because browsers try to protect users from [CSRF](https://developer.mozilla.org/en-US/docs/Glossary/CSRF) attacks!
+
+Let's imagine that we are authenticated with our bank website at `my-bank.com`. When browsing we may visit an attacker website by clicking a link. Once we have loaded the attacker website, without us knowing, they could make requests to `my-bank.com` on our behalf using the authenticated session stored in our browser. Then, they may be able to transfer money from our account to another account. The [Same-Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy?ea-publisher=javadecompilerscom) enforced by our browser protects us from this kind of attack!
+
+Without [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) and because of the [Same-Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy?ea-publisher=javadecompilerscom), we wouldn't be able to load resource from 3rd Party websites and APIs making the web less vibrant 😿.
+
+Thanks to CORS, the browser and the web server are able to exchange headers (prefixed with `Access-Control-*`). The headers define how the resources can be consumed by a web browser.
+
+## How should I work with CORS?
+
+**At this stage, you SHOULD not worry about CORS configuration and complexity!**
+
+It is good to know what it is and why it exists. But in most cases, libraries and frameworks will take care of that for you!
+
+Most Public APIs should allow requests from any Origin. If it is not the case, you should move to another API.
+
+> ❗ Be aware that CORS only apply to requests sent by a web browser to a web server. Request between web servers do not take CORS into consideration ❗
+
+# Extra reading
+
+If you just can't get enough, here are some extra links that mentors/students have found useful concerning this topic:
+
+- [Enable CORS](https://enable-cors.org/index.html) if you want to jump into the history of CORS
+- [MDN Documentation regarding CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) a strong reference for explaining and understanding cors
+- [CORS Specification](https://fetch.spec.whatwg.org/#http-cors-protocol) if you want to dive in how CORS works