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.
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.
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
.
cdn.netbank.test
is configured correctly. The ACAO
header value is *
. It allows access from everywhere.
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 content1.
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.
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
-
You have to disable blocking of the third-party cookies in Firefox. Screenshot โฉ