Data Virtualization Tutorial… CORS and CIS Hello, and welcome to the Tutorial series for Cisco Information Server, or CIS. Tutorials are brief instructional videos that demonstrate specific features of CIS. In this Tutorial, we discuss using Cross-Origin Resource Sharing, or CORS, with CIS.

Agenda What is it and why does it matter? A basic demo Summary Here is our agenda. We begin by defining CORS and outlining its importance for our customers. Next we walk through a very basic demo of using CORS with CIS. Finally, we summarize the contents of this demoette.

Agenda What is it and why does it matter? A basic demo Summary Let’s begin by discussing what CORS is, and why it is important for our customers.

What is it? CORS Cross-Origin Resource Sharing HTTP security standard for scripts and other operations Applies to script operations like XMLHttpRequest Servers may permit or deny CORS requests Does not apply to simple requests like <img> src “Simple” requests (GET, HEAD, POST) execute in one step Other requests must be “pre-flighted” using OPTIONS CORS stands for Cross-Origin Resource Sharing. It is an HTTP security standard for scripts and certain other operations on web pages. We will be concentrating on script operations in this tutorial. A CORS request occurs when a web page served from Server A to a browser requests a resource from Server B, typically via an XMLHttpRequest operation in a script executing in the browser. In this scenario, Server B can decide whether to permit or deny the request. Note that CORS rules do not apply to simple HTML operations like retrieving an image from a different server. CORS is mainly used to help secure AJAX-like scripting operations that request resources from a different server. CORS requests are divided into two broad categories. HTTP GET, HEAD, and POST operations are considered “simple” requests which can execute in a one-step operation. All other HTTP operations, like PUT and DELETE, must execute a “pre-flight” validation step before making the actual request.

Why does it matter? CORS Customers serve HTML template pages from a web server in one domain… … and then populate these pages with REST resources from served from a CIS instance. The primary use case for CORS with CIS is to enable customers to serve web page templates from a corporate or public web server, and then populate these template pages with specific data requested via REST requests to a CIS instance.

Agenda What is it and why does it matter? A basic demo Summary Next, let’s walk through a very basic demo of CORS with CIS.

Demo: Here is the business problem… 1 2 Here is the business problem that we illustrate in this demo. We need to serve a web page to end users. However, this web page is not complete. It requires data from a CIS instance. Once the web page is loaded into the browser, it will request this data from a CIS instance. CIS will enable CORS in order to permit this pattern. Web Server

Before you begin Before you begin this demo, you will need a web service operation that will provide data. Find the LookupProduct procedure in the CIS examples folder… <CLICK> … and publish it to a web service endpoint called Demoette_CORS, as shown here. <CLICK> If you have run this demo previously, be sure to open the CIS configuration dialog and reset all the CORS values back to their defaults.

Demo: Understand the CIS Web Service LookupProduct is a simple procedure in the examples folder in Studio.

Demo: Understand the CIS Web Service It accepts a parameter that specifies a Product ID… <CLICK> … and returns data for that product. <CLICK> We publish it as a RESTful web service. <CLICK> When we execute it in a browser, we are challenged for User ID and Password… <CLICK> … and the data is returned in XML format. This is the data we want to incorporate into a web page served from another domain.

Demo: Configure CIS CORS Next, let’s check the CORS configuration in CIS Studio. By default, CORS is enabled for requests from any domain. There are two key settings here. <CLICK> Allow Credentials must be set to true. If it is set to false, CORS is disabled. <CLICK> Allowed Origins defaults to star, which means any domain may make a CORS request to CIS. <CLICK> We’ll make just one change to the default settings. In order to restrict CORS access, we’ll change the Allowed Origins parameter from star to just one domain: the URL shown here. If desired, we can add more domains by creating a comma-separated list.

Demo: Using cURL We can learn a lot about CORS by exploring it with the Curl utility. Here we use the –H parameter to simulate an origin of our public URL. We’re going to create a pre-flight request, even though pre-flight is not required for HTTP GET operations. This will help us understand how CORS works with HTTP Headers. <CLICK> We create the Access-Control-Request Method header, specifying a value of GET… <CLICK> … and the Access-Control-Request-Header, specifying a value of X-Requested-With. These are required for CORS. <CLICK> The dash X Options parameter specifies that this is a pre-flight request. <CLICK> CIS responds with the header information shown here, indicating that the CORS request is valid and will be permitted.

Demo: Using cURL Now let’s try an invalid request. We specify an origin of cisco.com, which is not on the permitted list of domains in our CIS configuration. <CLICK> This time, CIS does not return any header information, indicating that our request is invalid and will be denied.

Demo: Using cURL Now that we have seen pre-flight requests, we’ll try actual requests. When we specify an origin of our public URL… <CLICK> … data is returned as expected. <CLICK> But with an invalid origin of cisco.com… <CLICK> … data is still returned. This is not a problem with CIS. It is a limitation of Curl. If we want to explore CORS more thoroughly, we’ll need to use an actual web page.

Demo: Using HTML and JavaScript A general-purpose web page for testing CORS is available at the URL shown here. We are running in Chrome. <CLICK> It defaults to calling our demo web service on localhost. However, you can change it to any URL you want. Note that it uses port 9400, which is the default setting for CIS. If you are not using the default setting, be sure to change the port. By using localhost as the CIS instance, you can use this web page to test CORS functionality on any CIS web service you build. <CLICK> Click Test.

Demo: Using HTML and JavaScript And the web service results from CIS are displayed.

Demo: Using HTML and JavaScript Let’s take a quick look at the JavaScript that executes when the Test button is clicked. <CLICK> The script creates a new XMLHttpRequest object.. <CLICK> … opens it… <CLICK> … and sends the request. <CLICK> This event listener waits for the request to complete, and then populates the page with the results from CIS.

Demo: Using HTML and JavaScript We can see more details by opening up the browser’s development environment. <CLICK> From the Chrome kebab menu button, select More tools… <CLICK> … then Developer tools.

Demo: Using HTML and JavaScript Open the Console… <CLICK> … and Network windows… <CLICK> … run the test… <CLICK> … click on the test name…. <CLICK> … and the headers are shown. <CLICK> You may also want to disable the browser cache while testing. Note that the cache is only disabled when the developer tools are running.

Demo: Using HTML and JavaScript Now let’s set up a browser request that will fail due to CIS security restrictions. In the CIS Configuration dialog, change the Allowed-Origins setting to Cisco.com.

Demo: Using HTML and JavaScript Now run the test again, and select the new test instance. <CLICK> An error message now appears on the console, saying that the Origin 45.55.39.205 is not allowed access.

Demo: Using HTML and JavaScript Change the CIS Allowed Origin back to our public URL… <CLICK> … and the test runs successfully again.

Demo: Using HTML and JavaScript Next, let’s use the test page to define a custom header for the HTTP request. We name the header Demo-Header, and give it a value of 123. <CLICK> The request fails, and the console shows us this error message.

Demo: Using HTML and JavaScript Return to the CORS configuration in CIS, and add Demo-Header to the list of allowed headers. <CLICK> Run the test again, and it succeeds.

Demo: Using HTML and JavaScript Finally, let’s consider browsers other than Chrome. The test page works successfully in Firefox.

Demo: Using HTML and JavaScript However, the page fails in Internet Explorer. Microsoft handles CORS differently than other browsers, and different coding is required with the XMLHttpRequest. This coding is beyond the scope of this tutorial. We have examined basic CORS functionality in CIS, and provided a general-purpose testing tool. Our tutorial is complete.

Agenda What is it and why does it matter? A basic demo Summary Let’s summarize what we have seen in this presentation.

Summary Cross-Origin Resource Sharing HTTP security standard for scripts and other operations Applies to script operations like XMLHttpRequest Servers may permit or deny CORS requests Does not apply to simple requests like <img> src “Simple” requests (GET, HEAD, POST) execute in one step Other requests must be “pre-flighted” using OPTIONS Customers serve HTML template pages from a web server in one domain… … and then populate these pages with REST resources from served from a CIS instance. CORS stands for Cross-Origin Resource Sharing. It is an HTTP security standard for scripts and certain other operations on web pages. A CORS request occurs when a web page served from Server A to a browser requests a resource from Server B, typically via an XMLHttpRequest operation in a script executing in the browser. In this scenario, Server B can decide whether to permit or deny the request. Note that CORS rules do not apply to simple HTML operations like retrieving an image from a different server. CORS is mainly used to help secure AJAX-like scripting operations that request resources from a different server. CORS requests are divided into two broad categories. HTTP GET, HEAD, and POST operations are considered “simple” requests which can execute in a one-step operation. All other HTTP operations, like PUT and DELETE, must execute a “pre-flight” validation step before making the actual request. The primary use case for CORS with CIS is to enable customers to serve web page templates from a corporate or public web server, and then populate these template pages with specific data requested via REST requests to a CIS instance. Thank you.

TOMORROW starts here.