Giter VIP home page Giter VIP logo

cors-presentation's Introduction

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 content1.

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 โ†ฉ

cors-presentation's People

Contributors

bendera avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.