02. Web browsers and Web applications Nataliia Bielova - - PowerPoint PPT Presentation

▶
02 web browsers and web applications
SMART_READER_LITE
LIVE PREVIEW

02. Web browsers and Web applications Nataliia Bielova - - PowerPoint PPT Presentation

Sep 11, 2022 271 likes •648 views

02. Web browsers and Web applications Nataliia Bielova @nataliabielova September 17 th , 2018 Web Privacy course University of Trento Today s class What is Web

slide-1
SLIDE 1
  • 02. ¡Web ¡browsers ¡and ¡

Web ¡applications ¡

Nataliia ¡Bielova ¡ @nataliabielova September ¡17th, ¡2018 Web ¡Privacy ¡course University ¡of ¡Trento

slide-2
SLIDE 2

Today’s class

  • What ¡is ¡Web ¡browser ¡and ¡how ¡does ¡it ¡work?
  • Web ¡application ¡architecture
  • Cookies ¡and ¡JavaScript
  • Basic ¡browser ¡security ¡mechanisms

§ Same ¡Origin ¡Policy

2

slide-3
SLIDE 3

Web evolution

3

1990 ¡Static ¡web 1995 ¡Dynamic ¡web 2000 ¡Web ¡2.0

See ¡more ¡http://www.evolutionoftheweb.com

Slide ¡of ¡Tamara ¡Rezk

slide-4
SLIDE 4

Web Applications are everywhere

  • Users ¡generate ¡data ¡

while ¡using ¡applications

§ Identity ¡ § Preferences, ¡tastes § Financial ¡situation § Social ¡life

4

Bank Social ¡ Network E-­‑mail ¡ Service Photo ¡ Editing

Slide ¡of ¡Tamara ¡Rezk

slide-5
SLIDE 5

HTTP: HyperText Transfer Protocol

Web ¡browser Web ¡server

HTTP request

URL ¡path: ¡bbc.co.uk/news Parameters Method: ¡GET …

HTTP ¡response

Status: ¡200 ¡OK Content: ¡HTML ¡page …

  • ­‑ Mapping ¡requests ¡to ¡apps
  • ­‑ Contacting ¡DBs
  • ­‑ Constructing ¡responses
  • ­‑ Rendering ¡pages
  • ­‑ Executing ¡scripts/plugins ¡

(JavaScript)

  • ­‑ Launching ¡new ¡HTTP ¡requests

5

slide-6
SLIDE 6

HTTP: HyperText Transfer Protocol

  • HTTP ¡important ¡characteristic: ¡no ¡State ¡ ¡

request/response ¡-­‑ each ¡request ¡is ¡ independent

  • HTTP ¡header: ¡header ¡section ¡of ¡requests ¡and ¡

responses, ¡parameters ¡of ¡the ¡HTTP ¡ transaction

Slide ¡of ¡Tamara ¡Rezk

slide-7
SLIDE 7

HTTP Request

GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 Accept: text/html, */* Accept-Language: en-us Accept-Charset: ISO-8859-1,utf- 8 Connection: keep-alive blank ¡line URL Protocol ¡Version Method Headers Body (optional)

Slide ¡of ¡Tamara ¡Rezk

slide-8
SLIDE 8

HTTP Response

HTTP/1.1 200 OK Date: Thu, 24 Jul 2008 17:36:27 GMT Server: Apache-Coyote/1.1 Content-Type: text/html;charset=UTF- 8 Content-Length: 1846 blank ¡line <html> ... </html> Status Status ¡Message Version Headers Body

Slide ¡of ¡Tamara ¡Rezk

slide-9
SLIDE 9

Uniform Resource Locators (URLs)

http://www.company.com:81/a/b/c.html?user=Alice&year=2008#p2

Scheme Host ¡Name Port ¡Number Hierarchical ¡portion Query Fragment

Slide ¡of ¡Tamara ¡Rezk

slide-10
SLIDE 10

How to keep state in Web applications?

10

slide-11
SLIDE 11

HTTP: Session in URL Example

http://www.buy.com http://www.buy.com/shopping.cfm?pID=269

see ¡catalog

http://www.buy.com/shopping.cfm?pID=269&item=40002

select ¡item

http://www.buy.com/checkout.cfm?pID=269&item=40002

buy ¡item

Since ¡HTTP ¡is ¡stateless ¡all ¡session ¡information ¡is ¡saved ¡in ¡the ¡URL!

Thanks ¡Ricardo ¡Corin ¡for ¡this ¡slide

Slide ¡of ¡Tamara ¡Rezk

slide-12
SLIDE 12

HTTP: Session in cookies

Web ¡browser Web ¡server

HTTP request

URL ¡path: ¡bbc.co.uk/news Parameters Method: ¡GET …

HTTP ¡response

Status: ¡200 ¡OK Content: ¡HTML ¡page Set-­‑cookies: ¡session-­‑id=2082787201l & ¡… …

12

slide-13
SLIDE 13

HTTP: Session in cookies

Web ¡browser Web ¡server

HTTP request

URL ¡path: ¡bbc.co.uk/news Parameters Method: ¡GET …

HTTP ¡response

Status: ¡200 ¡OK Content: ¡HTML ¡page Set-­‑cookies: ¡session-­‑id=2082787201l & ¡… …

bbc.co.uk/news: session-id=2082787201l 2082787201l

Cookie ¡Database

13

slide-14
SLIDE 14

HTTP: Session in cookies

Web ¡browser Web ¡server

HTTP request

URL ¡path: ¡bbc.co.uk/news... Method: ¡GET Cookies: ¡session-­‑id=2082787201l & ¡… …

bbc.co.uk/news: session-id=2082787201l 2082787201l

Cookie ¡Database

14

slide-15
SLIDE 15

Cookies

15

slide-16
SLIDE 16

What is a cookie?

  • A ¡small ¡piece ¡of ¡data, ¡sent ¡by ¡the ¡HTTP ¡server ¡

in ¡an ¡HTTP ¡response, ¡stored ¡by ¡the ¡client, ¡and ¡ sent ¡back ¡by ¡the ¡client ¡to ¡the ¡server ¡in ¡all ¡ further ¡responses. ¡

  • A ¡cookie ¡may ¡also ¡be ¡set ¡and ¡read ¡directly ¡in ¡

the ¡client ¡by ¡some ¡JavaScript ¡code. ¡

16

From ¡slides ¡of ¡Vincent ¡Simonet

slide-17
SLIDE 17

What’s the original use of cookies?

  • Keep ¡the ¡session ¡through ¡

different ¡windows/tabs

  • Shopping ¡basket

17

slide-18
SLIDE 18

Profitable uses of cookies

  • Personalization: ¡remember ¡the ¡information ¡

about ¡the ¡user ¡who ¡has ¡visited ¡a ¡website ¡in ¡

  • rder ¡to ¡show ¡relevant ¡content ¡in ¡the ¡future ¡
  • Tracking: ¡following ¡the ¡user ¡during ¡a ¡session ¡
  • r ¡across ¡multiple ¡visits. ¡

18

From ¡slides ¡of ¡Vincent ¡Simonet

slide-19
SLIDE 19

Structure of a Cookie

  • A ¡name, ¡
  • A ¡value, ¡
  • An ¡expiry ¡date, ¡
  • A ¡domain ¡and ¡a ¡path ¡the ¡cookie ¡is ¡settled ¡for, ¡
  • Whether ¡we ¡need ¡a ¡secure ¡connection ¡

(HTTPS) ¡for ¡the ¡cookie, ¡

  • Whether ¡the ¡cookie ¡can ¡be ¡accessed ¡through ¡
  • ther ¡means ¡than ¡HTTP ¡(i.e. ¡JavaScript). ¡

19

From ¡slides ¡of ¡Vincent ¡Simonet

slide-20
SLIDE 20

Types of cookies

  • Session ¡cookie: ¡cookie ¡without ¡expiry ¡date. ¡

Disappears ¡when ¡the ¡browser ¡is ¡closed. ¡

  • Persistent ¡cookie: ¡cookie ¡with ¡an ¡expiry ¡date. ¡

Remains ¡until ¡this ¡date, ¡even ¡if ¡the ¡browser ¡is ¡

  • closed. ¡
  • Secure ¡cookie: ¡sent ¡only ¡in ¡HTTPS ¡requests. ¡
  • HttpOnly cookie: ¡non-­‑accessible ¡from ¡JavaScript. ¡
  • Third-­‑party ¡cookie: ¡a ¡cookie ¡from ¡another ¡

domain ¡than ¡the ¡domain ¡that ¡is ¡shown ¡in ¡the ¡ browser's ¡address ¡bar. ¡

20

From ¡slides ¡of ¡Vincent ¡Simonet

slide-21
SLIDE 21

Example of Cookie in the HTTP Protocol

  • 1st ¡HTTP ¡request ¡(client):

GET /index.html HTTP/1.1

  • 1st ¡HTTP ¡response ¡(server):

HTTP/1.0 200 OK Set-Cookie: name=value Set-Cookie: name2=value2; Expires=Wed, 09 Jun 2021 10:18:14 GMT

  • 2nd ¡HTTP ¡request ¡(client):

GET /spec.html HTTP/1.1 Host: www.example.org Cookie: name=value; name2=value2

21

From ¡slides ¡of ¡Vincent ¡Simonet

slide-22
SLIDE 22

Example of cookies with domain and path

  • Set-Cookie: LSID=DQAAAK...Eaem_vYg;

Domain=docs.foo.com; Path=/accounts; Expires=Wed, 13 Jan 2021 22:23:01 GMT; Secure; HttpOnly

  • Set-Cookie: HSID=AYQEVn....DKrdst;

Domain=. foo.com; Path=/; Expires=Wed, 13 Jan 2021 22:23:01 GMT; HttpOnly

  • If ¡not ¡specified, ¡they ¡default ¡to ¡the ¡domain ¡and ¡path ¡of ¡the ¡
  • bject ¡that ¡was ¡requested. ¡
  • Cookies ¡can ¡only ¡be ¡set ¡on ¡the ¡top ¡domain ¡and ¡its ¡sub ¡

domains ¡

22

From ¡slides ¡of ¡Vincent ¡Simonet

slide-23
SLIDE 23

Basic browser security: Same Origin Policy

23

slide-24
SLIDE 24

yandex.ru yimg.com pinterest.com twitter.com google-­‑analytics.com doubleclick.net yahoo.com facebook.com newchic.com

24

slide-25
SLIDE 25

Same origin policy: high level

Same ¡Origin ¡Policy ¡(SOP) ¡for ¡DOM:

§ Origin ¡A ¡can ¡access ¡origin ¡B’s ¡DOM ¡if ¡match ¡on

(scheme, ¡ ¡domain, ¡ ¡port)

Same ¡Original ¡Policy ¡(SOP) ¡for ¡cookies: ¡

§ Generally ¡speaking, ¡based ¡on:

([scheme], ¡ ¡domain, ¡ ¡path)

  • ptional

scheme://domain:port/path?params

Slide ¡of ¡Tamara ¡Rezk

slide-26
SLIDE 26

URL1 ¡and ¡URL2 ¡are ¡same-­‑origin? ¡

Compared ¡URL2 Outcome Reason http://www.example.com/dir/page.html http://www.example.com/dir2/other.html http://www.example.com:81/dir/page.html https://www.example.com/dir/page.html http://example.com/dir/page.html http://v2.www.example.com/dir/page.html

26 URL1: ¡ http://www.example.com/dir/page.html ✔

Same ¡protocol ¡and ¡host

✔

Same ¡protocol ¡and ¡host

❌

Same ¡protocol ¡and ¡host but ¡different ¡port

❌

Different ¡protocol

❌

Different ¡host

❌

Different ¡host

slide-27
SLIDE 27

Html ¡page ¡+ ¡

<iframe src=b.com/main.html> </iframe>

In ¡what ¡origin ¡each ¡script ¡is ¡running?

27

<script src=b.com/script.js>

JavaScript ¡1

a.com b.com

a.com

JavaScript ¡2

<script src=c.com/script.js>

c.com

slide-28
SLIDE 28

Html ¡page ¡+ ¡

<iframe src=b.com/main.html> </iframe>

In ¡what ¡origin ¡each ¡script ¡is ¡running?

28

<script src=b.com/script.js>

JavaScript ¡1

a.com b.com

a.com

JavaScript ¡2

<script src=c.com/script.js>

c.com

JavaScript ¡2 JavaScript ¡1

slide-29
SLIDE 29

Two ways to access cookies

  • Via ¡HTTP ¡header

§ Set/get ¡cookies ¡associated ¡with ¡(domain, ¡path) of ¡the ¡ requested ¡object

  • Via ¡JavaScript: ¡document.cookie API

§ Access ¡with ¡respect ¡to ¡SOP ¡: ¡(scheme, ¡domain, ¡port)

  • the ¡change ¡of ¡an ¡effective ¡origin ¡by ¡document.domain

DOM ¡API ¡doesn’t ¡affect ¡the ¡cookie ¡access

29

Singh ¡etal “On ¡the ¡Incoherencies ¡of ¡Web ¡Browser ¡Access ¡Control ¡Policies” ¡IEEE ¡SSP’2010

slide-30
SLIDE 30

Same Origin Policy

  • Scripts ¡running ¡on ¡pages ¡from ¡the ¡same ¡origin ¡

can ¡access ¡each ¡other's ¡DOM ¡without ¡

  • restriction. ¡
  • Scripts ¡running ¡on ¡pages ¡from ¡different ¡origins ¡

cannot ¡access ¡each ¡other's ¡DOM. ¡

  • The ¡Same ¡Origin ¡Policy ¡does ¡not ¡apply ¡to ¡

<img>, <script> or ¡<object> tags. ¡

30

From ¡slides ¡of ¡Vincent ¡Simonet

slide-31
SLIDE 31
  • Full ¡sharing ¡(JS ¡Env.)
  • Running ¡as ¡integrator
  • Gadget ¡trusted
  • Full ¡isolation ¡(by ¡SOP)
  • Running ¡as ¡gadget
  • Limited ¡sharing ¡

– Frame ¡identifier – PostMessage

Using ¡<script> tag Using ¡<iframe> frame

Google ¡Maps ¡Gadget Integrator’s Housing ¡Data Google ¡Maps ¡Gadget Integrator’s Housing ¡Data

X

Same Origin Policy for DOM

Slide ¡of ¡Tamara ¡Rezk

slide-32
SLIDE 32

Cookies: first- and third-party

32

slide-33
SLIDE 33

Content: first- and third-party

doubleclick.net accuweather.com

first-­‑party ¡ content third-­‑party content

33

slide-34
SLIDE 34

Cookies: first- and third-party

Cookie ¡Database doubleclick.net accuweather.com ac accuweat eather er.com: id=123 dou doubl bleclick.com

  • m: id=456

first-­‑party ¡cookie third-­‑party ¡cookie

34

slide-35
SLIDE 35

Third-party cookies

  • The ¡same ¡origin ¡policy ¡does ¡not ¡apply ¡to ¡

<img>, ¡<script> ¡or ¡<object> ¡tags. ¡This ¡allows ¡a ¡ web ¡page ¡to ¡triggers ¡a ¡GET ¡request ¡with ¡ cookies ¡to ¡a ¡third-­‑party ¡site. ¡

  • Purpose ¡of ¡third-­‑party ¡cookies? ¡Tracking!

35

slide-36
SLIDE 36

Cookies: first- & third-party

<script src=facebook.com> </src>

JavaScript ¡1 accuweather.com doubleclick.net

36

First-­‑party Third-­‑party

accuweather.com Origin Origin

can ¡read/write ¡ cookies ¡of ¡ accuweather.com can ¡read/write ¡ ¡ cookies ¡of ¡ doubleclick.net <iframe src=doubleclick.net> </iframe>

Html ¡page ¡+ ¡ JavaScript ¡2