In the web application security model, the same-origin policy is an important concept. The basic principle is that content provided by unrelated websites must be strictly separated on the client side; otherwise, confidentiality or data integrity might be compromised, perhaps through cross-site scripting attacks. In other words, web pages or scripts running on pages can only access scripts or pages from the same domain as they came from; no access to other sites is allowed. For example, http://www.example.com/dir/page2.html cannot access http://en.example.com/dir/other.html. However, in a number of cases, this is too strict, as in AJAX calls with HttpRequest we have to load data from another server (refer to Chapter 7, Working with Web Servers). To make this possible, the CORS mechanism (cross-origin resource sharing) was developed, which is supported by most modern web browsers. This recipe will enable you to easily achieve this by performing the following steps.
The following steps show how you can configure your web server to add CORS headers:
- When a web server sends CORS headers back in the response, the client is also allowed to send requests to servers in other domains. So in every request handling code, we must add a call to a method such as
addCorsHeadersas shown in the following code:void handleGet(HttpRequest request) { HttpResponse res = request.response; addCorsHeaders(res); // other code to prepare the response // … res.write(content); res.close(); } - Now we need to define the
addCorsHeadersmethod; it contains the following code:void addCorsHeaders(HttpResponse response) { response.headers.add('Access-Control-Allow-Origin', '*, '), response.headers.add('Access-Control-Allow-Methods', 'POST, OPTIONS'), response.headers.add('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'), }
All CORS-related headers are prefixed with Access-Control-. The Access-Control-Allow-Origin option has to be included in all valid CORS responses. The value * means that access is allowed from all domains. In development, this can be useful so that you can run apps from Dart Editor, which uses a 3030 port by default for its internal server. However, for a production application, you should sum up the allowed origins as follows:
- Access-Control-Allow-Origin at
http://www.example-social-network.com - Access-Control-Allow-Origin at http://www.snapshot.com
So, effectively, we name all the websites to which access is allowed. In our code, the POST and OPTIONS requests are allowed from any origin. An OPTIONS request is sent to get permission from the server to post data, in case the client is running from a different origin. So before the POST request, a so-called preflighted OPTIONS request is sent to determine if the actual request is allowed.
Refer to http://enable-cors.org/server.html for more detailed information on using CORS on different platforms.