bendera / cors-presentation

CORS Policy demo

This is a sample application to demonstrate the CORS policy capabilities. It contains four websites/web services which are the following:

netbank.test

An imaginary banking SPA where "protected" content can be accessed after login. The user/password is `admin/admin`.

cdn.netbank.test

Static assets for the _netbank_ site like fonts, images, etc.

api.netbank.test

The backend service for the _netbank_ site.

freeiphone.test

A malicious site that try to steal the sensitive data of the _netbank_ users.

Installation and setup

Install chalet globally. This is a proxy server that you can create custom domains on your own machine.

npm i -g chalet

Run npm ci in each directory under the packages folder. Or run lerna bootstrap from the root directory if it is installed.

Run chalet add \"npm run serve\" in each directory under the packages folder. This will add chalet configuration for each site.

Set chalet up as a proxy server. The automatic config url is: http://localhost:2000/proxy.pac If you work in a restricted environment where modifying the proxy settings is forbidden, use the Firefox since it has its own proxy settings.

The chalet's admin can be accessible at https://chalet.test.

Branches

examples/no-cors

CORS policy is not configured at all. The netbank site is ugly, since the web fonts cannot be downloaded. Another issue is the visible network error because the browser rejects all requests to api.netbank.test from netbank.test.

examples/cors-cdn

cdn.netbank.test is configured correctly. The ACAO header value is *. It allows access from everywhere.

examples/misconfigured-cors

The * value is only applicable for requests without credentials. Unfortunatelly only one origin can be defined in the ACAO header. The (not too smart) solution is echoing the content of the origin header in the ACAO. However, with this, the malicious freeiphone.test site can access the protected content¹.

examples/cors-api

Echoing only the whitelisted origins in the api.netbank.test ACAO, however the browser doesn't keep the session. The reason is that, the credentials parameter is not set in the fetch request.

examples/preflight-request

The fetch API called with the credentials parameter. The browser automatically sends an OPTIONS request to the server to ask the server capabilities, before the POST request.

Footnotes

1. You have to disable blocking of the third-party cookies in Firefox. Screenshot ↩