Novinky protokolu WebSocket a režim fullscreen

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í.

Seriál: Webdesignérův průvodce po exotických krajích (3 díly)

  1. Datová URL pomohou s malými soubory 8.8.2011
  2. Protokol HTTP 12.9.2011
  3. Novinky protokolu WebSocket a režim fullscreen 7.11.2011

Č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.

Začal programovat v roce 1984 s programovatelnou kalkulačkou. Pokračoval k BASICu, assembleru Z80, Forthu, Pascalu, Céčku, dalším assemblerům, před časem v PHP a teď by rád neprogramoval a radši se věnoval starým počítačům.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 9

Přehled komentářů

Mennion Zajímavý článek
bauglir Re: Zajímavý článek
Mennion Re: Zajímavý článek
Pavol Zneuzivanie fulltext rezimu
František Kučera Bezpečnost?
bauglir Re: Zneuzivanie fulltext rezimu
bauglir Re: Zneuzivanie fulltext rezimu
Pavol Re: Zneuzivanie fulltext rezimu
srigi Node.js a Websockets
Zdroj: https://www.zdrojak.cz/?p=3570