https://github.com/bendera/cors-presentation
https://github.com/bendera/cors-presentation
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bendera/cors-presentation
- Owner: bendera
- Created: 2020-02-20T23:32:14.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T11:07:04.000Z (almost 3 years ago)
- Last Synced: 2025-02-10T03:42:18.067Z (11 months ago)
- Language: HTML
- Size: 4.03 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://www.npmjs.com/package/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[^1].
### 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.
[^1]: You have to disable blocking of the third-party cookies in Firefox. [Screenshot](ff.png)