Přejít k navigační liště

Zdroják » Webdesign » Novinky protokolu WebSocket a režim fullscreen

Novinky protokolu WebSocket a režim fullscreen

Články Webdesign

Webové technologie se stále vyvíjejí a prohlížeče přicházejí s novými a novými možnostmi. V dnešním článku si ukážeme, jak byly vyřešeny nedávno zmiňované bezpečnostní problémy v protokolu WebSocket, a představíme si jednu novinku, která by mohla zlepšit „prožitek“ z některých webových aplikací.

Články jsou překladem textů What’s different in the new WebSocket protocolLet Your Content Do the Talking Fullscreen-API z webu HTML5Rocks. Autory jsou Eiji Kitamura a Eric Bidelman. Článek je zveřejněn pod licencí CC-BY 3.0

Co je nového v protokolu WebSocket

Protokol WebSocket byl před nedávnem upraven tak, aby byl vyřešen dříve objevený bezpečnostní problém. Nová verze je i výrazně stabilnější. Dále si popíšeme provedené změny, a také se zmíníme o jejich implementacích.

Co se změnilo od WebSocket HyBi 00?

  • Změnil se formát rámce protokolu. HyBi 00 používal  "0x00" pro záhlaví a  "0xff" pro konec každého rámce. HyBi 10 nyní používá nový formát (ponecháno v původním znění, pozn. překl.):
      0                   1                   2                   3
      0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
     +-+-+-+-+-------+-+-------------+-------------------------------+
     |F|R|R|R| opcode|M| Payload len |    Extended payload length    |
     |I|S|S|S|  (4)  |A|     (7)     |             (16/63)           |
     |N|V|V|V|       |S|             |   (if payload len==126/127)   |
     | |1|2|3|       |K|             |                               |
     +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
     |     Extended payload length continued, if payload len == 127  |
     + - - - - - - - - - - - - - - - +-------------------------------+
     |                               |Masking-key, if MASK set to 1  |
     +-------------------------------+-------------------------------+
     | Masking-key (continued)       |          Payload Data         |
     +-------------------------------- - - - - - - - - - - - - - - - +
     :                     Payload Data continued ...                :
     + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
     |                     Payload Data continued ...                |
     +---------------------------------------------------------------+
  • Některé změny souvisely s bezpečnostními problémy:
    • Sec-WebSocket-Key a Sec-WebSocket-Accept byly přidány na místo tří nulových klíčů z HyBi 00. Prohlížeč vygeneruje náhodný Sec-WebSocket-Key. Server následně použije tento klíč spolu sGUID protokolu WebSocket  ( 258EAFA5-E914-47DA-95CA-C5AB0DC85B11) a následným SHA1 / BASE64 atd. Vrátí pak  Sec-WebSocket-Accept , čímž prohlížeč potvrdí, že rozumí WebSocket. Tato kontrola zabraňuje útoku cross-protocol.
    • Nově je vyžadováno maskování na každém rámci. Brání se tak otrávení cache na proxy serverech. Byla přidána položka Sec-WebSocket-Origin , aby se zabránilo přístupu skriptů, o nichž poskytovatel neví.
    • Sec-WebSocket-Origin je přidána na místo původního klíče Origin z HyBi 00. Ve verzi HyBi 11 bude opět jen “ Origin “.
  • Změny v JS API
    • subprotocol může být nyní pole – prototyp volání je new WebSocket(String url, Array subprotocol)
    • .protocol attribut [String]
    • .binaryType attribut [Blob|ArrayBuffer]
    • .extension[String]
    • K události  CloseEvent byl přidán stavový kód a důvod (uzavření spojení). Funkce  close() byla zároveň rozšířena tak, že přijímá tyto dva argumenty.
  • Rozšíření (Extensions)
    • Bylo přidáno Sec-WebSocket-Extensions. Navrhovaná rozšíření jsou:
      • deflate-frame pro transparentní kompresi dat při přenosu.
      • x-google-mux pro podporu multiplexování (zatím v rané fázi)

Jsou HyBi 00 a HyBi 10 kompatibilní mezi servery a klienty?

  • Server může podporovat HyBi 00 i HyBi 10 – musí si zkontrolovat HTTP hlavičku u handshake. Podpora HyBi 00 není doporučená, právě kvůli známým zranitelnostem.
  • WebSocket JavaScriptAPIjsou si v obou verzích velmi podobné, ale jak už jsme zmínili – používání staré verze není doporučené.

Jaké prohlížeče podporují HyBi 10?

  • Chrome od verze 14 podporuje HyBi 10, stejně tak i Firefox 7

Fullscreen API

Většina prohlížečů umí přepnout sama sebe do fullscreen (nebo „kiosek“) módu. V podstatě to znamená, že chrome UI (ve významu „ovládací prvky prohlížeče, rám a další UI“, nikoli prohlížeč Chrome) zmizí a celou plochu zabírá samotný obsah. U aplikací z Chrome Web Store si můžete takové chování ručně nakonfigurovat – aplikace se vám pak otvírá přes celou obrazovku. Ruční fullscreen je dobrý. Programový fullscreen je ještě lepší!

Fullscreen APIdovoluje webovým aplikacím, aby mohly požádat z JavaScriptu o zobrazení libovolného obsahu na stránce v režimu full screen. To znamená, že třeba hry ve WebGL nebo <canvas> mohou nabídnout intenzivnější prožitek, video bude vypadat jak na stříbrném plátnu a online magazíny mohou působit mnohem realističtěji. Sice máme své prohlížeče rádi, ale neměli bychom jimi být omezováni, že…

Pokud se nechcete zdržovat detaily, skočte si rovnou nademo:

Jak toto API pracuje? Pokud chcete kupříkladu konkrétní <div> roztáhnout na celou obrazovku, prostě o to požádejte:

div.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();

Pro ukončení režimu fullscreen nabízí objekt document metody:

document.webkitCancelFullScreen();
document.mozCancelFullScreen();

Obsah je ve fullscreen módu vycentrován na střed viewportu. Je necháno na vývojáři, jak takový stav nastyluje, aby byl zážitek co nejlepší. Dobrá zpráva je, že API nabízí i nové pseudo selektory:

div:-webkit-full-screen {
  width: 100% !important;
}
div:-moz-full-screen {
  width: 100% !important;
}
:-webkit-full-screen .tohide {
  display: none; /* While in fullscreen, hide any children with class 'tohide' */
}
:-moz-full-screen .tohide {
  display: none; /* While in fullscreen, hide any children with class 'tohide' */
}

Pseudoselektory v CSS umožní snadno nastylovat fullscreen režim podle designérových představ.

Fullscreen API funguje (zatím) pouze v Chrome 15. V nočních sestaveních Firefoxu si jej můžete povolit pomocí nastavení full-screen-api.enabled na true v about:config. Další informace o fullscreen API naleznete vespecifikaci.

Komentáře

Subscribe
Upozornit na
guest
9 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Mennion

Určitě zajímavá technologie, docela by mě zajímalo, zda přes fullscreen api půjde přepnout okno do fullscreenu i v případě více monitorového řešení. Tak aby obě okna běžely ve fullscreenu…

bauglir

http://test.bauglir.com/full.png

printscreen mých monitorů se 2 různými fullscreeny

Mennion

Noo, to vypadá víc než slibně. Díky za screen .)

Pavol

Velmi sa mi to nepaci, uz vidim ako to zacnu vyuzivat tvorcovia este dotieravejsich reklam. Idealne ked budem nieco hladat na nejakej pofidernejsej stranke a 2 sekundy predtym nez pride moja priatelka mi vyskoci nejaka neslusna reklama do fullscreenu. To bude vysvetlovania.

František Kučera

Ono to před přepnutím nebude vyžadovat souhlas uživatele? To by pak šlo zneužít, že by se stránka v nepozorovanou chvíli přepnula a pak simulovala GUI prohlížeče a uživatel by pak např. přišel, přihlásil se k e-mailu nebo jinam a odeslal svoje jméno a heslo útočníkovi.

bauglir

se na whatwg/w3c mailingu řeší, co s tím…

bauglir

a teď to nikde nemůžu najít :)

ale předpokládám, že podobně, jako prohlížeče blokují popupy bez uživatelské akce a mají na to UI, tak předpokládám, že něco podobného se objeví i pro fullscreen

Pavol

No ja tuto „uzasnu“ vlastnost rozhodne vypnem a budem ju zapinat jedine rucne. A ak to nepojde vypnut tak kludne budem pouzivat nejaky browser typu IE 8/9, je mi to jedno.
Idealne by bolo keby v browsri vyskocil nejake dialogove okno ktore by sa ma opytalo ci si zelam pustit stranku vo fullscreene, pripadne s nejakym radiobuttonom „ano, vzdy ano pre tuto stranku, nie, nikdy pre tuto stranku“. Ale to je zas riesenie ktore ide mimo zauzivany sposob pouzivania moderneho prehliadaca.

Srigi

Ak by niekto hladal funkcne riesenie pre Node.js, tak s dnesnymi browsermi (G. Chrome 14+ a Firefox 7) su kompatibilne tieto riesenia: Socket.IO a Worlize/WebSocket-Node. Ostatne „kniznice“ pre Node.js nenadviazu z browseru spojenie na server (aspon tie co som testoval zo zoznamu).

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.