HTTP Headers

Access Control Allow Credentials

HTTP Header

The HTTP Access-Control-Allow-Credentials response header indicates to browsers whether the server permits credentials to be included in cross-origin HTTP requests.

Credentials encompass cookies, Transport Layer Security (TLS) client certificates, or authentication headers that carry a username and password.
By default, browsers do not send these credentials in cross-origin requests, and enabling this can increase vulnerability to Cross-Site Request Forgery (CSRF) attacks.

Clients can request credentials to be included in cross-origin requests through various methods:

Using fetch(), by setting the credentials option to "include".

Using XMLHttpRequest, by setting the XMLHttpRequest.withCredentials property to true.

Using EventSource(), by setting the EventSource.withCredentials property to true.

When credentials are included:

For preflighted requests: The preflight request does not contain credentials. If the server responds to the preflight with the Access-Control-Allow-Credentials header set to true, then the actual request will include credentials; otherwise, the browser reports a network error.

For non-preflighted requests: Credentials will be included, but if the server’s response does not set the Access-Control-Allow-Credentials header to true, the browser reports a network error.

Header type	Response header
Forbidden request header	No

Syntax

Access-Control-Allow-Credentials: true

Directives

The server permits the inclusion of credentials in cross-origin HTTP requests. This is the only acceptable value for this header and it is case-sensitive. If credentials are not required, it is better to omit this header entirely rather than setting its value to false.

Example

Examples

Allow credentials:

http

Access-Control-Allow-Credentials: true

Using fetch() with credentials:

fetch(url, {
 credentials: "include",
});

Using XMLHttpRequest with credentials:

const xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/", true);
xhr.withCredentials = true;
xhr.send(null);

How to Modify Header using Requestly

Requestly is a powerful Chrome extension that allows you to modify HTTP headers, including the Access-Control-Allow-Credentials header. This is especially useful for testing and debugging how your application handles cross-origin requests and credentials during development. Steps to Modify the Access-Control-Allow-Credentials Header:

Install and open the Requestly Chrome extension. You can find it on the Chrome Web Store.
Create a new rule: Click on “Create Rule” and choose “Modify Headers” from the list of available rule types.
Add a new header modification:
- Under “Action”, select “Add” or “Override”.
- In the “Header Name” field, enter Access-Control-Allow-Credentials.
- In the “Header Value” field, enter true or your preferred value.
Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-api.com/*).
Save the rule.

Once set up, Requestly will inject the Access-Control-Allow-Credentials: true header into all matching responses, allowing you to control whether browsers include credentials like cookies in cross-origin requests and test security and functionality accordingly. You might need to modify this header to test how your web application handles authenticated cross-origin requests, ensuring that credentials are sent or blocked as expected for your CORS configuration. This helps improve security and user experience in development.