Novinky protokolu WebSocket a režim fullscreen

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.