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

SPRING 2020 CS 498RK

CORS &
 WEBSOCKETS

Dealing with 
 Same-Origin Policy

application lives on llama.com and you want to pull data from www.alpaca.com

What happens?

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();

application lives on llama.com and you want to pull data from www.alpaca.com

• rigin mismatch error!

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();

SAME-ORIGIN POLICY

implemented by all major browsers

• nly web pages that have the same “origin” can access

each other’s data

• rigin = 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

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/ html5 feature

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 different than a normal XMLHttpRequest request

JSONP

allows a page to receive JSON data from a different domain by adding a <script> element to the page which loads a JSON response with a callback from a different domain

“JSON with padding”

function processJSON (json) { // Do something with the JSON response };

schock.net/articles/2013/02/05/how-jsonp-really-works-examples/

Create callback function

<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/

Dynamically inject <script> tag

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/

Server Response

CORS VS JSONP

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

Use CORS unless you need to support older browser versions

WebSockets

MY BLOG

ADD POST This is my first post.

MY BLOG

NEW POST This is my first post. 02/23/15

API DATABASE

Client Server

HTTP POST HTTP GET

MY BLOG

ADD POST This is my first post.

MY BLOG

NEW POST This is my first post. 02/23/15

API DATABASE

Client Server

HTTP POST HTTP GET

AJAX allows server requests to be made in the background

…but if clients don’t request, servers can’t respond!

What types of applications need servers to push data?

LOW-LATENCY, REAL-TIME

Multiplayer online games Chat applications Realtime updating social streams

How can servers push data?

POLLING

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

aka faking it

COMET

a set of more advanced techniques hidden iframes (i.e., forever frames) AJAX with long polling unstandardized hacks, performance issues

not an acronym!

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

WebSockets

WEBSOCKETS

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

bidirectional full-duplex communication

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

Client Request

HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat

en.wikipedia.org/wiki/WebSocket

Server Response

var connection = new WebSocket(‘ws:// html5rocks.websocket.org/echo'); Open a WebSocket Connection

www.html5rocks.com/en/tutorials/websockets/basics/

// 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/

Atuach Event Handlers

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

even if client supports it, can’t establish a connection!

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

Demo

<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

Client Code

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

Server Code