How to Enable CORS with HTTPOnly Cookie to Secure Token?

On this article, we are going to see the best way to allow CORS (Cross-Origin Useful resource Sharing) with HTTPOnly cookie to safe our entry tokens.

At present, backend servers and frontend shoppers are deployed on completely different domains. Due to this fact, the server should allow CORS to ensure that shoppers in browsers to speak with the server.

Additionally, servers implement stateless authentication for higher scalability. Tokens are saved and maintained on the shopper facet, however not on the server facet as with classes. For safety, it’s higher to retailer tokens in HTTPOnly cookies.

Why are Cross-Origin requests blocked?

Let’s assume our frontend utility is deployed on https://app.geekflare.com. A script has been loaded https://app.geekflare.comcan solely request assets from the identical origin.

Every time we attempt to ship a cross-origin request to a different area https://api.geekflare.com or one other port https://app.geekflare.com:3000 or one other schedule http://app.geekflare.comthe cross-origin request is blocked by the browser.

However why the identical request that’s blocked by the browser is distributed from a backend server utilizing a curl request or despatched utilizing instruments just like the postman with none CORS challenge. It is principally for safety to guard customers from assaults like CSRF (Cross-Web site Request Forgery).

Let’s take an instance, say a consumer has logged into their very own PayPal account of their browser. If we are able to ship a cross origin request to paypal.com of a script loaded on one other area malicious.com with none CORS error/blocking as if we had been sending the identical request.

Attackers can simply ship their malicious web page https://malicious.com/transfer-money-to-attacker-account-from-user-paypal-account by changing it to a brief URL to cover the precise URL. When the consumer clicks on a malicious hyperlink, the script within the area is loaded malicious.com will ship a cross-origin request to PayPal to switch the consumer quantity to the attacker’s PayPal account. All customers who logged into their PayPal account and clicked on this malicious hyperlink will lose their cash. Anybody can simply steal cash with out a PayPal account’s data.

For the above motive, browsers block all cross-origin requests.

What’s CORS (Cross Origin Useful resource Sharing)?

CORS is a header-based safety mechanism utilized by the server to inform the browser to ship a cross-origin request from trusted domains.
The server enabled with CORS headers used to stop cross-origin requests which might be blocked by browsers.

How CORS works?

As a result of the server has already outlined its trusted area in its CORS configuration. After we ship a request to the server, the response will inform the browser that the requested area is trusted or not within the header.

There are two forms of CORS requests:

• Easy request
• Preflight request

Easy request:

• The browser sends the request to a cross-origin area with origin (https://app.geekflare.com).
• The server returns the corresponding response with allowed strategies And allowed origin.
• After receiving the request, the browser checks the worth of the origin header despatched (https://app.geekflare.com) and obtain the worth access-control-allow-origin(https://app.geekflare.com) are the identical or wildcard

. In any other case it’s going to generate a CORS error.

• CORS-Preflight Request picture exhibiting the movement of cross-origin requests with OPTIONS preflight requests earlier than the precise header verification request is distributed.
• Is determined by the customized request parameter of the cross origin request, corresponding to strategies (PUT, DELETE) or customized headers or different content material kind, and many others. The browser will resolve to ship a preflight OPTIONS request to examine if the precise request is secure to ship or not. After receiving the response (standing code: 204, that means no content material), the browser checks for the entry control-allow

parameters for the precise request. If the request parameters are allowed by the server. The precise cross-origin request that was despatched and obtained access-control-allow-origin: *If

, then the reply is allowed for all origins. But it surely’s not secure except you want it.

Find out how to allow CORS?

To allow CORS for every area, allow CORS headers to permit origins, strategies, customized headers, credentials, and many others.

• The browser reads the CORS header from the server and solely permits precise requests from the shopper after verifying the request parameters. Entry Management-Permit-Origin:
• To specify precise domains (https://app.geekflate.com, https://lab.geekflare.com) or wildcard
• Entry Management Permit Strategies: To permit the HTTP strategies (GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS) solely we want.
• Entry Management-Permit-Headers: Solely enable particular headers (authorization, csrf token)
• Entry Management Permit Credentials: Boolean worth used to permit cross-origin credentials (cookies, authorization header).
• Entry Management-Max-Age: Tells the browser to cache the preflight response for a while.

Entry-Management-Expose-Headers:

Specify headers which might be accessible via client-side scripts.

Comply with this tutorial to allow CORS in apache and Nginx net server.

const specific = require('specific');
const app = specific()

app.get('/customers', operate (req, res, subsequent) {
  res.json({msg: 'consumer get'})
});

app.publish('/customers', operate (req, res, subsequent) {
    res.json({msg: 'consumer create'})
});

app.put('/customers', operate (req, res, subsequent) {
    res.json({msg: 'Consumer replace'})
});

app.hear(80, operate () {
  console.log('CORS-enabled net server listening on port 80')
})

Allow CORS in ExpressJS

Let’s take an instance of an ExpressJS app with out CORS: Within the instance above, we enabled the consumer API endpoint for POST, PUT, and GET strategies, however not for the DELETE technique.

npm set up cors

To simply allow CORS within the ExpressJS app, you are able to do it

cors

app.use(cors({
    origin: '*'
}));

Entry Management-Permit-Origin

app.use(cors({
    origin: 'https://app.geekflare.com'
}));

Allow CORS for all domains Allow CORS for a single area If you wish to enable CORS for origin https://app.geekflare.com

app.use(cors({
    origin: [
        'https://app.geekflare.com',
        'https://lab.geekflare.com'
    ]
}));

And

https://lab.geekflare.com

app.use(cors({
    origin: [
        'https://app.geekflare.com',
        'https://lab.geekflare.com'
    ],
    strategies: ['GET', 'PUT', 'POST']
}));

Entry Management Permit Strategies

To allow CORS for all strategies, omit this feature within the CORS module within the ExpressJS. However for enabling particular strategies (GET, POST, PUT).

app.use(cors({
    origin: [
        'https://app.geekflare.com',
        'https://lab.geekflare.com'
    ],
    strategies: ['GET', 'PUT', 'POST'],
    allowedHeaders: ['Content-Type', 'Authorization', 'x-csrf-token']
}));

Entry Management-Permit-Headers

Used to permit headers apart from default to ship with precise requests. Entry control-allow-credentials Go away this out when you do not wish to inform the browser to permit credentials on request, even onwith references

app.use(cors({
    origin: [
        'https://app.geekflare.com',
        'https://lab.geekflare.com'
    ],
    strategies: ['GET', 'PUT', 'POST'],
    allowedHeaders: ['Content-Type', 'Authorization', 'x-csrf-token'],
    credentials: true
}));

is ready to true

.

app.use(cors({
    origin: [
        'https://app.geekflare.com',
        'https://lab.geekflare.com'
    ],
    strategies: ['GET', 'PUT', 'POST'],
    allowedHeaders: ['Content-Type', 'Authorization', 'x-csrf-token'],
    credentials: true,
    maxAge: 600 
}));

Entry Management-Max-Age

To instruct the browser to cache the preflight response info for a specified second. Go away this out when you do not wish to cache the response.

app.use(cors({
    origin: [
        'https://app.geekflare.com',
        'https://lab.geekflare.com'
    ],
    strategies: ['GET', 'PUT', 'POST'],
    allowedHeaders: ['Content-Type', 'Authorization', 'x-csrf-token'],
    credentials: true,
    maxAge: 600,
    exposedHeaders: ['Content-Range', 'X-Content-Range']
}));

The cached preflight response is accessible within the browser for 10 minutes. Entry-Management-Expose-Headers If we place the wildcard

app.use(cors({
    origin: [
        'https://app.geekflare.com',
        'https://lab.geekflare.com'
    ],
    strategies: ['GET', 'PUT', 'POST'],
    allowedHeaders: ['Content-Type', 'Authorization', 'x-csrf-token'],
    credentials: true,
    maxAge: 600,
    exposedHeaders: ['*', 'Authorization', ]
}));

in

uncovered heads,

it is not going to show the Authorization header. So we have to expose explicitly as under

The above will even show all headers and authorization header.

• What’s an HTTP cookie? A cookie is a small piece of information that the server sends to the shopper browser. On subsequent requests, the browser will ship all cookies associated to the identical area with every request.
• Cookie has its attribute, which might be outlined to make a cookie work in a different way than we want. Title
• Title of the cookie. worth:
• information from cookie associated to cookie identify Area:
• cookies are solely despatched to the outlined area Path:
• cookies are solely despatched after the outlined URL prefix path. To illustrate we outlined our cookie path as path=’admin/’. Cookies not despatched for URL https://geekflare.com/expire/ however despatched with URL prefix https://geekflare.com/admin/ Max Age/Expires (quantity in seconds):
• When ought to the cookie expire. A cookie lifetime invalidates the cookie after the desired time. HTTP solely (Boolean):
• The back-end server can entry that HTTPOnly cookie, however not the client-side script if true. [Strict, Lax, None]Safe (Boolean): Cookies are solely despatched over an SSL/TLS area if they’re true. sameSite sameSite(string

):

Used to allow/limit cookies despatched on cross-site requests. For extra details about cookies see MDN. It accepts three choices Strict, Lax, None. Cookie shield worth set to true for cookie configuration sameSite=None.Why HTTPOnly cookie for tokens? Storing the entry token despatched from the server in client-side storage corresponding to native storage , listed database,

And

cookie

(HTTPOnly not set to true) are extra susceptible to XSS assaults. To illustrate certainly one of your pages is weak to an XSS assault. Attackers can misuse consumer tokens saved within the browser.

HTTPOnly cookies are solely set/retrieved by the server/backend, however not on the shopper facet.

• Shopper-side script restricted from accessing that HTTPonly cookie. HTTPOnly cookies are subsequently not susceptible to XSS assaults and are safer. As a result of it will probably solely be accessed by the server.
• Allow HTTPOnly cookie in backend with CORS assist
• Enabling Cookie in CORS requires the under configuration within the utility/server.
• Set Entry-Management-Permit-Credentials header to True.

Entry-Management-Permit-Origin and Entry-Management-Permit-Headers can’t be wildcards

const specific = require('specific'); 
const app = specific();
const cors = require('cors');

app.use(cors({ 
  origin: [ 
    'https://app.geekflare.com', 
    'https://lab.geekflare.com' 
  ], 
  strategies: ['GET', 'PUT', 'POST'], 
  allowedHeaders: ['Content-Type', 'Authorization', 'x-csrf-token'], 
  credentials: true, 
  maxAge: 600, 
  exposedHeaders: ['*', 'Authorization' ] 
}));

app.publish('/login', operate (req, res, subsequent) { 
  res.cookie('access_token', access_token, {
    expires: new Date(Date.now() + (3600 * 1000 * 24 * 180 * 1)), //second min hour days 12 months
    safe: true, // set to true in case your utilizing https or samesite is none
    httpOnly: true, // backend solely
    sameSite: 'none' // set to none for cross-request
  });

  res.json({ msg: 'Login Efficiently', access_token });
});

app.hear(80, operate () { 
  console.log('CORS-enabled net server listening on port 80') 
}); 

.

Cookie sameSite attribute should be None.

To allow the sameSite worth to none, set the safe worth to true: Allow backend with SSL/TLS certificates to work within the area identify.

Let us take a look at some pattern code that units an entry token within the HTTPOnly cookie after verifying the credentials.

You’ll be able to configure CORS and HTTPOnly cookies by implementing the 4 steps above in your backend language and net server.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.geekflare.com/consumer', true);
xhr.withCredentials = true;
xhr.ship(null);

You’ll be able to observe this Apache and Nginx tutorial to allow CORS by following the steps above.

fetch('http://api.geekflare.com/consumer', {
  credentials: 'embody'
});

withCredentials for Cross-Origin Request

$.ajax({
   url: 'http://api.geekflare.com/consumer',
   xhrFields: {
      withCredentials: true
   }
});

Credentials (cookie, authorization) are despatched by default with the identical request from the identical origin. For cross-origin, we have to specify the withCredentials to true.

axios.defaults.withCredentials = true

XMLHttpRequest API

Get API