The Problem

• Your mother told your play nicely and share
• but, as an adult, you can't easily share Web resources.
• Browser security won't let you cross origins (domains) ...
• even subdomains ...
• That's not fair!
• script tags can do it! Why can't other requests?

Cross-Origin Resource Sharing (CORS)

Do as your mother told you!

• Adding a few headers to your Web resource,
• allows the consuming browser,
• to check with whom you are sharing,
• which allows you to pierce the security sandbox,
• and cross origins.

Your mother would be proud.

See CORS (wikipedia) W3C Recommendation

Access-Control-Allow-Origin Header

• A simple single header,
• declares to the consuming browser,
• what origins may share this resource.

Think: what website can access this resource.

Example

Allow all websites:

Access-Control-Allow-Origin: *            
         

Allow a specific website:

Access-Control-Allow-Origin: http://www.example.com/           
         

Local testing:

Access-Control-Allow-Origin: http://localhost:8080/            
         

Activity

CORS enable a service:

• API web server in Flask
• Consuming web app

We're going to fix the API server so it uses CORS.

Procedure for Activity

1. Run API servers:

   python api/api.py
            

2. Run the client:

   cd web; python -m SimpleHTTPServer            
            

3. Load http://localhost:8000/index.xhtml and type in "local.json" and press the button. It should load a hacked local resource.

4. Change index.xhtml to use http://localhost:5000/ as the server when UserFetch is created.

5. Use 'alex' or 'grace' as the user. It should be broken.

6. Fix it.