今さら聞けないSPAのCORS対策の話

Slide 1

Slide 1 text

今さら聞けないSPAのCORS対策の話 Making SPA with thinking about CORS @sota1235

Slide 2

Slide 2 text

console.log(me) • Sota Sugiura • @sota1235 • Mercari, Inc. • My dream is to be JavaScript

Slide 3

Slide 3 text

By the way

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

In this talk… • You can understand… • How Browser will work for CORS • Which HTTP headers should be provided for SPA • How we can manage cookie or some credential informations

Slide 6

Slide 6 text

CORS

Slide 7

Slide 7 text

Cross Origin Resource Sharing

Slide 8

Slide 8 text

Cross Origin Resource Sharing

Slide 9

Slide 9 text

What’s origin?

Slide 10

Slide 10 text

Origin • Deﬁned from 3 part • Scheme • Host • Port

Slide 11

Slide 11 text

Origin https://example.com:80

Slide 12

Slide 12 text

Origin https://example.com:80 Scheme Host Port

Slide 13

Slide 13 text

Origin https://example.com:80 http://example.com:80

Slide 14

Slide 14 text

Origin https://example.com:80 http://example.com:80 Different scheme

Slide 15

Slide 15 text

Origin https://example.com:80 http://example.com:80 Different scheme then different Origin

Slide 16

Slide 16 text

Origin ! IUUQTIPHFDPN IUUQTIPHFDPNGVHBIUNM IUUQTIPHFDPN IUUQIPHFDPN IUUQIPHFDPN IUUQIPHFDPN IUUQIPHFDPN IUUQNPHFIPHFDPN

Slide 17

Slide 17 text

Origin for what?

Slide 18

Slide 18 text

Same Origin Policy

Slide 19

Slide 19 text

Same Origin Policy • Controlling interactions between different origins • The content in the origin will be protected from other origin • Important feature for security

Slide 20

Slide 20 text

SOP for… • XMLHttpRequest • Fetch API • Images drawn on Canvas • and so on

Slide 21

Slide 21 text

Cross Origin Fetch API http://localhost:9000 http://localhost:8000

Slide 22

Slide 22 text

Cross Origin Fetch API http://localhost:9000 http://localhost:8000 #SPXTFS "1*

Slide 23

Slide 23 text

Cross Origin Fetch API http://localhost:9000 http://localhost:8000 /PUTBNF0SJHJO

Slide 24

Slide 24 text

Cross Origin Fetch API http://localhost:9000 http://localhost:8000 )551(&5

Slide 25

Slide 25 text

Cross Origin Fetch API http://localhost:9000 http://localhost:8000 const apiServer = 'http://localhost:8000'; fetch(apiServer) .then(res => { console.log(res); }) .catch(err => { // Do nothing }); )551(&5

Slide 26

Slide 26 text

Error occurred

Slide 27

Slide 27 text

What happened? • Browser blocked JavaScript to get HTTP response Resource Access Response

Slide 28

Slide 28 text

What happened? • Browser blocked JavaScript to get HTTP response • Even if server returns response Resource Access Response

Slide 29

Slide 29 text

It’s SOP • Some requests are rejected if target origin is different from current origin • Even if server send response, browser will hide data from JavaScript access

Slide 30

Slide 30 text

So, CORS

Slide 31

Slide 31 text

CORS • Accessing to different origin with CORS • Controlling access permission with HTTP headers • Made for more ﬂexible frontend interuction

Slide 32

Slide 32 text

Cross Origin http://localhost:9000 http://localhost:8000

Slide 33

Slide 33 text

Cross Origin http://localhost:9000 http://localhost:8000 const apiServer = 'http://localhost:8000'; fetch(apiServer) .then(res => { console.log(res); }) .catch(err => { // Do nothing });

Slide 34

Slide 34 text

Cross Origin http://localhost:9000 http://localhost:8000 const http = require('http'); const PORT = 8000; const makeResForCORS = (response) => { response.setHeader( 'Access-Control-Allow-Origin', '*' ); }; const server = http.createServer((req, res) => { makeResForCORS(res); res.end('hello'); }); server.listen(PORT, () => { console.log(`Listening on ${PORT}`); });

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Cross Origin http://localhost:9000 http://localhost:8000 )551(&5 const apiServer = 'http://localhost:8000'; fetch(apiServer) .then(res => { console.log(res); }) .catch(err => { // Do nothing });

Slide 37

Slide 37 text

Cross Origin http://localhost:9000 http://localhost:8000 )5510, HTTP/1.1 200 OK Access-Control-Allow-Origin: * Date: Fri, 24 Nov 2017 08:41:45 GMT Connection: keep-alive Content-Length: 5 hello

Slide 38

Slide 38 text

Cross Origin http://localhost:9000 http://localhost:8000 )5510, HTTP/1.1 200 OK Access-Control-Allow-Origin: * Date: Fri, 24 Nov 2017 08:41:45 GMT Connection: keep-alive Content-Length: 5 hello

Slide 39

Slide 39 text

Cross Origin http://localhost:9000 http://localhost:8000 )5510, HTTP/1.1 200 OK Access-Control-Allow-Origin: * Date: Fri, 24 Nov 2017 08:41:45 GMT Connection: keep-alive Content-Length: 5 hello "MMPXBDDFTTJOHGSPNBOZPSJHJOT

Slide 40

Slide 40 text

Specify more details • Access-Control-Allow-Origin • Origin which can access to resourse • Access-Control-Allow-Methods • HTTP methods client can use for cross origin access • and so on - I will explain others later :)

Slide 41

Slide 41 text

Recap • Same Origin Policy • Security structure for protecting resource • CORS • You should set up for servers if you want to share resource across not same Origins

Slide 42

Slide 42 text

BTW, Today’s theme is CORS with SPA

Slide 43

Slide 43 text

Do you have these experiences? • Set Access-Control-Allow-Origin: * without any thinking • Using preﬂight, but it is not clear… • Creating SPA without understanding about CORS and other techniques around it

Slide 44

Slide 44 text

Not good

Slide 45

Slide 45 text

We need to understand • CORS • preﬂight • Ajax with credentials • When we understand, we can explain it to server side engineer by own

Slide 46

Slide 46 text

Let’s make sample SPA • API and static site Origins are different • We want to manage user session in some way • We want to make cross origin access more secure and more good performance

Slide 47

Slide 47 text

Let’s make sample SPA http://localhost:9000 http://localhost:8000 眢 4FDVSF 眢 ,FFQVTFSTFTTJPO 眢 (PPEQFSGPSNBODF #SPXTFS "1*

Slide 48

Slide 48 text

Step 1 - Cross Origin Step 2 - User Session Step 3 - Optimize performance

Slide 49

Slide 49 text

Step 1 - Cross Origin • Set up for CORS access • At least you need to set 3 kinds of headers • The value of headers depends on your application architecture

Slide 50

Slide 50 text

You should specify • Access-Control-Allow-Origin • Origin which can access to resourse • Access-Control-Allow-Methods • HTTP methods client can use • Access-Control-Expose-Headers • HTTP headers client can send to server

Slide 51

Slide 51 text

Set headers const http = require('http'); const PORT = 8000; const makeResForCORS = (response) => { response.setHeader('Access-Control-Allow-Origin', 'http://localhost:9000'); response.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,PATCH,OPTIONS'); response.setHeader('Access-Control-Expose-Headers', 'X-Custom-Header,X-Node-Festival'); }; const server = http.createServer((req, res) => { makeResForCORS(res); res.end('hello'); }); server.listen(PORT, () => { console.log(`Listening on ${PORT}`); });

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Step 2 - User Session • Want to identify user on server side • Authentication, permission • Controlling access to some endpoints

Slide 54

Slide 54 text

How to mange session? • Access token? • Cookie? • Or other way?

Slide 55

Slide 55 text

Access Token? • Save in anywhere? • Local Storage? Or something like it? accessToken=abcd1234

Slide 56

Slide 56 text

Not best • If there is XSS, it will be stolen easily • We have no way to protect local data from JavaScript • And it is not easy to implement • Is will be expired or not? • How to implement sign in/sign out logic?

Slide 57

Slide 57 text

Cookie is better way • We don’t need to implement special logic • We can protect cookie from XSS • Surely, we MUST use https

Slide 58

Slide 58 text

Do you worry document.cookie? • You MUST set this header • Set-Cookie: HttpOnly; Secure; • HttpOnly - Cookie won’t be accessed from JavaScript • Secure - Cookie will be sent on only HTTPS connection

Slide 59

Slide 59 text

Let’s use cookie! But… 5IFSFJTOPcookieIFBEFS

Slide 60

Slide 60 text

Ajax with credentials • When you want to send credentials such as cookie, you need to specify option • Server also need to specify that credentials is allowed to sent

Slide 61

Slide 61 text

Ajax with credentials const apiServer = 'http://localhost:8000'; // Fetch API fetch(apiServer, { credentials: 'include', }) .then(res => { console.log(res); }) .catch(err => { // Do nothing }); // XMLHttpRequest const xhr = new XMLHttpRequest(); xhr.open('GET', apiServer, true); xhr.withCredentials = true; xhr.onload = (res) => { console.log(res); }; xhr.send();

Slide 62

Slide 62 text

Ajax with credentials const apiServer = 'http://localhost:8000'; // Fetch API fetch(apiServer, { credentials: 'include', }) .then(res => { console.log(res); }) .catch(err => { // Do nothing }); // XHLHttpRequest const xhr = new XMLHttpRequest(); xhr.open('GET', apiServer, true); xhr.withCredentials = true; xhr.onload = (res) => { console.log(res); }; xhr.send();

Slide 63

Slide 63 text

Server side for sending credentials const http = require('http'); const PORT = 8000; const makeResForCORS = (response) => { response.setHeader('Access-Control-Allow-Origin', '*'); response.setHeader('Access-Control-Allow-Credentials', 'true'); }; const server = http.createServer((req, res) => { makeResForCORS(res); res.end('hello'); }); server.listen(PORT, () => { console.log(`Listening on ${PORT}`); });

Slide 64

Slide 64 text

Slide 65

Slide 65 text

mmm, still not perfect

Slide 66

Slide 66 text

“*” is dead… • You can’t define ‘*’ for Access-Control- Allow-Origin • Even if you don’t send credentials cross origin, ‘*’ does not make sense • Also for security, let’s define specific origin!

Slide 67

Slide 67 text

Server side for sending credentials const http = require('http'); const PORT = 8000; const makeResForCORS = (response) => { response.setHeader('Access-Control-Allow-Origin', 'http://localhost:9000'); response.setHeader('Access-Control-Allow-Credentials', 'true'); }; const server = http.createServer((req, res) => { makeResForCORS(res); res.end('hello'); }); server.listen(PORT, () => { console.log(`Listening on ${PORT}`); });

Slide 68

Slide 68 text

Step 3 - Optimize performance • Before optimizing your application’s performance, you need to know about preﬂight request

Slide 69

Slide 69 text

Preﬂight Request • Pre request before accessing to other origin • It is sent by browser automatically • It means if browser send preﬂight request, it takes 2RTT to access to the resource

Slide 70

Slide 70 text

Request Flow 015*0/4 $034JOGPSNBUJPO ① Preﬂight Request (&5 3FTQPOTF

Slide 71

Slide 71 text

Request Flow 015*0/4 $034JOGPSNBUJPO ② Request you want to send (&5 3FTQPOTF

Slide 72

Slide 72 text

Preﬂight Request OPTIONS / HTTP/1.1 Host: localhost:8000 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ 62.0.3202.94 Safari/537.3620081130 Minefield/3.1b3pre Accept: */* Accept-Language: ja,en-US;q=0.9,en;q=0.8 Accept-Encoding: gzip, deflate, br Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Connection: keep-alive Origin: http://localhost:9000  Referer: http://localhost:9000/ Access-Control-Request-Method: PUT Access-Control-Request-Headers: x-custom-header

Slide 73

Slide 73 text

Slide 74

Slide 74 text

Slide 75

Slide 75 text

Response for Preﬂight HTTP/1.1 200 OK Access-Control-Allow-Origin: http://localhost:9000 Access-Control-Allow-Methods: GET,POST,PUT,DELETE,PATCH,OPTIONS Access-Control-Allow-Headers: X-Custom-Header,X-Node- Festival Access-Control-Allow-Credentials: true Access-Control-Max-Age: 100 Date: Fri, 24 Nov 2017 17:23:24 GMT Connection: keep-alive

Slide 76

Slide 76 text

Slide 77

Slide 77 text

When? • When you want to use speciﬁc HTTP methods • ex) PUT, DELETE, PATCH, OPTIONS • When you want to use custom HTTP header • When you want to specify Content-Type header except some values

Slide 78

Slide 78 text

Then, how to optimize?

Slide 79

Slide 79 text

–Sota Sugiura l/PUIJOHJTUIFCFTUBSDIJUFDUVSFGPS BQQMJDBUJPO`TQFSGPSNBODFz

Slide 80

Slide 80 text

Decreasing latency • Let’s make your app 2RTT to 1RTT • Use only GET, POST method • Not using custom HTTP headers • Set speciﬁc value to Content-Type

Slide 81

Slide 81 text

Do not forget CSRF • If you avoid using preﬂight, you need to consider about CSRF • Even if browser protect resource from JavaScript, request will be sent to server Bad Request Response

Slide 82

Slide 82 text

For CSRF • Adding origin checking on server • Using preﬂight request • The thing you should think about is not to exec request before any checking

Slide 83

Slide 83 text

CSRF http://localhost:10000 http://localhost:8000 #BE3FRVFTU

Slide 84

Slide 84 text

CSRF http://localhost:10000 http://localhost:8000 #BE3FRVFTU const http = require('http'); const PORT = 8000; const TARGET_ORIGIN = 'http://localhost:9000'; const makeResForCORS = (response) => { response.setHeader( 'Access-Control-Allow-Origin', TARGET_ORIGIN ); }; const server = http.createServer((req, res) => { makeResForCORS(res); if (req.headers.origin !== TARGET_ORIGIN) { res.end('invalid request'); return; } res.end('hello'); }); server.listen(PORT, () => { console.log(`Listening on ${PORT}`); });

Slide 85

Slide 85 text

Slide 86

Slide 86 text

You need to use preflight? • In some case, you can’t avoid using preflight request • Don’t worry, you can optimize around preflight request

Slide 87

Slide 87 text

Cache Preﬂight http://localhost:9000 http://localhost:8000 1SFGMJHIU const apiServer = 'http://localhost:8000'; fetch(apiServer) .then(res => { console.log(res); }) .catch(err => { // Do nothing });

Slide 88

Slide 88 text

Cache Preﬂight http://localhost:9000 http://localhost:8000 3FTQPOTF HTTP/1.1 200 OK Access-Control-Allow-Origin: http:// localhost:9000 Access-Control-Allow-Methods: GET,POST,PUT,DELETE,PATCH,OPTIONS Access-Control-Allow-Headers: X- Custom-Header,X-Node-Festival Access-Control-Allow-Credentials: true Access-Control-Max-Age: 100 Date: Fri, 24 Nov 2017 17:23:24 GMT Connection: keep-alive

Slide 89

Slide 89 text

Slide 90

Slide 90 text

Slide 91

Slide 91 text

Access-Control-Max-Age • You can let browser to cache preﬂight result • But max cache time is limited • Chrome - 10 minutes • Firefox - 24 hours • Specify value for your app’s spec

Slide 92

Slide 92 text

That’s all • ✅ Basic settings for CORS • ✅ Ajax with credentials • ✅ Avoid using Preﬂight Request • ✅ Or cache request for optimizing

Slide 93

Slide 93 text

Summary • CORS is for interactions between different Origins • When you write frontend code like SPA… • You need to understand around CORS • You can optimize communication with different origin

Slide 94

Slide 94 text

Thank you