Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dezvoltarea sistemelor Web

🌐arhitectura unui browser Web

Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

“To avoid criticismdo nothing, say nothing, be nothing.”

Elbert Hubbard

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

mediu de execuție(sistem de operare, aplicație nativă,…)

browser Web

funcționalități de bazăprocesare conținut, redare,…

interpretorJavaScript

acces la platformă

rețea, grafică, fonturi, widget-uri native,…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Un client (i.e. browser Web) se identifică via valoarea

câmpului-antet User-Agent dintr-o cerere HTTP

www.useragentstring.com

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

1993 – primul browser Web: Mosaic – Mosaic/0.9

1994 – primul browser comercial: Netscape Navigatorinclude primul interpretor JavaScript și oferă o interfață

de programare (BOM – Browser Object Model)Mozilla/Versiune [Limbă] (Platformă; Criptare)

Mozilla/2.02 [fr] (WinNT; I)

Mozilla/Versiune (Platformă; Criptare [; descriere OS])Mozilla/3.0 (X11; I; AIX 2)

Netscape Communicator 4 – Mozilla/4.04 [en] (WinNT; U)

www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

1994 – primul browser disponibil pe un dispozitivminiaturizat (PDA – Apple Newton): PocketWeb

www.teco.edu/pocketweb/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

1996 – primul navigator produs de Microsoft: MSIEinclude dialectul JScript și propriul BOM

oferă multe facilități, ulterior standardizate de W3CMozilla/2.0 (compatible; MSIE Versiune; Sistem de operare)

Mozilla/2.0 (compatible; MSIE 3.02; Windows 95)

MSIE 4—7 – Mozilla/4.0 (compatible; MSIE 4.5; Mac_PowerPC)

MSIE 8 – Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)

MSIE 11 – Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

1996 – primul navigator trialware: Opera 2focalizat pe utilizabilitate (e.g., tab-uri)

și accesibilitate (de exemplu, interacțiune prin gesturi)permite selectarea modului de identificare a browser-ului

Opera/Versiune (OS; Criptare) [Limbă]Opera/7.54 (Windows NT 5.1; U) [en]

dev.opera.com

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

1998 – apariția procesorului de redare (rendering engine) Gecko

Mozilla/Versiune (Platformă; Criptare; OS/CPU; Limbă;

VersiuneRevizie) Gecko/Versiune Produs/VersiuneMozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1b2)

Gecko/20060823 SeaMonkey/1.1a

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11)

Gecko/20071127 Firefox/2.0.0.11

www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

1997—1999 – navigator Web pentru telefoane mobile: HitchHiker (ulterior, Microsoft Mobile Explorer 2.0)

acces via WAP (Wireless Access Protocol)conținut structurat cu WML (Wireless Markup Language)

procesare de date + interacțiune prin WMLScript

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

fundația Mozilla – codul Netscape disponibil open source:Phoenix (2002)Firebird (2003)Firefox (2004)

axat asupra respectării standardelor Webinterfață via XUL (Extensible User-interface Language)

extensibil via add-ons (extensii, teme vizuale etc.)ciclu de dezvoltare de 4 săptămâni – inițial, 6:

Nightly, Aurora, Beta, ReleaseMozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0)

Gecko/20100101 Firefox/70.0

developer.mozilla.org/Mozilla/Firefox

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

2003 – Apple Safari cu WebKit bazat pe KHTML (KDE)accent pus pe inovare (<canvas>, CSS,…) + performanță

Mozilla/5.0 (Platformă; Criptare; OS/CPU; Limbă)

AppleWebKit/Versiune (KHTML, like Gecko) Safari/VersiuneMozilla/5.0 (Macintosh; U; PPC Mac OS X; en)

AppleWebKit/124 (KHTML, like Gecko) Safari/125.1

Mozilla/5.0 (iPad; CPU OS 12_0_1 like Mac OS X) AppleWebKit/605.1.15

(KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1

developer.apple.com/safari/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

2005 – Opera Mini oferă primele facilități de redare a datelor pe ecrane miniaturizate (small screen rendering)

procesare realizată la nivel de server via sisteme de stocare a datelor (data centers)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

2008 – Google Chrome folosind WebKit; din 2013: Blinkbazat pe proiectul open source Chromium

focalizare asupra performanței la nivel de client Webinterfață minimalistă + manager de tab-uri

include instrumente avansate pentru dezvoltatoriMozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13

(KHTML, like Gecko) Chrome/0.2.149.29 Safari/525.13

Mozilla/5.0 (Linux; Android 5.0.2;…) AppleWebKit/537.36 (KHTML, like Gecko)

Chrome/44.0.2403.117 Safari/537.36 GSA/5.2.33.19.arm

developer.chrome.com

www.chromium.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

2015 – Microsoft Edge folosind EdgeHTML(bazat pe Trident de la vechiul IE; în tranziție spre Blink)

accent asupra suportului standardelor Webrulează exclusiv pe sistemele Windows

(se oferă mașini virtuale pentru testare pe alte platforme)Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36

(KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362

developer.microsoft.com/microsoft-edge/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Care este arhitectura generalăa unui navigator Web?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

user interface

browser engine

rendering engine

network

JSinter-preter

datapar-ser

display back-end

da

ta p

ersiste

nce

componentele de bază ale unui navigator Web genericconform (Grosskurth & Godfrey, 2006; Garsiel, 2011)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

cog

etp

ock

et.c

om

/a/r

ead

/173

5724

031

privire de ansamblu asupra proceselor majore efectuate

de browser-ul Web

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

user interface

bara de introducere a URI-urilor (address bar)

căutare pe Web

instrumente facilitând navigarea (back/forward button)

meniu de salvare a adreselor Web favorite (bookmarks)

acces la preferințe + alte componente – e.g., extensii

…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

user interface

diverse proprietăți și preferințe specifice

unui utilizator pot fi stocate în cadrul unui profil

exemplu tipic: Firefox – http://mzl.la/1BAQULj

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

browser engine

„punte” între interfața cu utilizatorul și rendering engine

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

browser engine

„punte” între interfața cu utilizatorul și rendering engine

nucleu (kernel)

plug-ins

extensions

add-ons

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

realizează redarea conținutului solicitat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

realizează redarea conținutului solicitat

documente HTML ce includ resurse multimedia

imagini raster (GIF, PNG, JPEG)

grafică vectorială – SVG (Scalable Vector Graphics)

reprezentări diverse: MathML, WebGL,…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

implică, uzual, procesarea arborelui DOM

asociat unei pagini Web

cu aplicarea proprietăților CSS aferente

în vederea redării într-o zonă de afișare

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

o aplicație Web la nivel de client poate fi compusă din diverse componente, încărcate dinamicmanagementul arborilor DOM

(Dimitri Glazkov, 2013)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

include un interpretor (parser) HTML

conform tipului de document Web – DTD

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

include un interpretor (parser) HTML

conform tipului de document Web – DTD

moduri diferite de interpretare

standards mode – HTML5, CSS3, SVG,…

quirks mode – www.quirksmode.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

include un interpretor (parser) HTML

pot fi folosite diverse euristici (speculative parsing),

mai ales în cazul codului care nu e bine formatat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

include un interpretor (parser) HTML

pot fi folosite diverse euristici (speculative parsing),

mai ales în cazul codului care nu e bine formatat

cazul Firefoxdeveloper.mozilla.org/en-US/docs/Mozilla/Gecko/HTML_parser_threading

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

proce-sare cod

HTML

arboreDOM

generarearbore

de redare

determi-nare

layout

afișare(rendering)

layout

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

cod sursă HTML – încărcat (a)sincron de pe rețea

arbore DOM (Document Object Model)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

fazele importante ale procesăriiunui document HTML

în vederea obținerii arborelui DOM

preluare date de pe rețea

procesare (tokeniser)

construire arbore

HTMLHtml

Element

HTMLBody

Element

HTMLParagraph

Element

Text

HTMLHead

Element

HTMLTitle

Element

execuție script-uri JS

document.write()

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

HTMLHtml

Element

HTMLBody

Element

HTMLParagraph

Element

Text

HTMLHead

Element

HTMLTitle

Element

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<p>Salut, lume!</p>

</body>

</html>

DOM Living Standard (6 decembrie 2019)dom.spec.whatwg.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

arbore DOM

arbore de redare (render tree)

getpocket.com/a/read/1735724031

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

relația dintre arborele DOM șiarborele de redare a conținutului (render tree)

conform Hyungwook Lee, 2014

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

alături de arborele de redare, se va genera și:

render object tree

responsabil cu aranjamentul (layout) & afișarea (paint)

specific conținutului efectiv redat

compus din obiecte de redare (RenderObjects):

RenderBlock, RenderText, RenderInline etc.

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

alături de arborele de redare, se va genera și:

style tree

compus din RenderStyles

include valorile calculate ale proprietăților de stil

asociat arborelui obiectelor de redare (render object tree)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

alături de arborele de redare, se va genera și:

render layer tree

folosit pentru elementele ce includ conținuturi externe

(<video>, WebGL via <canvas>) ori manipulate prin CSS

(transformări, scalări, decupări,…)

stabilește coordonatele în spațiu și ordinea (z-index)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

relațiile între obiecte de redare (render objects) și stratele asociate (render layers)

L. Weintraub, “How WebKit Renders the Web”, Fluent Conference, 2012

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

în arborele de redare nu vor fi incluse

elementele non-vizuale (e.g., <head>, <script>, <title>)

sau nodurile ascunse via proprietatea CSS display: none

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

<p>Dezvoltare <strong>Web</strong>

cu <em>JavaScript</em></p>

RenderBlock (p)

RenderText ('Dezvoltare')

RenderInline (strong)

RenderText ('Web')

RenderText ('cu')

RenderInline (em)

RenderText ('JavaScript')

RenderBlock (p)

RootLineBox (line 1)

InlineBox (text)

InlineBox (strong)

RootLineBox (line 2)

InlineBox (text)

InlineBox (em)

InlineBox (text)

„cutii” de redare a liniilor de conținut, conform stilurilor de afișare specificate de CSS

adaptare după Ryan Seddon (2015)speakerdeck.com/ryanseddon/how-the-browser-actually-renders-a-website

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

arbore de redare (render tree)

generare a aranjamentului vizual (layout)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

calcularea aranjamentului (layout) e dependentăde zona de afișare – uzual, un tab al navigatorului

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

calcularea aranjamentului (layout) e dependentăde zona de afișare – uzual, un tab al navigatorului

se pot lua în considerație coordonatele ferestreinavigatorului + proprietățile mediului de redare:

rezoluție, orientare (portrait vs. landscape), suport pentru 3D etc.

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

calcularea aranjamentului (layout)

global layout (pentru întreg render tree) – recursivvs.

incremental

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

calcularea aranjamentului (layout)

global layout (pentru întreg render tree) – recursivvs.

incremental

sincron vs. asincron

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

calcularea aranjamentului (layout)

calculul lățimii fiecărui bloc de conținut (width calculation)decizii privind line breaking

plasarea blocurilor flotante – e.g., cele având float: right

determinarea lățimii fiecărei coloane de tabel…și multe altele

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

vizualizarea datelor privind layout-ul calculat în Chrome

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

generare aranjament vizual (layout)

afișare layout

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

redări diferite ale aceluiași document HTML(dependența de platformă și/sau de navigator)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

afișarea propriu-zisă (painting)

poate fi realizată la nivel de software

sau pe baza procesorului grafic (accelerată hardware)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

redarea conținutului grafic prin compunerea stratelorfolosind o tehnologie precum OpenGL

(Hyungwook Lee, 2014)www.slideshare.net/HyungwookLee/mobilebrowserinternal-20140122

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

corendering engine

exemplu real:

procesele de prelucrare grafică 2D

efectuate de componenta WebRender (Mozilla)

mozillagfx.wordpress.com/2017/09/21/introduction-to-webrender-part-1-browsers-today

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

după afișarea propriu-zisă,

pot apărea schimbări de redare

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

după afișarea propriu-zisă,

pot apărea schimbări de redare

la nivel local/global

re-layout și/sau re-paint

detalii: developers.google.com/web/updates/2018/09/inside-browser-part4

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

exemplificări notabile:

EdgeHTML (Microsoft: Edge – până în 2019)

Gecko (Firefox, Thunderbird, GNU IceCat, Waterfox)

Goanna (fork Gecko inclus în Pale Moon și Basilisk)

Presto (Opera, Opera Mobile, Opera Mini, Nintendo)

Trident (Microsoft: IE, IE Mobile, Skype)

WebKit (Apple Safari, Chromium/Chrome, Adobe AIR +

multe platforme mobile: Android, Blackberry, iOS)

Blink (Google Chrome, Opera, Amazon Silk – din 2013,

Microsoft Edge – din 2019)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

fluxul de activități realizate de Geckodeveloper.mozilla.org/Gecko

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

fluxul de activități realizate de WebKitwww.webkit.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

navigatoarele Web moderne pot rula mai multe instanțe

ale procesorului responsabil cu redarea conținutului

pentru fiecare tab, câte un proces separat

cazul Google Chromewww.chromium.org/developers/design-documents/process-models

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Mariko Kosaka, Inside look at modern Web browser (2018)developers.google.com/web/updates/2018/09/inside-browser-part1

de la o arhitectură monolitică la una modulară

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Mariko Kosaka, Inside look at modern Web browser (2018)developers.google.com/web/updates/2018/09/inside-browser-part1

fiecare modul intern poate fi considerat ca fiind un serviciu (browser servicification)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

networking

responsabil cu transferurile de date de pe Internet

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

networking

responsabil cu transferurile de date de pe Internet

API independent de platformă

+

implementări specifice fiecărui sistem de operare

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

networking

responsabil cu transferurile de date de pe Internet

API independent de platformă

+

implementări specifice fiecărui sistem de operare

exemplificare: Firefox utilizează modulul Necko

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

efectuarea unei cereri de rețea – cazul Chromiumdetalii la www.chromium.org/developers/design-documents/network-stack

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

networking

observații:numărul conexiunilor HTTP paralele realizate

cu un server sau proxy este limitat (uzual: 2—6)

unele navigatoare pot aplica tehnici de optimizarea încărcării resurselor

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

studiu de caz

Firefox: ajustarea parametrilor vizând conexiunile HTTP via schema URI about:config

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

display (UI) backend

responsabil cu afișarea componentelor de interfață

ferestre, bare de defilare a conținutului (scroll bars),

tipuri ale câmpurilor formularelor Web:

butoane de tip radio, textarea, liste de selecție, date,…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

browsershots.org www.browserstack.com

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

JavaScript interpreter

interpretează și execută programele JavaScript

la nivel de client

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

fazele principale ale procesării și rulării codului JavaScript(Hyungwook Lee, 2014)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

JavaScript interpreter (engine)

Carakan (Opera)

Chakra (Microsoft)

Nashorn (Oracle)

Nitro (SquirrelFish), JavaScriptCore (Apple)

SpiderMonkey, IonMonkey, Rhino (Mozilla)

Tamarin (Adobe)

V8 (Google Chrome, Opera, Microsoft Edge, Node.js)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

JavaScript interpreter (engine)

optimizări specifice – V8 (lansat pe 2 septembrie 2008):

oferă interpretarea + compilarea codului JS

Ignition – interpretor de nivel scăzut bazat pe regiștri

github.com/v8/v8/wiki/Ignition

TurboFan – compilator JIT oferind o paletă de optimizări

github.com/v8/v8/wiki/TurboFan

de consultat și v8.dev

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

începând cu august 2019, V8 6.9 are suport și pentru procesarea codului WebAssembly (WASM) – Liftoff

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

JavaScript interpreter (engine)

diferențele de performanță pot fi măsuratevia teste specifice (benchmarking)

exemplificări: Benchmark.js, Kraken (Mozilla),

Octane (Google), SunSpider (Apple)combinarea mai multor teste de performanță: JetStream

browserbench.org arewefastyet.com

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

XML parser

responsabil cu procesarea documentelor XML via DOM

implementarea minimală vizează DOM nivelul 2

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

XML parser

în unele cazuri, procesarea documentelor XML

poate implica validarea datelor via DTD,

dar nu folosind scheme XML

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

XML parser

uzual, se poate oferi suport pentru:

spații de nume XML

XPath 1.0 – în mod normal, XPath 2.0 nu-i acceptat

XSLT 1.0 – actualmente nu există suport pentru XSLT 2.0

transferuri asincrone de date via XMLHttpRequest

etc.

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

XML parser

unele navigatoare ofera facilități pentru alte limbaje XML

fluxuri de știri Atom și RSS (Really Simple Syndication)

MathML

SVG (Scalable Vector Graphics)

etc.

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

data persistence

modul responsabil cu stocarea datelor

pe calculatorul client

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

data persistence

cookie-uri

cache

localStorage (HTML5)

database (HTML5)

…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

fluxul de activități realizate de browser-ul Web(Hyungwook Lee, 2014)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Ce putem afirma despreparticularitățile navigatoarelor Web?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

arhitectura inițială a navigatorului Firefox

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

arhitectura conceptuală a browser-ului Chrome(Tom Hauser et al., 2009; Ilya Grigorik, 2013)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

structura internă a navigatorului Chromium (H. Lee, 2014)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

diagrama fluxului de date – cazul Chrome(Hauser et al., 2009)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

arhitectura browser-ului Lynx (Grosskurth & Godfrey, ‘06)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Remarcă

un navigator Web modern prezintăo arhitectură modulară

realizată pe baza unui nucleu (browser kernel)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Remarcă

un navigator Web modern prezintăo arhitectură modulară

realizată pe baza unui nucleu (browser kernel)

de asemenea, poate permite includerea de plug-in-uri și extensii

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Plug-in

program extern responsabil cu procesarea & redarea

unor date ce nu pot fi prelucrate nativ

de către navigatorul Web

formatul de date este specificat

via tipuri MIME (Media Types)

video/quicktime

application/x-shockwave-flash

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Plug-in

bazat pe API-ul oferit de browser,

folosind un SDK disponibil pe platforma-țintă

(recurgându-se la limbajele C ori C++)

actualmente, utilizarea plug-in-urilor e descurajată

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

coPlug-inalternativă: utilizarea bibliotecilor JavaScript

exemplificări notabile:

pdf.js – redarea documentelor PDFgithub.com/mozilla/pdf.js

Afterglow, Flow Player, JW Player, Kaltura, MediaElement.js, Video.js – redare de conținut video

studiu comparativ: cloudinary.com/blog/html5_video_player

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Plug-inalternativă: WebAssembly

cod binar de nivel scăzut, similar limbajului de asamblare

axat asupra performanței

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Extensie

extinde funcționalitățile navigatorului

poate afecta browser-ul în ansamblu

are acces, de obicei, la arborele DOM

(sau arborele de redare a conținutului)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Extensie

implementare via tehnologii Web (HTML, CSS, JavaScript)

se poate distribui via un sit specific

(e.g., Chrome Web Store)

specificație în lucru (iulie 2017):

browserext.github.io/browserext/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Extensie

resurse pentru dezvoltatori:

Chrome – developer.chrome.com/extensions/

Firefox – developer.mozilla.org/Add-ons/WebExtensions

Edge – docs.microsoft.com/en-us/microsoft-edge/extensions

Opera – dev.opera.com/extensions/

Safari – developer.apple.com/safari/extensions/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Widget

aplicație – de sine-stătătoare sau inclusă într-o pagină –

ce oferă o funcționalitate specifică

rulează la nivel de client (platformă oferită de

sistemul de operare și/sau navigator Web)

implementare pe baza standardelor Web: HTML, CSS, JS

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Add-on

denumire generică a aplicațiilor asociate unui browser

(extensii, teme vizuale, dicționare,

maniere de căutare pe Web, plug-in-uri etc.)

exemplificare tipică: addons.mozilla.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web component

parte a unei aplicații Web ce încapsulează

o suită de funcții înrudite ce pot fi reutilizate

e.g., calendar, cititor de fluxuri de știri,

buton de partajare a URL-ului în altă aplicație

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web component

dezvoltare bazată pe o bibliotecă/framework JavaScript

soluții „tradiționale”: Dojo Toolkit, jQuery UI,…

alternative moderne: Angular, React, Svelte, Slim.js

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web component

cadrul general: Web Components

templates, decorators, custom elements, shadow DOM etc.

în lucru la Consorțiul Web (octombrie 2019)

github.com/w3c/webcomponents/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web component

suport pentru implementare oferit de framework-uri:

Polymer – www.polymer-project.org

X-Tag – x-tag.github.io

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

detalii + exemple practice: www.webcomponents.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web app

o aplicație Web instalabilă

care folosește API-urile oferite de browser

aplicații Windows universale (PC, XBox One, HoloLens)

dezvoltate în JavaScriptdocs.microsoft.com/en-us/windows/uwp/

aplicații Web mobile pentru dispozitive Amazon Firedeveloper.amazon.com/apps-and-games/

aplicații Web pentru platforma Tizen (mobile, wearable,

TV, IVI – In-Vehicle Infotainment): Web Device APIdeveloper.tizen.org/development/api-references/web-application

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Aspecte de interes privind navigatorul Web:

toleranța la defectesecuritatea

managementul memorieiperformanța (e.g., viteza de procesare)

interacțiunea cu utilizatorulconservarea resurselor (i.e. power consumption)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

tehnologii Web implementate de un browser actual: platform.html5.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Remarcă:în cadrul unui browser Web

pot fi utilizate procesoare de redare multiple

exemplificări:Avant Browser – bazat pe Gecko, Trident și Blink/WebKit

Lunascape – include Gecko, Trident și WebKitMaxthon – recurge la WebKit și Trident

Tungsten – folosește Blink și Trident

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Navigatoare Web „speciale”

optimizate pentru dispozitive specifice (smart phone, tabletă, smart TV,…) și platformele aferente

sau pentru anumite sarcini – i.e. dezvoltare Web

pot oferi anumite facilități – e.g., content & ad blockers, sincronizare, interacțiuni naturale și/sau 3D, depanare,…

exemple: Brave, Firefox Focus, Firefox Developer Edition,Firefox Reality, Opera Touch, Samsung Internet Browser,

UC Browser, Vewd Browser, Vivaldi, Waterfox

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Navigatoare Web hibride

unele procese care trebuie realizate de browserpot fi executate la nivel de server – de pildă, în cloud

exemplu:Amazon Silk (bazat pe Chromium)

dacă procesul de rendering nu poate fi efectuat la distanță, se realizează o procesare la nivel local – pe dispozitivul Kindle

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

unele activități se pot fi realiza în cloud(în cazul Amazon Silk, se utilizează EC2)

pentru diverse optimizări, recurge la tehnici de învățare automată

docs.aws.amazon.com/silk/latest/developerguide/introduction.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Navigatoare Web experimentale

Servo (Mozilla, Samsung et al. – demarat în 2014)

un nucleu de browser Web (engine) paralel prototip scris în Rust pentru arhitecturi pe 64 de bițiasigurarea securității, performanței & modularizării

servo.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dacă un navigator Web nu are (încă) suport pentru

o anumită tehnologie, se pot adopta soluții alternative

polyfills

uzual, implementate via JavaScript

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Funcționalitățile browser-ului Web pot fi folosite și în lipsa interacțiunii cu utilizatorul (sans UI)

headless browser

scopuri principale: automatizare + testare

exemple: Chromium Embedded Framework, Erik, Splashgithub.com/dhamaniasad/HeadlessBrowsers

developer.mozilla.org/Firefox/Headless_mode

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Încapsularea browser-ului Web în aplicații mobile

Android: clasa WebView (Kotlin, Java)developer.android.com/guide/webapps/webview

Apple (iOS, macOS, Mac Catalyst): clasa WKWebViewdeveloper.apple.com/documentation/webkit/wkwebview

www.hackingwithswift.com/articles/112/the-ultimate-guide-to-wkwebview

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Device fingerprinting

valoarea câmpului-antet User-Agent + alte caracteristici ale mediului de rulare a navigatorului Web

– e.g., rezoluția ecranului, platforma hardware/software, date despre font-uri și limbi, cookie-uri,

suportul pentru grafică 3D,… –pot conduce la identificarea utilizatorului/dispozitivului

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

P. Laperdrix, W. Rudametkin, B. Baudry, “Beauty and the Beast: Diverting Modern Web Browsers to Build Unique Browser

Fingerprints”, IEEE Symposium on Security and Privacy, 2016hal.inria.fr/hal-01285470/file/beauty-sp16.pdf

A. Vastel et al., “Privacy Implications of Browser Fingerprint Inconsistencies”, USENIX Security Symposium, 2018

www.usenix.org/system/files/conference/usenixsecurity18/sec18-vastel.pdf

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Device fingerprinting

impact asupra intimității (privacy) și anonimității

instrumente de testare și raportare:Am I Unique? – amiunique.org

Panopticlick – panopticlick.eff.org

UniqueMachine – uniquemachine.org+

bibliotecă dedicată: ClientJS – clientjs.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Device fingerprinting

instrumente de asigurare a intimității (privacy tools)

extensii pentru browser-ul Web uBlock Origin, Ghostery,

HTTPS Everywhere, Privacy Badger etc.

de considerat șiDuckDuckGo – the search engine that doesn’t track you

Tor Project – platformă peer-to-peer, oferind Tor Browser (bazat pe Gecko), Tails (The Amnesic Incognito Live System)

www.torproject.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rezumat

🌐arhitectura unui browser Webcomponente principale + cazuri concrete

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

episodul viitor: securitatea sistemelor Web