Why CORS Is Important (And How to Secure It)

What is CORS and why is it important?

CORS (Cross-Origin Resource Sharing) is a browser security feature that restricts web pages from making requests to a different domain (or origin) than the one that served the web page.

It’s important because it:

• Prevents malicious websites from reading sensitive data from other sites.
• Ensures that only trusted domains can interact with your API or backend resources.
• Allows controlled flexibility for legitimate use cases like third-party integrations.

What is a “cross-origin” request?

A cross-origin request happens when the origin (scheme + domain + port) of the frontend differs from that of the backend.

Example:

Frontend: https://my.website.com  
Backend: https://api.website.com  
  

How does CORS work behind the scenes?

When your JavaScript code tries to fetch data from a different origin, the browser:

1. Sends a preflight OPTIONS request to the server.
2. The server responds with headers like:

   Access-Control-Allow-Origin: https://my.website.com
   Access-Control-Allow-Methods: GET, POST
   Access-Control-Allow-Headers: Content-Type
         

3. If allowed, the browser proceeds with the actual request.

What happens if CORS is misconfigured?

If your server sends headers like:

Access-Control-Allow-Origin: *

Then any website in the world can make API requests to your backend. This is dangerous if:

• Your API exposes sensitive data.
• The API uses cookies for authentication.
• You assume only your frontend will access the backend.

How can a hacker abuse poor CORS configuration?

1. The backend allows all origins via *.
2. A hacker builds a malicious site that calls your API using the victim’s browser.
3. The browser sends authentication cookies automatically.
4. The attacker gains access to data, impersonates users, or exfiltrates info.

Isn’t CORS enforced by the browser?

Yes — browsers enforce CORS. However:

• Mobile apps, Postman, cURL are not subject to CORS.
• CORS is only a client-side control. You still need server-side auth.

Can CORS be bypassed?

Direct bypasses aren’t easy, but developers can open the door accidentally:

• Echoing back the request’s Origin header without validation.
• Using Access-Control-Allow-Credentials: true with * (invalid).
• Allowing all origins with wildcards like http://*.

Best Practices for CORS Security

• Whitelist exact origins — no wildcards.
• Don’t allow * if using cookies or credentials.
• Don’t blindly echo back the Origin header.
• Use additional access control (JWT, API keys, RBAC).

If Serving JavaScript from Cloudflare

If your JavaScript is hosted via Cloudflare and served to browsers at https://my.website.com, then this is the only origin that should be allowed to access your backend at https://api.website.com.

Cloudflare is not the origin — the browser origin is still https://my.website.com. So, you whitelist that, not Cloudflare’s domain.

Correct CORS Headers for This Setup

For a backend at https://api.website.com and frontend at https://my.website.com, your server should return:

Access-Control-Allow-Origin: https://my.website.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true
  

Example: Server-Side Logic for CORS

// Node.js/Express example
const allowedOrigins = ['https://my.website.com'];

app.use((req, res, next) => {
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
    res.setHeader('Access-Control-Allow-Credentials', 'true');
  }
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});
  

Summary

• CORS is a critical security layer for browser-based apps.
• Always whitelist specific origins, especially if using cookies or auth tokens.
• Don’t use * unless you’re 100% sure it’s safe (and no credentials are involved).

CORS is your browser saying: “Are you sure this site is allowed to talk to that other one?” — don’t ignore it.