Building Safer JavaScript Applications/

...

/

Cross-Origin Resource Sharing (CORS)

Cross-Origin Resource Sharing (CORS)

Learn how cross-origin requests are handled including when Cross-Origin Resource Sharing and preflight requests are used, how requests are cached, and when credentials are sent.

We'll cover the following...

Broken Access Control

Cross-Origin Resource Sharing (CORS) is an HTTP header-based protocol that allows a server to specify which origins, other than its own, are allowed to load various resources. CORS misconfiguration falls under the Broken Access Control OWASP category, ranked number one on the OWASP Top Ten.

Cross-origin requests without CORS

CORS was accepted as a W3C recommendation in January 2014, but developers have been making cross-origin requests long before that. The img tag was proposed in February 1993, which allowed browsers to make cross-origin requests for images.

Today, there are many various HTML elements that allow developers to make cross-origin requests without CORS.

<img src="…" />
<script src="…"></script>
<link rel="stylesheet" href="…" />
<iframe src="…"></iframe>
<video src="…"></video>
<audio src="…"></audio>
<form action=".." method="POST"></form>
HTML elements that allow cross-origin requests without CORS

These non-CORS requests can even include credentialsHTTP cookies, TLS client certificates, and the information sent in the Authorization request header that are used by the server to maintain the user state across multiple requests.

Until recently, when site-A requested site-B content using one of the HTML elements listed above, the site-A request would send along the credentials for site-B, even without site-B’s permission. As we can imagine, this design resulted in countless security issues. The default behavior has since changed and modern browsers no longer send cookies in cross-site requests unless site-B has opted-in on an individual cookie basis using the SameSite cookie attribute. Other modern HTTP security headers like X-Content-Type-Options, Cross-Origin-Embedder-Policy (COEP), and Cross-Origin-Resource-Policy (CORP) allow for more granular control over non-CORS cross-origin requests.

There is no single rule to follow when determining which requests use CORS and which do not. However, both Firefox and Chrome send a Sec-Fetch-Mode header in each request which indicates ...