Understanding CORS: Cross-Origin Resource Sharing

1. What is CORS?

Cross-Origin Resource Sharing (CORS) is a security mechanism implemented by web browsers that controls how web pages from one domain can access resources from another domain. It’s a browser-enforced policy that determines whether a web application running at one origin (domain, protocol, and port, for example https://mydomain.com) can access resources from a different origin (e.g. https://anotherdomain.com).

CORS works through HTTP headers that are exchanged between the browser and server:

• The browser sends a request with an Origin header indicating the requesting domain
• The server responds with Access-Control-Allow-Origin and other CORS headers to specify which origins are permitted

2. Why CORS is Important

CORS is crucial for web security because it prevents malicious websites from making unauthorized requests to other domains on behalf of users. Without CORS:

• Cross-Site Request Forgery (CSRF) attacks would be easier to execute
• Malicious scripts could access sensitive data from other websites
• User credentials and personal information could be exposed
• APIs could be abused by unauthorized third-party websites

CORS provides controlled exceptions to the Same-Origin Policy, which by default blocks cross-origin requests unless explicitly allowed by the target server. This creates a secure-by-default environment where cross-origin access must be intentionally configured.

3. CORS Use Cases

Common Scenarios Requiring CORS:

1. API Consumption: Frontend applications consuming REST APIs hosted on different domains
2. CDN Resources: Loading JavaScript, CSS, images, or fonts from Content Delivery Networks
3. Third-party Integrations: Accessing services like payment processors, analytics, or social media APIs
4. Microservices Architecture: Different services running on separate domains or ports
5. Development Environment: Frontend running on localhost:3000 accessing backend on localhost:8000

CORS Headers in Action:

# Server Response Headers
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

4. How to Test CORS

A simple web page

This example is originally found in Nick Gibbon’s repository at this link. Following is the code of a simple web page, that demonstrates a practical CORS test scenario: the scripts try to load a resource (in the example from https://example.com), if it succeeds, it prints out the returned data, if not an error.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
  function main() {
    console.log("cors-test");
    $.ajax({
      url: "https://example.com",
      success: function(data) {
        console.log(data);
      },
      error: function(data) {
        console.error(data);
      }
    });
  }
</script>

Testing Steps:

1. Create an HTML file: Create an HTML file with the content above called cors_test.html, replacing the URL value in the file with the website URL where the resource is hosted
2. Open the file: Load cors_test.html in a web browser
3. Open Developer Tools: Press F12 or right-click → Inspect → Console tab
4. Execute the Test: Call main() function in the console
5. Observe Results: Check if the request succeeds or fails with CORS error

Command Line Testing

curl -H "Origin: https://yoursite.com" \
     -H "Access-Control-Request-Method: GET" \
     -H "Access-Control-Request-Headers: X-Requested-With" \
     -X OPTIONS \
     https://api.example.com/endpoint

Online CORS Testing Tools

• Use online CORS checkers by entering the target URL and origin
• Browser extensions that can modify CORS headers for testing
• Postman or similar API testing tools (note: these do not enforce CORS)

Common CORS Error Messages:

• Access to XMLHttpRequest at 'URL' from origin 'ORIGIN' has been blocked by CORS policy
• No 'Access-Control-Allow-Origin' header is present on the requested resource
• CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https

Troubleshooting CORS Issues

1. Check Server Configuration: Ensure proper CORS headers are set on the server
2. Verify Origins: Make sure the requesting origin is included in allowed origins
3. Preflight Requests: For complex requests, ensure OPTIONS method is handled
4. Credentials: If sending cookies/credentials, set Access-Control-Allow-Credentials: true

Conclusion

CORS is essential for maintaining web security while enabling legitimate cross-origin communication in modern web applications.

Additional Resources

• AWS API Gateway CORS configuration
• AWS CloudFront CORS Configuration