Understanding CORS (Cross-Origin Resource Sharing)

• CORS Definition: CORS is a web browser security mechanism that allows a web page from one domain to access resources from another domain, provided the other domain permits it through CORS headers.
• Origin Components:
  • Scheme/Protocol (e.g., HTTPS)
  • Host/Domain (e.g., www.example.com)
  • Port (e.g., 443 for HTTPS)
• Same-Origin Policy:
  • A web page can only request resources from the same origin (same scheme, host, and port) unless CORS is implemented.
• Different Origins Example:
  • https://www.example.com (Origin 1)
  • https://other.example.com (Origin 2)
• CORS Headers:
  • Access-Control-Allow-Origin: Specifies which origins can access the resources.
  • A pre-flight request using the OPTIONS method is sent to determine if the actual request is safe to send.
• CORS Process Diagram:
  1. User visits https://www.example.com (Origin 1).
  2. The web page requests an image from https://www.other.com (Origin 2).
  3. Browser sends a pre-flight request to Origin 2.
  4. If Origin 2 allows Origin 1 in its CORS headers, the browser proceeds with the actual request.
• CORS in AWS S3:
  • S3 buckets need correct CORS headers to serve cross-origin requests.
  • CORS headers can be configured to allow specific origins or all origins (``).
• S3 CORS Example:
  1. A web browser requests index.html from an S3 bucket hosting a website.
  2. index.html includes an image from a different S3 bucket.
  3. The browser sends a pre-flight request to the second S3 bucket to check CORS policy.
  4. If CORS is configured correctly, the image is served; otherwise, the request is denied.

Key Takeaways for the Exam

• Understand what CORS is and how it works.
• Recognize how CORS is implemented with AWS S3.
• Know how to configure CORS headers in S3 for cross-origin resource sharing.

Next Steps

• Conduct hands-on exercises to demonstrate how CORS is configured and functions in practice.

Extras:

The OPTIONS HTTP method plays a crucial role in CORS (Cross-Origin Resource Sharing) by enabling something called a "preflight request". Here's how it works:

Why Preflight Requests?

• Same-Origin Policy: Web browsers enforce the Same-Origin Policy for security reasons. This policy generally prevents a website from accessing resources from a different domain.