Http használata

(1)

UNIVERSITY OF SZEGED

D

epartment of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS

Http használata

Dr. Bilicki Vilmos

Szoftverfejlesztés Tanszék

(2)

D

Az előző előadás összefoglalója

4Angular Routing, Navigation

■ Router import

■ Konfiguráció

■ Router outlet

■ Router link

■ Aktív router link

■ Router állapot

■ Aktivált útvonal

■ Router események

2019. 04. 16. Webfejlesztés keretrendszerek 2

(3)

D

Összefoglaló

4Angular HTTP

■ Szolgáltatás igénybevétele

■ JSON feldolgozása, ellenőrzése

■ Hiba kezelés

■ Hiba részletek

– retry()

■ Observables és operátorok

■ Nem JSON adat kérése

■ POST, DELETE, PUT

■ A kérés konfigurálása - kérés, válasz elkapása

■ Előrehaldás események

■ XSRF

■ Saját süti, fejléc

4Service worker

(4)

D

HTTP

4A legtöbb kliens oldali alkalmazás HTTP segítségével kommunikál a háttér

rendszerrel.

4A modern web böngészők két megoldást biztosítanak a HTTP kezelésére:

■ XMLHttpRequest interfész

■ fetch() API

4Az @angular/common/http-ben lévő HttpClient API egy egyszerű az

XMLHttpRequest interfészre építő API-t biztosít

(5)

D

XMLHttpRequest

(6)

D

fetch()

(7)

D

HttpClient

(8)

D

Konfig

(9)

D

Típus kényszerítés

(10)

D

A teljes válasz kiolvasása

(11)

D

Hibakezelés

(12)

D

Hiba részletek

(13)

D

Tranziens hibakezelés

(14)

D

Nem JSON adat

(15)

D

Adatok feltöltése

(16)

D

Adatok törlése

(17)

D

Adatok frissítése

(18)

D

PUT vs. POST

PUT POST

A RFC-2616 alapján a PUT művelettel a küldött entitást a megadott kérés URI-val megadott címen kell tárolni, vagy frissíteni (amennyiben van ilyen elem).

PUT /questions/{question-id}

A POST művelet segítségével új elemet töltünk fel az URI-val megadott helyre. Az URI a csoport URI- ja.

POST /questions

A PUT művelet idempotens, akárhányszor ismételjük a vége ugyanaz lesz.

A POST NEM idempotens. Ahányszor meghívjuk annyiszor tölti fel.

Akkor használjuk a PUT-ot, ha meglévő elemet szeretnénk módosítani. A PT teljesen kicseréli, amennyiben csak módosítani szeretnénk akkor használjuk a PATCH-et.

Akkor használjuknk POST-ot amikor erőforrás gyűjteményben gyermek elemet szeretnénk hozzáadni.

A PUT idempotens, így gyorstótárazható. A válasz nem gyorsítótárazható. (igen, de konfigurálni kell)

A módosítás műveletekhez célaszerű PUT-ot használni.

A LÉTREHOZÁS műveletkehez használjuk a POST-ot.

(19)

D

PUT vs POST

(20)

D

Fejlécek konfigurálása

4Nem tudjuk a meglévő fejléceket módosítani.

4A set() metódus egy másolatot ad vissza ezt módosíthatjuk.

(21)

D

Kérések leállítása

(22)

D

(23)

D

HTTP kérések elkapása

4Az Interceptor képességek segítségével lehet a kliensről a szerverre irányuló és onnan érkezőHTTP forgalmat:

■ elemezni

■ átalakítani

4Az egyes elkapó elemeket előre és visszairányú láncokba rendezhetjük.

4Tipikus feladatok:

■ azonosítás

■ naplózás

■ …

(24)

D

Előrehaladás kezelése

4Egyes estekben a feltöltés hosszú időt vehet igénybe.

4A felhazsnálónak érdemes visszajelezni, hogy hol tart a tranzakció.

4A nyomonköbetéshez a HttpRequest reportProgress tulajdonságát kell

engedélyezni.

(25)

D

Szolgáltatás

(26)

D

(27)

D

XSFR

4A Cross-Site Request Forgery (XSRF) egy támadás típus ahol a támadó a flehazsnálót

nemkívánt műveletek végrehajtásráa bírhatja rá

(28)

D

Védekezés

4 A HTTP kérés küldésekor,

■ egy elkapó kiolvassa a megfelelő címkét a sütiből, alapértelmezésben XSRF-TOKEN,

■ és beállítja mint X-XSRF-TOKEN HTTP fejlécet

4 Mivel a sütihez, csak adott URL-ről lehet hozzáférni ezért a szevrer csak azon kéréseket engedélyezi aho ez a süti megvan

(29)

D

Service Workers: bevezető

4A service worker egy olyan szkript amelyet a webböngésző a háttérben futtat.

4Elkülönül a wbeoldal életétől lehetővé teszi a háttér folyamatok megvalósítását 4Olyan megoldásoka mint

■ push értesítés

■ háttér szinkronizáció

■ …

(30)

D

Service Worker

4 Egy JavaScript Worker, nem fér hozzá a DOM-hoz. Az oldalt kezelő szállal a postMessage interfacen keresztül

kommunikálhat.

4 A service worker egy programozható hálóztai proxy funkciót is betölthet.

4 A rendszer a service worker életútját a többi elemtől függetlenül menedszeli, perzisztens adatok tárolására nem alkalmas..

4 Erre pl az IndexedDB API alkalmas.

(31)

D

Előfeltételek

4 Böngésző támogatás

■ Támogatott az alábbi böngészőkben

– Chrome, Firefox ,Opera, Edge, Safari

■ Fogja támogatni:

– Microsoft Edge

4 Csak HTTPS-en megy

■ Fejlesztés közben a localhsotnál nem kell, de produkciós környezetben csak HTTPS felett működik

■ A service worker segítségével el lehetne térítni kapcsolatokat, át lehetne alakítani a tartalmat, tökéletes a man-in-the-middle támadásokra.

■ Ezért csak olyan oldalakhoz lehet service wokert regisztrálni amelyek https protokollon érhetőek el, így a telepített service worker az oldaltól származik

(32)

D

Service worker és az Angular

4A fenti parancs az alábbi műveletekt végzi el

■ Hozzáadja az @angular/service-worker csomagot a projekthez

■ Engedélyezi a service worker build támogatást a CLI-ben

■ Importálja és regisztrálja a service workert az app modulban

■ Kiegészíti az index.html fájlt

– Hozzáad egy hivatkozást a manifest.json fájlra

■ Telepít egy ikont a Progressive Web App (PWA) támogatásra

■ Létrehozza az ngsw-config.json konfigurációs fájlt

(33)

D

Service worker futtatása

4http-server segítségével indíthatjuk

■ Mivel az ng serve nem működik együtt a service workerrel ezért egy különló http szervert kell használni. (pl.: http-server -p 8080 -c-1 dist/<project-name>)

4Kezdeti betöltés

■ Amikor a szerver fut elérhetjük az

alkalamzást itt: http://localhost:8080/.

(34)