PRZEGLĄDARKA I JEJ OTOCZENIE

Podobne dokumenty
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Języki programowania wysokiego poziomu WWW

Content Security Policy jako ochrona przed skutkami ataków XSS.

Healthix Consent Web-Service Specification


Hosting WWW Bezpieczeństwo hostingu WWW. Dr Michał Tanaś (

Tworzenie witryn internetowych PHP/Java. (mgr inż. Marek Downar)

Systemy internetowe. Wykład 5 Architektura WWW. West Pomeranian University of Technology, Szczecin; Faculty of Computer Science

Czym jest AJAX. AJAX wprowadzenie. Obiekt XMLHttpRequest (XHR) Niezbędne narzędzia. Standardowy XHR. XHR z obsługą baz danych

HTTP W 5-CIU PYTANIACH MICHAŁ KOPACZ

Sprawozdanie Sieci komputerowe i bazy danych Laboratorium nr 4

PSI Protokół HTTP + wstęp do przedmiotu. Kraków, 10 październik 2014 mgr Piotr Rytko Wydział Matematyki i Informatyki UJ

Ataki na aplikacje WWW. Łomem, czy wytrychem? Jak dobrać się do aplikacji WWW

Instrukcja obsługi User s manual

Architektura komunikacji

I.Wojnicki, Tech.Inter.

Technologie sieciowe Sprawozdanie z labolatorium. Lista 5

Technologie internetowe

AJAX. Wykonał: Marcin Ziółkowski, AGH Kraków, AiR rok 5.

Orange Send MMS. Autoryzacja. Metoda HTTP. Parametry wywołania. API wyślij MMS dostarcza wiadomości MMS. Basic POST

Programowanie i projektowanie obiektowe

W3 Total Cache. Skuteczne przyśpieszanie WordPressa. Bartosz Romanowski

Architektura aplikacji sieciowych. Architektura klient-serwer

Hosting WWW Bezpieczeństwo hostingu WWW. Dr Michał Tanaś (

Sprawozdanie Sieci komputerowe i bazy danych Laboratorium nr 4 Wojciech Kaczmarski

Wybrane działy Informatyki Stosowanej

Aplikacje webowe w obliczu ataków internetowych na przykładzie CodeIgniter Framework

FRONT-END SECURITY SZYMON GRZYBOWSKI NSENSE POLSKA S.A.

Bezpieczeństwo systemów komputerowych

Programowanie w Internecie

I.Wojnicki, JiTW. Języki i Technologie Webowe. Protokół HTTP, Przegladarki. Igor Wojnicki

Pracownia internetowa w każdej szkole (edycja Jesień 2007)

Dokumentacja Skryptu Mapy ver.1.1

TECHNOLOGIE SIECI WEB

Podstawy programowania w języku JavaScript

Pogadanka o czymś, co niektórzy nazywają AJAX

Wprowadzenie do kryptografii i bezpieczeństwa. Po raz czwarty

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Kompresja stron internetowych

OpenPoland.net API Documentation

Programowanie w Internecie

Laboratorium nr 4 - Badanie protokołów WWW

Od assemblera do html5

Web Application Firewall - potrzeba, rozwiązania, kryteria ewaluacji.

NoSQL Not Only SQL: CouchDB. I.Wojnicki, NoSQL. Apache CouchDB has started. Time to relax. Przetwarzanie dokumentów i widoków.

Drobne błędy w portalach WWW

SIP: Session Initiation Protocol. Krzysztof Kryniecki 16 marca 2010

Protokół HTTP. 1. Protokół HTTP, usługi www, model request-response (żądanie-odpowiedź), przekazywanie argumentów, AJAX.

Dokument hipertekstowy

Aplikacje Internetowe termin dodatkowy

Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37

Tworzenie witryn internetowych PHP/Java. (mgr inż. Marek Downar)

Wprowadzenie do programowania www

Wybrane działy Informatyki Stosowanej

Serwery WWW. Konfiguracja. Zadania serwera. NCSA httpd 1.5

Jak okiełznać frontend w Django? Piotr Maliński

Jak skonfigurować bezpieczną sieć bezprzewodową w oparciu o serwer RADIUS i urządzenia ZyXEL wspierające standard 802.1x?

Zabbix -Monitoring IT bez taśmy klejącej. Paweł Tomala Barcamp 15 czerwca 2015

Zaawansowane Techniki WWW (HTML, CSS i NODE.JS)

Sieci komputerowe Warstwa aplikacji

Należy ściągnąć oprogramowanie Apache na platformę

Pracownia internetowa w każdej szkole (edycja Jesień 2007)

Systemy internetowe. Wykład 3 PHP. West Pomeranian University of Technology, Szczecin; Faculty of Computer Science

Pracownia internetowa w każdej szkole (edycja Jesień 2007)

Camspot 4.4 Camspot 4.5

SEO Audyt. Podsumowanie. 51/100 punktów. Masz 11 rzeczy, które możesz poprawić! Uzyskany wynik: Data przeprowadzenia: :33:47

HTTP. literatura:

MeetingHelper. Aplikacja Android ułatwiająca przekazywanie materiałów pomiędzy uczestnikami spotkania. Instrukcja obsługi dla programisty

TCP/IP. Warstwa aplikacji. mgr inż. Krzysztof Szałajko

Zrąb JavascriptMVC. Krzysztof Płocharz. 6 kwiecień Uniwersytet Warszawski

Angular, cz. II. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński

Architektura bezpiecznych aplikacji internetowych na platformie Java Enterprise Edition. Jakub Grabowski Warszawa,

OpenLaszlo. OpenLaszlo

Laboratorium - Konfiguracja zabezpieczeń sieci bezprzewodowej

Paweł Rajba,

HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści

Ogólny schemat prostego formularza: A może lepiej zamiast przycisku opartego o input tak:

Ajax a bezpieczeństwo aplikacji webowych. Jakub Wierzgała

Gatesms.eu Mobilne Rozwiązania dla biznesu

Sieci komputerowe. Wykład 8: Warstwa zastosowań: FTP i HTTP. Marcin Bieńkowski. Instytut Informatyki Uniwersytet Wrocławski

Raport z Testów Penetracyjnych XXXXX

Popularne dostępne rozwiązania. Najpopularniejsze środowiska programistyczne:

Cookie Policy. 1. Informacje ogólne.

Technologie Internetu. Protokół HTTP. Aleksander Denisiuk.

Konfiguracja połączenia VPN w systemie Windows 7 z serwerem rozgrywki wieloosobowej gry Medal Of Honor: Wojna na Pacyfiku: Pacyfik.

Narzędzia OWASP dla developerów OWASP ESAPI & AppSensor OWASP The OWASP Foundation

Szybko, prosto i tanio - ale czy na pewno?

I.Wojnicki, Tech.Inter.

Aspekty bezpieczeństwa aplikacji internetowych

Programowanie komponentowe. Przykład 1 Bezpieczeństwo wg The Java EE 5 Tutorial Autor: Zofia Kruczkiewicz

Jarosław Kuchta Administrowanie Systemami Komputerowymi. Dostęp zdalny

Programowanie. Dodatek - uzupełnienie wiadomości. mgr inż. Krzysztof Szwarc. Sosnowiec,

Wykład 3 / Wykład 4. Na podstawie CCNA Exploration Moduł 3 streszczenie Dr inż. Robert Banasiak

Konfiguracja klienta Lotus Notes R6 z certyfikatami i kluczami na karcie kryptograficznej lub w pliku.

WYKŁAD 5 BIBLIOTEKA JQUERY CZĘŚĆ 1

Laboratorium - Używanie programu Wireshark do obserwacji mechanizmu uzgodnienia trójetapowego TCP

(Apache) CouchDB. Krzysztof Kulewski 2008

Aplikacje www. Wykład 1 Wprowadzenie do tematyki. Joanna Kołodziejczyk. 19 luty Joanna Kołodziejczyk Aplikacje www 19 luty / 29

Transkrypt:

PRZEGLĄDARKA I JEJ OTOCZENIE Krystyna Dziubich Wytwarzanie Aplikacji Internetowych KASK ETI Politechnika Gdańska

Co następuje po wywołaniu adresu domenowego? Cache przeglądarki a Content Delivery Network Narzędzia developerskie ruch sieciowy Negocjowanie treści nagłówki HTTP Wysyłanie danych z formularza Przeglądarka od środka Budowa działanie, podgląd dokumentu (css, DOM) AJAX Cross-origin resource sharing

Co następuje po wywołaniu adresu

Jak to wygląda od spodu? DOMContentLoaded (event) : wejściowy HTML sparsowany i załadowany do obiektu DOM /bez czekania na załadowanie obrazków, css, zawartości ramek/ Load (event) : czas wystąpienia zdarzenia ładowania strony/strona cała załadowana/

Redukcja obciążenia źródłowego serwera Skrócenie czasu wczytywania stron Stosunkowo niewielki koszt CDN (np. cache, strumieniowe treści audiowizualne) https://cdn.pg.edu.pl/ Infrastruktura internetowa (każdy serwer CDN ma własne IP, ale wskazują na tą samą nazwę domeny; mechanizmy balansowania obciążenia) System routingu kierujący klienta do serwera najbliższego geograficznie (min ilość skoków lub min czas dostarczenia zasobów)

Nagłówki żądania Google Chrome v.61 Narzędzia Deweloperskie

Nagłówki odpowiedzi

Treść odpowiedzi

Timing / chronometraże

http://julian.eti.pg.gda.pl/dydaktyka.html DOMContentLoaded (event) : wejściowy HTML sparsowany i załadowany do obiektu DOM /bez czekania na załadowanie obrazków, css, zawartości ramek/ Load (event) : czas wystąpienia zdarzenia ładowania strony/strona cała załadowana/

Żądania przewidujące

Żądania przewidujące klient -> serwer serwer -> klient

Negocjowanie treści Content Negotiation polega na wygenerowaniu odpowiedzi na żądanie klienta w postaci najbardziej odpowiadającej jego potrzebom i odesłaniu jej z odpowiednim typem zgodnym z przygotowaną zawartością. server-driven negotiation /proactive negotiation agent-driven negotiation /reactive negotiation

Negocjowanie na podstawnie nagłówków HTTP Serwer weryfikuje nagłówki nadesłane przez klienta pod kątem informacji o tym czego oczekuje klient Accept: określa typy zawartości jakie akceptuje klient np. text/xml, application/xml, application/xhtml+xml, text/html;q=0.9, text/plain;q=0.8, image/png,*/*;q=0.5 co preferuje klient? Accept-Charset: określa zbiór znaków jaki może zawierać odpowiedź aby była akceptowana przez klienta Accept-Encoding: określa kodowanie zawartości dla odpowiedzi aby była ona akceptowalna np. compress;q=0.5, gzip;q=1.0 Accept-Language: określa preferowany typ języka naturalnego (fr, ang, pl) dla zawartości odpowiedzi User-Agent : zawiera informacje o przeglądarce Quality values (qvalue) wartość określająca względną wartość dla parametru z którym występuje; wartość q jest z zakresu <0,1> Zero oznacza że parametr nie jest akceptowany przez klienta 14

Wysyłanie danych z formularza http://192.168.56.10/05-ajax/form.html Metoda GET, enctype=" text/plain" Metoda POST, enctype="application/x-www-form-urlencoded"

Wysyłanie danych z formularza Metoda POST, enctype="multipart/form-data enctype:

Przeglądarka od środka

Przeglądarka od środka JavaScript interpreter. Used to parse and execute JavaScript code. Data storage. This is a persistence layer. The browser may need to save all sorts of data locally, such as cookies + storage mechanisms such as localstorage, IndexedDB, WebSQL and FileSystem. The user interface: address bar, back/forward button, bookmarking menu, etc. ; except the window where you see the requested page. The browser engine: marshals actions between the UI and the rendering engine. The rendering engine : responsible for displaying requested content. If the requested content is HTML, the rendering engine parses HTML and CSS, and displays the parsed content on the screen. Networking: for network calls such as HTTP requests, using different implementations for different platform behind a platform-independent interface. UI backend: used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface that is not platform specific. Underneath it uses operating system user interface methods.

Rendering engines - np.trident Firefox - Gecko, Safari WebKit, Internet Explorer -Trident, Chrome and Opera (ver. 15+) - Blink.

Rendering engine WebKit main flow http://www.youtube.com/watch?v=7fxhe5erucm

AJAX

Ajax w jquery Przykład: http://192.168.56.10/05-ajax/index.html Dopuszczone AJAX owe żądanie wewnątrzdomenowe do zasobu http://192.168.56.10/05-ajax/fragment.html

Narzędzia developerskie cd Przykład: http://192.168.56.10/05-ajax/index.html Zakładka Elements Styles, Properties [podgląd drzewa DOM] DOM Breakpoints

AJAX czysty Przykład: http://192.168.56.10/indexpl.php Zakładka Sources Krokowe wykonanie skryptu JS, podgląd wartości zmiennych

Cross-origin resource sharing

Cross-origin resource sharing (CORS) Żądania międzydomenowe blokowane poza żądaniami o obrazki, style, skrypty, iframe, video; Żądania AJAX oraz żądania o fonty dopuszczone są w ramach domeny i uprawnień same-orgin security policy; Chyba że z miejsc dystrybucji jak google fonts, bo serwer wszytkim zezwala na dostęp: access-controlallow-origin:*

CORS test1.pl http:/test1.pl/index.html XHR request: www.servis.pl Host: www.servis.pl Origin: test1.pl Referer: http://test1.p/index.html Request URL: www.servis.pl/x.php?q=3 Przeglądarka klienta response: Access-Control-Allow-Orgin: * Access-Control-Allow-Credentials: true

CORS nagłówki HTTP Request headers Origin Access-Control-Request-Method Access-Control-Request-Headers Response headers Access-Control-Allow-Origin Access-Control-Allow-Credentials Access-Control-Expose-Headers Access-Control-Max-Age Access-Control-Allow-Methods Access-Control-Allow-Headers

eti.pg.edu.pl Żądanie międzydomenowe o czcionkę

CORS żądanie XHR o zasób Przykład: http://192.168.56.10/05-ajax/index.html

JSON Zwykły JSON (Type mime : application/json) { "Name": "Foo", "Id": 192.168.73.96, "Rank": 7 } <script type="application/javascript" 2 src="http://server.example.com/users/1234"> 3 </script> Wygeneruje error, bo przekaże pobrany skrypt (dane JSON) jako blok (literał) do silnika; Literał nie dostępny z poziomu działającego skryptu -brakuje przypisania danych do zmiennej np.: var x = JSON.parse({ "Name": "Foo", "Id": 192.168.73.96, "Rank": 7 } );

JSONP - JSON with padding Dla starych przegl. nie wspierających CORS Wspiera tylko żądania GET, ale pokonuje ograniczenie same-origin policy; Może prowadzić do XSS (cross site scripting) gdy zew. domena jest podejrzana Serwery udostępniające dane informują o dostępnej liście funkcji <script type="application/javascript" src="http://server.example.com/users/1234?callback =parseresponse"> </script>

JSONP <script> var dana; function parseresponse(x) { dana = x; } </script> Dla każdego nowego żądania trzeba użyć <script> wstrzykując go do HTML DOM $.getscript("http://server.example.com/users/192.168.73.96", "parseresponse"); Type mime dla JSONP: application/javascript Przykład: http://192.168.56.10/jsonp/testjsonp.html

Literatura Peter Lubbers, Brian Albers, Frank Salim Pro html5 Programming - Powerful APIs for Richer Internet Application Development Apress 2010 isbn:978-1- 4302-2790-8 http://books.google.pl/books/about/pro_html5_programming.html?id=7hfsxsybihyc& redir_esc=y www.w3.org/standards/ http://www.w3schools.com/ http://kurs.browsehappy.pl Negocjowanie treści http://www.ibm.com/developerworks/websphere/library/techarticles/0901_b arcia/0901_barcia.html https://developer.mozilla.org/en-us/docs/web/http/content_negotiation Działanie przeglądarki: https://www.html5rocks.com/en/tutorials/ internals/howbrowserswork/ lub video: http://vimeo.com/44182484