CORS & WEBSOCKETS - SPRING 2019 - GitHub Pages
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
CS 498RK SPRING 2019
CORS &
WEBSOCKETS
Dealing with Same-Origin Policy
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();
What happens?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();
origin mismatch error!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 and
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 different than a normal XMLHttpRequest request
JSONP
“JSON with padding”
allows a page to receive JSON data from a different
domain by adding a element to the page
which loads a JSON response with a callback from
a different domainCreate callback function
function processJSON (json) {
// Do something with the JSON response
};
schock.net/articles/2013/02/05/how-jsonp-really-works-examples/Dynamically inject tag
function processJSON (json) {
// Do something with the JSON response
};
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 supportWebSockets
Client
MY BLOG
Server
HTTP POST
This is my first post.
ADD
API DATABASE
HTTP GET
MY BLOG
02/23/15
This is my first post.
NEWClient
MY BLOG
Server
HTTP POST
This is my first post.
ADD
API DATABASE
HTTP GET
MY BLOG
02/23/15
This is my first post.
NEW
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 streamsH ow can servers push data?
POLLING aka faking it 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
not an acronym!
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%29BROWSER 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
bidirectional full-duplex communication
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/WebSocketClient Request
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/WebSocketServer Response
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept:
HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
en.wikipedia.org/wiki/WebSocketOpen a WebSocket Connection
var connection = new WebSocket(‘ws://
html5rocks.websocket.org/echo');
www.html5rocks.com/en/tutorials/websockets/basics/Attach Event Handlers
// 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 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.ioDemo
Client Code
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('').text(msg));
});
socket.ioapp.get('/', function(req, res){ Server Code
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.ioYou can also read
