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 discuss your findings with the class, and the rest of the group should help that member prepare their response. Answer each question individually from the activity, and compare with your group to prepare for our whole-class discussion. After class, think about the questions in the reflective prompt and respond to those individually in your notebook. 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

I encourage you to submit your answers to the questions (and ask your own questions!) using the Class Activity Questions discussion board. You may also respond to questions or comments made by others, or ask follow-up questions there. Answer any reflective prompt questions in the Reflective Journal section of your OneNote Classroom personal section. You can find the link to the class notebook on the syllabus.