CORS & WEBSOCKETS Dealin g wit h Sam e -Origi n Polic y - PowerPoint PPT Presentation

CS 498RK SPRING 2020 CORS & 
 WEBSOCKETS

Dealin g wit h 
 Sam e -Origi n Polic y

application lives on llama.com and you want to pull data from www.alpaca.com var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://www.alpaca.com/hello.json'); xhr.onload = function(e) { var data = JSON.parse(this.response); ... } xhr.send(); Wha t happen s ?

application lives on llama.com and you want to pull data from www.alpaca.com var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://www.alpaca.com/hello.json'); xhr.onload = function(e) { var data = JSON.parse(this.response); ... } xhr.send(); origi n mismatc h erro r !

SAME-ORIGIN POLICY implemented by all major browsers only web pages that have the same “origin” can access each other’s data origin = protocol, domain name, port (some browsers) does not apply to <img> and <script>

SAME-ORIGIN POLICY … but applies to AJAX requests "Cross-domain" AJAX requests are forbidden by default because of their ability to perform advanced requests POST, PUT, DELETE and other types of HTTP requests, along with specifying custom HTTP headers introduce many security issues as described in cross-site scripting

CROSS-ORIGIN RESOURCE SHARING html5 feature CORS allows web applications on one domain to make cross domain AJAX requests to another domain. Access-Control-Allow-Origin header in HTTP responses more freedom than purely same-origin requests, but more secure than allowing all cross-origin requests http://www.html5rocks.com/en/tutorials/file/xhr2/

CORS WORKAROUND // browser sends the following request header Origin: http://llama.com // server response: give access to llama.com Access-Control-Allow-Origin: http://llama.com // give access to all domains Access-Control-Allow-Origin: *

Access-Control-Allow-Origin: * useful when a page or API is intended to be accessible to everyone, including any code on any site freely-available web fonts — Google Fonts

CORS IN ACTION //Allow CORS so that backend and frontend could be put on different servers var allowCrossDomain = function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested- With, X-HTTP-Method-Override, Content-Type, Accept"); next(); }; app.use(allowCrossDomain);

AJAX CALLS If the server endpoint has enabled CORS, making the cross-origin request is no di ff erent than a normal XMLHttpRequest request

JSONP “JSON with padding” allows a page to receive JSON data from a di ff erent domain by adding a <script> element to the page which loads a JSON response with a callback from a di ff erent domain

Create callback function function processJSON (json) { // Do something with the JSON response }; schock.net/articles/2013/02/05/how-jsonp-really-works-examples/

Dynamically inject <script> tag <script> function processJSON (json) { // Do something with the JSON response }; </script> <script src='http://api.flickr.com/services/feeds/photos_public.gne? jsoncallback=processJSON&tags=monkey&tagmode=any&format=json'></script> schock.net/articles/2013/02/05/how-jsonp-really-works-examples/

Server Response processJSON( { "title": "Recent Uploads tagged monkey", "link": "http://www.flickr.com/photos/tags/monkey/", "description": "", "modified": "2015-02-03T21:23:22Z", "generator": "http://www.flickr.com/", "items": [ // ... Much more JSON here ... ] } ) schock.net/articles/2013/02/05/how-jsonp-really-works-examples/

CORS VS JSONP Use CORS unless you need to support older browser versions Use regular XMLHttpRequest with CORS JSONP only supports GET, CORS supports other types of HTTP requests JSONP can cause cross-site scripting (XSS) issues where the external site is compromised, CORS allows websites to manually parse responses to ensure security JSONP works on legacy browsers which predate CORS support

WebSocket s

Clien t Serve r MY BLOG HTTP POST This is my first post. ADD POST API DATABASE HTTP GET MY BLOG 02/23/15 This is my first post. NEW POST

Clien t Serve r MY BLOG HTTP POST This is my first post. ADD POST API DATABASE HTTP GET MY BLOG 02/23/15 This is my first post. NEW POST AJAX allows server requests to be made in the background

…bu t if client s do n ’ t reques t , serve rs ca n ’ t respon d !

What types of applications need servers to push data?

LOW-LATENCY, REAL-TIME Multiplayer online games Chat applications Realtime updating social streams

Ho w ca n serve rs pus h dat a ?

POLLING ak a fakin g i t keep making requests to the server to see if there’s any new information performance problems: server has to process HUGE number of connections a second

COMET no t a n acrony m ! a set of more advanced techniques hidden iframes (i.e., forever frames ) AJAX with long polling unstandardized hacks, performance issues en.wikipedia.org/wiki/Comet_%28programming%29

BROWSER PLUGINS Adobe Flash, Java raw push real-time data to clients through raw TCP socket connections with servers plug-ins not guaranteed to be installed, firewall issues

WebSocket s

WEBSOCKETS bidirectiona l ful l -duple x communicatio n WebSocket API introduced in HTML5 (2009) persistent connection between the client and server send data back and forth without HTTP overhead en.wikipedia.org/wiki/WebSocket

Clien t Reques t GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Origin: http://example.com en.wikipedia.org/wiki/WebSocket

Serve r Respons e HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat en.wikipedia.org/wiki/WebSocket

Ope n a WebSocke t Connectio n var connection = new WebSocket(‘ws:// html5rocks.websocket.org/echo'); www.html5rocks.com/en/tutorials/websockets/basics/

A tu ac h Even t Handle rs // When the connection is open, send some data to the server connection.onopen = function () { connection.send(‘Lorenzo Llamas'); // Send the message ‘Lorenzo Llamas' to the server }; // Log messages from the server connection.onmessage = function (e) { console.log('Server: ' + e.data); }; // Log errors connection.onerror = function (error) {/*…*/}; // Close connection connection.onclose = function(){ /*…*/ } www.html5rocks.com/en/tutorials/websockets/basics/

CROSS ORIGIN COMMUNICATION supports communication between clients and servers on any domain server decides which domains to allow connections from www.html5rocks.com/en/tutorials/websockets/basics/

PROBLEMS Immediate security concerns (Opera 11, Safari 5) Protocol was revamped and now supported by all modern browsers Incompatibility with HTTP upgrade system and some proxy servers eve n if clien t suppo r t s i t , ca n ’ t establis h a connectio n !

WEBSOCKETS TODAY use libraries that use earlier fallbacks whenever WebSocket is not available socket.io

Socket.IO

If at first you don’t succeed… WebSockets Adobe Flash Socket Ajax long polling Ajax multipart streaming Forever iFrame JSONP Polling

“Socket.IO enables real-time bidirectional event-based communication. It works on every platform, browser or device, focusing equally on reliability and speed.” socket.io

Dem o

Clien t Cod e <script> var socket = io(); $('form').submit(function(){ socket.emit('chat message', $('#m').val()); $('#m').val(''); return false; }); socket.on('chat message', function(msg){ $('#messages').append($('<li>').text(msg)); }); </script> socket.io

Serve r Cod e app.get('/', function(req, res){ res.sendfile('index.html'); }); io.on('connection', function(socket){ socket.on('chat message', function(msg){ io.emit('chat message', msg); }); }); http.listen(3000, function(){ console.log('listening on *:3000'); }); socket.io