Web and Mobile Development - Cross-Origin Resource Sharing

Activity Goals

The goals of this activity are:

1. To explain why CORS is necessary
2. To enable CORS on a per-domain basis

Supplemental Reading

Feel free to visit these resources for supplemental background reading material.

• CORS

The Activity

Directions

Consider the activity models and answer the questions provided. First reflect on these questions on your own briefly, before discussing and comparing your thoughts with your group. Appoint one member of your group to take notes for the group, and appoint another member to discuss your findings with the class. After class, think about the questions in the reflective prompt and respond to those individually. Report out on areas of disagreement or items for which you and your group identified alternative approaches. Write down and report out questions you encountered along the way for group discussion.

---

Model 1: CORS

// From: https://enable-cors.org/server_expressjs.html
// A simple and insecure example to allow all CORS requests
// Add this to your express server's index.js
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*"); // update to match the domain you will make the request from
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
  next(); // what does this do?
});

// From: https://expressjs.com/en/resources/middleware/cors.html
// Shared under a Creative Commons BY-SA license: http://creativecommons.org/licenses/by-sa/3.0/us/
var express = require('express')
var cors = require('cors')
var app = express()

var allowlist = ['http://example1.com', 'http://example2.com']
var corsOptionsDelegate = function (req, callback) {
  var corsOptions;
  if (allowlist.indexOf(req.header('Origin')) !== -1) {
    corsOptions = { origin: true } // reflect (enable) the requested origin in the CORS response, sending a Access-Control-Allow-Origin header
  } else {
    corsOptions = { origin: false } // disable CORS for this request
  }
  callback(null, corsOptions) // callback expects two parameters: error and options
}

app.get('/products/:id', cors(corsOptionsDelegate), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for an allowed domain.'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

Questions

1. What is the danger of allowing cross-site web calls via JavaScript from a webpage?
2. When accessing a resource from a web browser, like posting to a form on another server, you may receive a Cross-Domain error from your browser. What header is passed with the HTTP request to specify the originating host, and what header is sent to allow CORS in the response?
3. How does the header change if you are enabling access to one or more specific hosts, rather than any?
4. What functions are called when an endpoint is accessed to verify CORS for a particular host?
5. In what variable of the web request object can the accessing hostname be found?

---

Submission

Submit your answers to the questions using the Collaborative Spaces section of OneNote. You can add a page with your name and your group members' names, and today's date, as the title. Under the appropriate section (i.e., "Class Notes", "Collaborative Spaces", "Reflective Prompts") that you can select on the left side of the screen, you can click "Add Page" on the right side. You can answer any reflective prompt questions in the Reflective Journal section of your OneNote Classroom personal section.