CORS Essentials: Understanding Cross-Origin Resource Sharing Quiz

Explore the key concepts of Cross-Origin Resource Sharing (CORS), its role in web security, and how browsers handle cross-origin requests. This quiz aims to build foundational knowledge for developers seeking to understand CORS mechanisms, HTTP headers, and safe data sharing across domains.

1. Defining CORS

   What does CORS (Cross-Origin Resource Sharing) allow in web browsers?

   1. A method for encrypting all web traffic
   2. A system for storing cookies across devices
   3. A browser feature to speed up internet downloads
   4. A way for browsers to securely access resources from different origins

   Explanation: CORS enables browsers to make requests for resources on a different origin than the one serving the web page, improving secure data sharing. It is not tied to encryption protocols, so 'a method for encrypting all web traffic' is incorrect. Speeding up downloads and storing cookies across devices are not the purposes of CORS.

2. Same-Origin Policy

   Which browser security mechanism does CORS work with to control access to resources?

   1. Hyper-Transfer Protocol
   2. Same-Origin Policy
   3. Domain Control System
   4. Cross-Site Encryption

   Explanation: The Same-Origin Policy restricts web pages from making requests to a different domain, and CORS is an extension that safely relaxes this restriction. Hyper-Transfer Protocol is a misspelling of HTTP but not relevant here. Domain Control System and Cross-Site Encryption are not standard browser protection systems.

3. Access-Control-Allow-Origin Header

   When a server allows cross-origin requests, which HTTP response header does it typically include?

   1. Origin-Control-Allow
   2. Allow-Cross-Origin
   3. Access-Control-Allow-Origin
   4. Access-Resource-Allow-Origin

   Explanation: Access-Control-Allow-Origin is the standard HTTP header that specifies which origins can access the resource. The other options are incorrect as they are either fabricated or misnamed headers. Only the correct header will activate CORS in the browser.

4. Origin Header Role

   What information does the 'Origin' HTTP request header provide to the server during a cross-origin request?

   1. The domain initiating the request
   2. The file type being downloaded
   3. The size of the requested resource
   4. The user’s session token

   Explanation: The 'Origin' header contains the scheme, host, and port of the requesting site, allowing the server to determine whether to approve the request. It does not include session tokens, resource size, or file type information, so these distractors are incorrect.

5. Simple vs. Preflighted Requests

   Which type of HTTP request automatically triggers a CORS preflight check by the browser?

   1. A standard GET request for an image
   2. A basic GET request for HTML
   3. A plain HEAD request
   4. A POST request with custom headers

   Explanation: POST requests with custom headers are considered 'non-simple' and require a preflight OPTIONS request to check permissions. Standard GET and HEAD requests without special headers are 'simple' and do not trigger preflight. The distractors refer to simple requests that browsers allow without extra negotiation.

6. Wildcard Origins

   Which value can be used with the Access-Control-Allow-Origin header to allow requests from any origin?

   1. *
   2. ?
   3. ALL
   4. $

   Explanation: The asterisk symbol '*' is the wildcard that tells browsers any origin is permitted. '$' and '?' do not have this meaning in CORS, and 'ALL' is not a valid HTTP header value. Only '*' fulfills this function.

7. Credentials with CORS

   If a server wants to allow cross-origin requests with credentials (such as cookies), which header must it set?

   1. Access-Cookies: yes
   2. Access-Control-Allow-Credentials: true
   3. Origin-Enable-Credentials: true
   4. Allow-Credentials: on

   Explanation: Access-Control-Allow-Credentials: true specifies that cookies and credentials may be included in the request. The other options are fabricated headers and will not enable credentialed cross-origin requests. Only the correct header is recognized by browsers.

8. Disallowed CORS Headers

   Which of the following headers CANNOT be set by a browser using JavaScript due to CORS restrictions?

   1. Content-Type
   2. Accept
   3. Set-Cookie
   4. Authorization

   Explanation: Browsers disallow JavaScript from setting the 'Set-Cookie' header due to security risks, while the other headers can be set under certain conditions. 'Content-Type', 'Accept', and 'Authorization' may be set on some requests depending on CORS settings.

9. CORS Error Symptoms

   When a web developer sees a CORS error in the browser console, what is usually happening?

   1. The server is down and not responding
   2. The browser cannot decrypt a secure message
   3. The requested resource on another origin did not send proper CORS headers
   4. The web page failed to load due to a missing stylesheet

   Explanation: A CORS error typically means the server did not provide the required cross-origin headers to allow the browser's request. Server outages or resource loading failures do not trigger CORS errors. Encryption issues or missing stylesheets are unrelated to CORS.

10. Modifying CORS on the Client

    Can a front-end JavaScript application bypass CORS by simply changing its fetch request?

    1. Yes, adding Origin headers lets all requests succeed
    2. Yes, using a POST method overrides CORS
    3. No, browsers enforce CORS and block disallowed requests regardless of client code
    4. No, but adding a random token will bypass the check

    Explanation: Browsers enforce the CORS policy independently of client code, so modifying fetch methods or adding headers does not bypass restrictions. Simply adding headers, changing methods, or using random tokens are ineffective, as CORS is enforced at the browser level.