Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

Webes technológiák 10/1. Bilicki Vilmos Árpád tér 50.-es szoba 3411-es mellék.

Hasonló előadás


Az előadások a következő témára: "Webes technológiák 10/1. Bilicki Vilmos Árpád tér 50.-es szoba 3411-es mellék."— Előadás másolata:

1 Webes technológiák 10/1

2 Bilicki Vilmos Árpád tér 50.-es szoba 3411-es mellék

3 Miért érdemes használni? Vékony kliens technológia Elosztott rendszerek Platform független Elterjedt Sokoldalú

4 Tematika I. rész A World Wide Web alapjai A HTTP protokoll és utódai A HTML nyelv CSS Az XML nyelv WAP

5 Tematika II. rész Dinamikus tartalom Kliens oldali programozás JavaScript Java Applet Java Szerver oldali programozás CGI PHP ASP JSP XSP

6 A mai előadás tartalma HTTP TLS SHTTP HTML

7 HTTP (Hyper Text Transfer Protocol) Kliens-szerver modell Állapotmentes Alkalmazásszintű protokoll Megbízható átviteli közegre épül Új fogalmak: Webszerver Proxy szerver

8 HTTP 1.1 Kapcsolatorientált Részletes proxy specifikáció 80-as port URI (Universal Resource Identifier)

9 URI Rfc2396 : :// ? US-ASCII Más karaterek: %

10 URL HTTP specifikus: URL (Universal Resource Locator) http : // host [ : ] [ port ] [ abszolút-útvonal [ ? query ] ] Relatív útvonal

11 HTTP üzenetek Kérés (request) Válasz (response) kezdő sor fejléc sorok üres sor az üzenet tartalma

12 Kérés üzenetek(kezdő sor) GET OPTIONS POST HEAD TRACE

13 GET GET / HTTP/1.1 Host: sirius.cab.u-szeged.hu HTTP/ OK Date: Thu, 13 Dec :55:37 GMT Server: Apache/ (Unix) PHP/4.0.6 Transfer-Encoding: chunked Content-Type: text/html 8a0 Irinyi Kabinet

14 OPTIONS OPTIONS /cgi-bin/szotarE HTTP/1.1 Host: sirius.cab.u-szeged.hu HTTP/ OK Date: Mon, 17 Dec :05:54 GMT Server: Apache/ (Unix) PHP/4.0.6 Content-Length: 0 Allow: GET, HEAD, POST, OPTIONS, TRACE

15 HEAD HEAD /teszt/ HTTP/1.1 Host: wilma.cab.u-szeged.hu HTTP/ OK Server: Microsoft-IIS/5.0 Cache-Control: max-age=86400 Expires: Tue, 18 Dec :47:33 GMT Content-Location: Date: Mon, 17 Dec :47:33 GMT Content-Type: text/html Accept-Ranges: bytes Last-Modified: Mon, 17 Dec :03:32 GMT ETag: "fc50cd9c387c11:88e" Content-Length: 83

16 POST POST /teszt/ HTTP/1.1 Host: wiliam.u-szeged.hu adat: research

17 TRACE TRACE / HTTP/1.1 Host: wiliam.u-szeged.hu Adat: research HTTP/ OK Server: Netscape-Enterprise/6.0 Date: Sun, 23 Dec :49:45 GMT Content-type: message/http Content-length: 62 TRACE / HTTP/1.1 Host: wiliam.u-szeged.hu Adat: research

18 Egyéb CONNECT DELETE PUT

19 Fejléc mezők Host If-Modified-Since User-Agent Adat: research …

20 Válasz üzenet Állapot mező Válasz fejléc mezők Erőforrás erőforrás fejléc erőforrás tartalom

21 Állapot mezők 1xx – Információs 2xx – Siker 3xx – Átirányítás 4xx – Kliens oldali hiba 5xx – Szerver oldali hiba

22 Válasz fejléc WWW-Authenticate Age Cache-Control Expires Content-Type

23 1. Feladat Csatlakozzunk a gép 80-as portjára és próbáljuk lekérni a szótár keresést tartalmazó web oldaltwww.cab.u-szeged.hu

24 MIME Text Plain Html Image Audio Video Application

25 Biztonság HTTP -> magas rendelkezésre állás Más szempontok: adatok titkossága adatok megbízhatósága egyének azonosítása

26 Azonosítási eljárások Basic Authentication Digest Authentication

27 Basic Authentication UID Password Realm HTTP/ Authorization Required

28 Példa HTTP/ Authorization Required Date: Fri, 28 Dec :24:32 GMT Server: Apache/ (Unix) PHP/4.0.6 X-Powered-By: PHP/4.0.6 WWW-Authenticate: Basic realm="My Realm" Transfer-Encoding: chunked Content-Type: text/html Authorization: Basic base64(user:pass)

29 Hátrányok Nem biztonságos Lehallgatható Nem titkosított Nincs megoldva a jelszó elosztása Használata mellőzendő, veszélyes Ha mégis akkor: Csak generált jelszavakkal szabad

30 Digest Authentication challenge-response nonce URI Idő Véletlen szám … Kivonatoló függvény (hash) MD5 Nehéz visszafejteni

31 A kérés paraméterei Challenge Domain Nonce Opaque Stale Algorithm Qop-int

32 A válasz paraméterei username digest-URI message-qop cnonce nonce-count response

33 message-qop Nincs A1 = username-value:realm-value:passwd A2 = Method:digest-uri-value response = "KD(H(A1),nonce:H(A2))" Auth A1 = username-value:realm-value:passwd A2 = Method:digest-uri-value response = "KD(H(A1),nonce:nonce-count:cnonce:qop:H(A2))" Auth-int A1 = username-value:realm-value:passwd A2 = Method:digest-uri-value:H(entity-body) response = "KD(H(A1),nonce:nonce-count:cnonce:qop:H(A2))"

34 Példa HTTP/ Unauthorized WWW-Authenticate: Digest qop="auth,auth-int", nonce="dcd98b7102dd2f0e8b11d0f600bfb0c093", opaque="5ccc069c403ebaf9f0171e9517f40e41" Válasz: Authorization: Digest username="Mufasa", nonce="dcd98b7102dd2f0e8b11d0f600bfb0c093", uri="/dir/index.html", qop=auth, nc= , cnonce="0a4f113b", response="6629fae49393a c4ef1", opaque="5ccc069c403ebaf9f0171e9517f40e41"

35 Előnyök Titkosított jelszó Szótáras támadás védhető(cnonce) Megvéd a replay támadásoktól Biztosít bizonyos adatbiztonságot

36 Hátrányok Nem mond semmit a jelszó kiosztásáról Nincs titkosítva a tartalom Limitált integritás védelem A nonce használatának teljesítménybeni korlátai vannak

37 Felhasznált technológia Szimmetrikus kulcsú titkosítás Gyors Probléma a közös kulcs eljuttatása Aszimmetrikus (nyilvános) kulcsú titkosítás Lassú Nem jelent problémát a kulcs publikálása Digitális Aláírás Digitális Bizonyítvány

38 Új megoldások Két megközelítési mód: Új réteg: TLS Módosított HTTP SHTTP

39 Felülről kompatibilis a HTTP protokollal Üzenetek becsomagolása CMS,MOSS Digitális aláírás MAC nonce Kulcssere és titkosítás Üzenet integritás és küldő azonosítás Aktualitás ellenőrzése Sok titkosító algoritmus

40 SHTTP Hasonló üzenet mint a HTTP protokollnál: Kérés: Secure * Secure-HTTP/1.4 Válasz: Secure-HTTP/ OK

41 TLS (Tranport Layer Security) Új réteg bevezetése: Netscape SSL Microsoft PCT IETF TLS

42 TLS felosztása I. TLS Handshake Session identifier Peer certificate Compression method Cipher spec Master secret Is resumable

43 TLS felosztása II. TLS Record Fragmentálás Tömörítés Tartalom védelem Titkosítás

44 Kapcsolat felépítés 1. Hello üzenetcsere 2. Rejtjelezési paraméter csere 3. Bizonyítvány csere 4. Főkulcs 5. Adatcsere

45 A HTML nyelv Megjelenítésre koncentrál Gépek számára nehezen értelmezhető Tag-ek segítségével épül fel a dokumentum( ) Böngésző elrejti a kódot Jelenleg HTML 4.01

46 Felépítés információ a HTML verziójáról fejrész (header) törzs (body)

47 Egy egyszerű HTML oldal Ez a fejléc Hello világ!

48 Megjelenítve

49 DTD (document type declaration)

50 Fejléc (header) Általában nem jelenik meg a képernyőn A dokumenturól és a kapcsolatról tartalmaz fontos információkat

51 Példa meta fejléc

52 Törzs Background Text Link Vlink Alink Célszerű a formázásra css-t alkalmazni

53 Logikai felépítést definiáló elemek Címsor elemek(,…) Szövegrészek csoportosítása Ennyi! az XML-t erre fejlesztették ki

54 Példa Bemutatkozás Munkatársak Cégünk munkatársai közé tartozik Kovács Lajos és Nagy Péter. A kutató osztály munkatársai Kovács János, és Nagy Szabolcs.

55 Képernyőn

56 Szöveg formázása A beírt szöveg elveszíti formázását. Szöveg formázás megtartása ( ) Bekezdések ( ) Sortörés ( ) Nonbreakable space ( ) Kiemelés ( ) Vastag betű ( ) Idézet ( ) Felső index ( ) Alsó index (sub)

57 Listák Számozatlan( ) Számozott ( ) Az elem Definició ( ) Az elem vagy

58 Példa Listák alma körte dió alma körte dió alma Az alma egyik legfotosabb vitaminforrásunk. dió A dió kemény gyümölcs

59 Képernyőn

60 Táblázatok Egyik legfontosabb pozicionáló elem

61 Példa Táblázatok Minta táblázat 1. oszlop 2. oszlop 3. oszlop 1. sor, 1. cella 1. sor, 2. cella 1. sor, 3. cella 2. sor, 1. cella 2. sor, 2. cella 2. sor, 3. cella

62 Képernyő

63 Oszlop, sor formázás colspan rowspan colgroup col

64 Példa Táblázatok Minta táblázat 1., 2. oszlop 3. oszlop 1. sor, 1. cella 1. sor, 2. cella 1. sor, 3. cella, 2. sor, 3. cella 2. sor, 1. cella 2. sor, 2. cella

65 Képernyő

66 2. Feladat Hozzuk létre az alábbi táblázatot:

67 3. Feladat Hozzunk létre egy olyan web oldalt amely tartalmaz egy listát és az egész be van keretezve adott távolságra az oldal szélétől

68 Hivatkozások

69 Keretek target

70 Példa Több keretes példa

71 Képernyő

72 4. Feladat Hozzunk létre egy olyan weboldalt mely 3 keretből áll és az egyes keretekben lévő menük segítségével tudjuk a másik keret tartalmát változtatni.

73 Objektumok,képek, appletek classid codebase codetype Egymásba ágyazás

74 Példa Képek, térképek menük

75 Képernyő

76 5. Feladat Hozzunk létre egy olyan web oldalt mely tartalmazza az oldal alsó egy harmadában a weboldalt.

77 Űrlapok action method get post name

78 Elemek text password file hidden radio checkbox button submit reset

79 Elemek size multiple name option name rows cols

80 Példa I. rész Kérdoiv Vezetéknév: Keresztnév: Nem:

81 Példa II. rész Osztály: A osztály B osztály Leírás: