X-Git-Url: https://git.proxmox.com/?a=blobdiff_plain;f=core%2Frfb.js;h=a94542f6fe6951f3357f5d0efd2f2112247ceb6a;hb=67fefcf184c1f291292027a785b333ba1a16f0c9;hp=46b3158ebd6b3ad6e1ecf8f842ba59ff246db13a;hpb=d0703d1bdebe610261bc492e2c23877d359e5eb3;p=mirror_novnc.git diff --git a/core/rfb.js b/core/rfb.js index 46b3158..a94542f 100644 --- a/core/rfb.js +++ b/core/rfb.js @@ -1,7 +1,7 @@ /* * noVNC: HTML5 VNC client * Copyright (C) 2012 Joel Martin - * Copyright (C) 2016 Samuel Mannehed for Cendio AB + * Copyright (C) 2018 Samuel Mannehed for Cendio AB * Licensed under MPL 2.0 (see LICENSE.txt) * * See README.md for usage and integration instructions. @@ -11,89 +11,88 @@ */ import * as Log from './util/logging.js'; -import _ from './util/localization.js'; import { decodeUTF8 } from './util/strings.js'; -import { set_defaults, make_properties } from './util/properties.js'; +import EventTargetMixin from './util/eventtarget.js'; import Display from "./display.js"; -import { Keyboard, Mouse } from "./input/devices.js"; +import Keyboard from "./input/keyboard.js"; +import Mouse from "./input/mouse.js"; +import Cursor from "./util/cursor.js"; import Websock from "./websock.js"; -import Base64 from "./base64.js"; import DES from "./des.js"; import KeyTable from "./input/keysym.js"; import XtScancode from "./input/xtscancodes.js"; import Inflator from "./inflator.js"; +import { encodings, encodingName } from "./encodings.js"; +import "./util/polyfill.js"; -/*jslint white: false, browser: true */ -/*global window, Util, Display, Keyboard, Mouse, Websock, Websock_native, Base64, DES, KeyTable, Inflator, XtScancode */ +// How many seconds to wait for a disconnect to finish +const DISCONNECT_TIMEOUT = 3; -export default function RFB(defaults) { - "use strict"; - if (!defaults) { - defaults = {}; +export default function RFB(target, url, options) { + if (!target) { + throw Error("Must specify target"); } + if (!url) { + throw Error("Must specify URL"); + } + + this._target = target; + this._url = url; - this._rfb_host = ''; - this._rfb_port = 5900; - this._rfb_password = ''; - this._rfb_path = ''; + // Connection details + options = options || {}; + this._rfb_credentials = options.credentials || {}; + this._shared = 'shared' in options ? !!options.shared : true; + this._repeaterID = options.repeaterID || ''; + // Internal state this._rfb_connection_state = ''; this._rfb_init_state = ''; - this._rfb_version = 0; - this._rfb_max_version = 3.8; this._rfb_auth_scheme = ''; - this._rfb_disconnect_reason = ""; + this._rfb_clean_disconnect = true; + // Server capabilities + this._rfb_version = 0; + this._rfb_max_version = 3.8; this._rfb_tightvnc = false; this._rfb_xvp_ver = 0; - // In preference order - this._encodings = [ - ['COPYRECT', 0x01 ], - ['TIGHT', 0x07 ], - ['TIGHT_PNG', -260 ], - ['HEXTILE', 0x05 ], - ['RRE', 0x02 ], - ['RAW', 0x00 ], + this._fb_width = 0; + this._fb_height = 0; - // Psuedo-encoding settings + this._fb_name = ""; - //['JPEG_quality_lo', -32 ], - ['JPEG_quality_med', -26 ], - //['JPEG_quality_hi', -23 ], - //['compress_lo', -255 ], - ['compress_hi', -247 ], - - ['DesktopSize', -223 ], - ['last_rect', -224 ], - ['Cursor', -239 ], - ['QEMUExtendedKeyEvent', -258 ], - ['ExtendedDesktopSize', -308 ], - ['xvp', -309 ], - ['Fence', -312 ], - ['ContinuousUpdates', -313 ] - ]; + this._capabilities = { power: false }; - this._encHandlers = {}; - this._encNames = {}; - this._encStats = {}; + this._supportsFence = false; + + this._supportsContinuousUpdates = false; + this._enabledContinuousUpdates = false; + + this._supportsSetDesktopSize = false; + this._screen_id = 0; + this._screen_flags = 0; + + this._qemuExtKeyEventSupported = false; + // Internal objects this._sock = null; // Websock object this._display = null; // Display object this._flushing = false; // Display flushing state this._keyboard = null; // Keyboard input handler object this._mouse = null; // Mouse input handler object - this._disconnTimer = null; // disconnection timer - this._supportsFence = false; + // Timers + this._disconnTimer = null; // disconnection timer + this._resizeTimeout = null; // resize rate limiting - this._supportsContinuousUpdates = false; - this._enabledContinuousUpdates = false; + // Decoder states and stats + this._encHandlers = {}; + this._encStats = {}; - // Frame buffer update state this._FBU = { rects: 0, - subrects: 0, // RRE + subrects: 0, // RRE and HEXTILE lines: 0, // RAW tiles: 0, // HEXTILE bytes: 0, @@ -104,14 +103,11 @@ export default function RFB(defaults) { encoding: 0, subencoding: -1, background: null, - zlib: [] // TIGHT zlib streams + zlibs: [] // TIGHT zlib streams }; - - this._fb_Bpp = 4; - this._fb_depth = 3; - this._fb_width = 0; - this._fb_height = 0; - this._fb_name = ""; + for (let i = 0; i < 4; i++) { + this._FBU.zlibs[i] = new Inflator(); + } this._destBuff = null; this._paletteBuff = new Uint8Array(1024); // 256 * 4 (max palette size * max bytes-per-pixel) @@ -131,10 +127,6 @@ export default function RFB(defaults) { pixels: 0 }; - this._supportsSetDesktopSize = false; - this._screen_id = 0; - this._screen_flags = 0; - // Mouse state this._mouse_buttonMask = 0; this._mouse_arr = []; @@ -142,70 +134,66 @@ export default function RFB(defaults) { this._viewportDragPos = {}; this._viewportHasMoved = false; - // QEMU Extended Key Event support - default to false - this._qemuExtKeyEventSupported = false; - - // set the default value on user-facing properties - set_defaults(this, defaults, { - 'target': 'null', // VNC display rendering Canvas object - 'focusContainer': document, // DOM element that captures keyboard input - 'encrypt': false, // Use TLS/SSL/wss encryption - 'true_color': true, // Request true color pixel data - 'local_cursor': false, // Request locally rendered cursor - 'shared': true, // Request shared mode - 'view_only': false, // Disable client mouse/keyboard - 'xvp_password_sep': '@', // Separator for XVP password fields - 'disconnectTimeout': 3, // Time (s) to wait for disconnection - 'wsProtocols': ['binary'], // Protocols to use in the WebSocket connection - 'repeaterID': '', // [UltraVNC] RepeaterID to connect to - 'viewportDrag': false, // Move the viewport on mouse drags - - // Callback functions - 'onUpdateState': function () { }, // onUpdateState(rfb, state, oldstate): connection state change - 'onNotification': function () { }, // onNotification(rfb, msg, level, options): notification for UI - 'onDisconnected': function () { }, // onDisconnected(rfb, reason): disconnection finished - 'onPasswordRequired': function () { }, // onPasswordRequired(rfb, msg): VNC password is required - 'onClipboard': function () { }, // onClipboard(rfb, text): RFB clipboard contents received - 'onBell': function () { }, // onBell(rfb): RFB Bell message received - 'onFBUReceive': function () { }, // onFBUReceive(rfb, fbu): RFB FBU received but not yet processed - 'onFBUComplete': function () { }, // onFBUComplete(rfb, fbu): RFB FBU received and processed - 'onFBResize': function () { }, // onFBResize(rfb, width, height): frame buffer resized - 'onDesktopName': function () { }, // onDesktopName(rfb, name): desktop name received - 'onXvpInit': function () { } // onXvpInit(version): XVP extensions active for this connection - }); + // Bound event handlers + this._eventHandlers = { + focusCanvas: this._focusCanvas.bind(this), + windowResize: this._windowResize.bind(this), + }; // main setup Log.Debug(">> RFB.constructor"); - // populate encHandlers with bound versions - Object.keys(RFB.encodingHandlers).forEach(function (encName) { - this._encHandlers[encName] = RFB.encodingHandlers[encName].bind(this); - }.bind(this)); + // Create DOM elements + this._screen = document.createElement('div'); + this._screen.style.display = 'flex'; + this._screen.style.width = '100%'; + this._screen.style.height = '100%'; + this._screen.style.overflow = 'auto'; + this._screen.style.backgroundColor = 'rgb(40, 40, 40)'; + this._canvas = document.createElement('canvas'); + this._canvas.style.margin = 'auto'; + // Some browsers add an outline on focus + this._canvas.style.outline = 'none'; + // IE miscalculates width without this :( + this._canvas.style.flexShrink = '0'; + this._canvas.width = 0; + this._canvas.height = 0; + this._canvas.tabIndex = -1; + this._screen.appendChild(this._canvas); + + this._cursor = new Cursor(); - // Create lookup tables based on encoding number - for (var i = 0; i < this._encodings.length; i++) { - this._encHandlers[this._encodings[i][1]] = this._encHandlers[this._encodings[i][0]]; - this._encNames[this._encodings[i][1]] = this._encodings[i][0]; - this._encStats[this._encodings[i][1]] = [0, 0]; - } + // populate encHandlers with bound versions + this._encHandlers[encodings.encodingRaw] = RFB.encodingHandlers.RAW.bind(this); + this._encHandlers[encodings.encodingCopyRect] = RFB.encodingHandlers.COPYRECT.bind(this); + this._encHandlers[encodings.encodingRRE] = RFB.encodingHandlers.RRE.bind(this); + this._encHandlers[encodings.encodingHextile] = RFB.encodingHandlers.HEXTILE.bind(this); + this._encHandlers[encodings.encodingTight] = RFB.encodingHandlers.TIGHT.bind(this, false); + this._encHandlers[encodings.encodingTightPNG] = RFB.encodingHandlers.TIGHT.bind(this, true); + + this._encHandlers[encodings.pseudoEncodingDesktopSize] = RFB.encodingHandlers.DesktopSize.bind(this); + this._encHandlers[encodings.pseudoEncodingLastRect] = RFB.encodingHandlers.last_rect.bind(this); + this._encHandlers[encodings.pseudoEncodingCursor] = RFB.encodingHandlers.Cursor.bind(this); + this._encHandlers[encodings.pseudoEncodingQEMUExtendedKeyEvent] = RFB.encodingHandlers.QEMUExtendedKeyEvent.bind(this); + this._encHandlers[encodings.pseudoEncodingExtendedDesktopSize] = RFB.encodingHandlers.ExtendedDesktopSize.bind(this); // NB: nothing that needs explicit teardown should be done // before this point, since this can throw an exception try { - this._display = new Display({target: this._target, - onFlush: this._onFlush.bind(this)}); + this._display = new Display(this._canvas); } catch (exc) { Log.Error("Display exception: " + exc); throw exc; } + this._display.onflush = this._onFlush.bind(this); + this._display.clear(); - this._keyboard = new Keyboard({target: this._focusContainer, - onKeyEvent: this._handleKeyEvent.bind(this)}); + this._keyboard = new Keyboard(this._canvas); + this._keyboard.onkeyevent = this._handleKeyEvent.bind(this); - this._mouse = new Mouse({target: this._target, - onMouseButton: this._handleMouseButton.bind(this), - onMouseMove: this._handleMouseMove.bind(this), - notify: this._keyboard.sync.bind(this._keyboard)}); + this._mouse = new Mouse(this._canvas); + this._mouse.onmousebutton = this._handleMouseButton.bind(this); + this._mouse.onmousemove = this._handleMouseMove.bind(this); this._sock = new Websock(); this._sock.on('message', this._handle_message.bind(this)); @@ -215,38 +203,40 @@ export default function RFB(defaults) { this._rfb_init_state = 'ProtocolVersion'; Log.Debug("Starting VNC handshake"); } else { - this._fail("Unexpected server connection"); + this._fail("Unexpected server connection while " + + this._rfb_connection_state); } }.bind(this)); this._sock.on('close', function (e) { - Log.Warn("WebSocket on-close event"); - var msg = ""; + Log.Debug("WebSocket on-close event"); + let msg = ""; if (e.code) { - msg = " (code: " + e.code; + msg = "(code: " + e.code; if (e.reason) { msg += ", reason: " + e.reason; } msg += ")"; } switch (this._rfb_connection_state) { - case 'disconnecting': - this._updateConnectionState('disconnected'); - break; case 'connecting': - this._fail('Failed to connect to server', msg); + this._fail("Connection closed " + msg); break; case 'connected': // Handle disconnects that were initiated server-side this._updateConnectionState('disconnecting'); this._updateConnectionState('disconnected'); break; + case 'disconnecting': + // Normal disconnection path + this._updateConnectionState('disconnected'); + break; case 'disconnected': - this._fail("Unexpected server disconnect", - "Already disconnected: " + msg); + this._fail("Unexpected server disconnect " + + "when already disconnected " + msg); break; default: - this._fail("Unexpected server disconnect", - "Not in any state yet: " + msg); + this._fail("Unexpected server disconnect before connecting " + + msg); break; } this._sock.off('close'); @@ -255,33 +245,74 @@ export default function RFB(defaults) { Log.Warn("WebSocket on-error event"); }); - this._init_vars(); - this._cleanup(); - - var rmode = this._display.get_render_mode(); - Log.Info("Using native WebSockets, render mode: " + rmode); + // Slight delay of the actual connection so that the caller has + // time to set up callbacks + setTimeout(this._updateConnectionState.bind(this, 'connecting')); Log.Debug("<< RFB.constructor"); -}; +} RFB.prototype = { - // Public methods - connect: function (host, port, password, path) { - this._rfb_host = host; - this._rfb_port = port; - this._rfb_password = (password !== undefined) ? password : ""; - this._rfb_path = (path !== undefined) ? path : ""; + // ===== PROPERTIES ===== - if (!this._rfb_host || !this._rfb_port) { - return this._fail( - _("Must set host and port")); + dragViewport: false, + focusOnClick: true, + + _viewOnly: false, + get viewOnly() { return this._viewOnly; }, + set viewOnly(viewOnly) { + this._viewOnly = viewOnly; + + if (this._rfb_connection_state === "connecting" || + this._rfb_connection_state === "connected") { + if (viewOnly) { + this._keyboard.ungrab(); + this._mouse.ungrab(); + } else { + this._keyboard.grab(); + this._mouse.grab(); + } } + }, - this._rfb_init_state = ''; - this._updateConnectionState('connecting'); - return true; + get capabilities() { return this._capabilities; }, + + get touchButton() { return this._mouse.touchButton; }, + set touchButton(button) { this._mouse.touchButton = button; }, + + _clipViewport: false, + get clipViewport() { return this._clipViewport; }, + set clipViewport(viewport) { + this._clipViewport = viewport; + this._updateClip(); + }, + + _scaleViewport: false, + get scaleViewport() { return this._scaleViewport; }, + set scaleViewport(scale) { + this._scaleViewport = scale; + // Scaling trumps clipping, so we may need to adjust + // clipping when enabling or disabling scaling + if (scale && this._clipViewport) { + this._updateClip(); + } + this._updateScale(); + if (!scale && this._clipViewport) { + this._updateClip(); + } + }, + + _resizeSession: false, + get resizeSession() { return this._resizeSession; }, + set resizeSession(resize) { + this._resizeSession = resize; + if (resize) { + this._requestRemoteResize(); + } }, + // ===== PUBLIC METHODS ===== + disconnect: function () { this._updateConnectionState('disconnecting'); this._sock.off('error'); @@ -289,13 +320,13 @@ RFB.prototype = { this._sock.off('open'); }, - sendPassword: function (passwd) { - this._rfb_password = passwd; + sendCredentials: function (creds) { + this._rfb_credentials = creds; setTimeout(this._init_msg.bind(this), 0); }, sendCtrlAltDel: function () { - if (this._rfb_connection_state !== 'connected' || this._view_only) { return false; } + if (this._rfb_connection_state !== 'connected' || this._viewOnly) { return; } Log.Info("Sending Ctrl-Alt-Del"); this.sendKey(KeyTable.XK_Control_L, "ControlLeft", true); @@ -304,171 +335,239 @@ RFB.prototype = { this.sendKey(KeyTable.XK_Delete, "Delete", false); this.sendKey(KeyTable.XK_Alt_L, "AltLeft", false); this.sendKey(KeyTable.XK_Control_L, "ControlLeft", false); - - return true; }, - xvpOp: function (ver, op) { - if (this._rfb_xvp_ver < ver) { return false; } - Log.Info("Sending XVP operation " + op + " (version " + ver + ")"); - this._sock.send_string("\xFA\x00" + String.fromCharCode(ver) + String.fromCharCode(op)); - return true; + machineShutdown: function () { + this._xvpOp(1, 2); }, - xvpShutdown: function () { - return this.xvpOp(1, 2); + machineReboot: function () { + this._xvpOp(1, 3); }, - xvpReboot: function () { - return this.xvpOp(1, 3); - }, - - xvpReset: function () { - return this.xvpOp(1, 4); + machineReset: function () { + this._xvpOp(1, 4); }, // Send a key press. If 'down' is not specified then send a down key // followed by an up key. sendKey: function (keysym, code, down) { - if (this._rfb_connection_state !== 'connected' || this._view_only) { return false; } + if (this._rfb_connection_state !== 'connected' || this._viewOnly) { return; } if (down === undefined) { this.sendKey(keysym, code, true); this.sendKey(keysym, code, false); - return true; + return; } - if (this._qemuExtKeyEventSupported) { - var scancode = XtScancode[code]; + const scancode = XtScancode[code]; - if (scancode === undefined) { - Log.Error('Unable to find a xt scancode for code: ' + code); - // FIXME: not in the spec, but this is what - // gtk-vnc does - scancode = 0; - } + if (this._qemuExtKeyEventSupported && scancode) { + // 0 is NoSymbol + keysym = keysym || 0; Log.Info("Sending key (" + (down ? "down" : "up") + "): keysym " + keysym + ", scancode " + scancode); RFB.messages.QEMUExtendedKeyEvent(this._sock, keysym, down, scancode); } else { + if (!keysym) { + return; + } Log.Info("Sending keysym (" + (down ? "down" : "up") + "): " + keysym); RFB.messages.keyEvent(this._sock, keysym, down ? 1 : 0); } - - return true; }, - clipboardPasteFrom: function (text) { - if (this._rfb_connection_state !== 'connected' || this._view_only) { return; } - RFB.messages.clientCutText(this._sock, text); + focus: function () { + this._canvas.focus(); }, - // Requests a change of remote desktop size. This message is an extension - // and may only be sent if we have received an ExtendedDesktopSize message - requestDesktopSize: function (width, height) { - if (this._rfb_connection_state !== 'connected' || - this._view_only) { - return false; - } - - if (this._supportsSetDesktopSize) { - RFB.messages.setDesktopSize(this._sock, width, height, - this._screen_id, this._screen_flags); - this._sock.flush(); - return true; - } else { - return false; - } + blur: function () { + this._canvas.blur(); }, + clipboardPasteFrom: function (text) { + if (this._rfb_connection_state !== 'connected' || this._viewOnly) { return; } + RFB.messages.clientCutText(this._sock, text); + }, - // Private methods + // ===== PRIVATE METHODS ===== _connect: function () { Log.Debug(">> RFB.connect"); - this._init_vars(); - var uri; - if (typeof UsingSocketIO !== 'undefined') { - uri = 'http'; - } else { - uri = this._encrypt ? 'wss' : 'ws'; - } - - uri += '://' + this._rfb_host + ':' + this._rfb_port + '/' + this._rfb_path; - Log.Info("connecting to " + uri); + Log.Info("connecting to " + this._url); try { // WebSocket.onopen transitions to the RFB init states - this._sock.open(uri, this._wsProtocols); + this._sock.open(this._url, ['binary']); } catch (e) { if (e.name === 'SyntaxError') { - this._fail("Invalid host or port value given", e); + this._fail("Invalid host or port (" + e + ")"); } else { - this._fail("Error while connecting", e); + this._fail("Error when opening socket (" + e + ")"); } } + // Make our elements part of the page + this._target.appendChild(this._screen); + + this._cursor.attach(this._canvas); + + // Monitor size changes of the screen + // FIXME: Use ResizeObserver, or hidden overflow + window.addEventListener('resize', this._eventHandlers.windowResize); + + // Always grab focus on some kind of click event + this._canvas.addEventListener("mousedown", this._eventHandlers.focusCanvas); + this._canvas.addEventListener("touchstart", this._eventHandlers.focusCanvas); + Log.Debug("<< RFB.connect"); }, _disconnect: function () { Log.Debug(">> RFB.disconnect"); - this._cleanup(); + this._cursor.detach(); + this._canvas.removeEventListener("mousedown", this._eventHandlers.focusCanvas); + this._canvas.removeEventListener("touchstart", this._eventHandlers.focusCanvas); + window.removeEventListener('resize', this._eventHandlers.windowResize); + this._keyboard.ungrab(); + this._mouse.ungrab(); this._sock.close(); this._print_stats(); + try { + this._target.removeChild(this._screen); + } catch (e) { + if (e.name === 'NotFoundError') { + // Some cases where the initial connection fails + // can disconnect before the _screen is created + } else { + throw e; + } + } + clearTimeout(this._resizeTimeout); Log.Debug("<< RFB.disconnect"); }, - _init_vars: function () { - // reset state - this._FBU.rects = 0; - this._FBU.subrects = 0; // RRE and HEXTILE - this._FBU.lines = 0; // RAW - this._FBU.tiles = 0; // HEXTILE - this._FBU.zlibs = []; // TIGHT zlib encoders - this._mouse_buttonMask = 0; - this._mouse_arr = []; - this._rfb_tightvnc = false; + _print_stats: function () { + const stats = this._encStats; + + Log.Info("Encoding stats for this connection:"); + Object.keys(stats).forEach(function (key) { + const s = stats[key]; + if (s[0] + s[1] > 0) { + Log.Info(" " + encodingName(key) + ": " + s[0] + " rects"); + } + }); + + Log.Info("Encoding stats since page load:"); + Object.keys(stats).forEach(function (key) { + const s = stats[key]; + Log.Info(" " + encodingName(key) + ": " + s[1] + " rects"); + }); + }, - // Clear the per connection encoding stats - var i; - for (i = 0; i < this._encodings.length; i++) { - this._encStats[this._encodings[i][1]][0] = 0; + _focusCanvas: function(event) { + // Respect earlier handlers' request to not do side-effects + if (event.defaultPrevented) { + return; } - for (i = 0; i < 4; i++) { - this._FBU.zlibs[i] = new Inflator(); + if (!this.focusOnClick) { + return; } + + this.focus(); }, - _print_stats: function () { - Log.Info("Encoding stats for this connection:"); - var i, s; - for (i = 0; i < this._encodings.length; i++) { - s = this._encStats[this._encodings[i][1]]; - if (s[0] + s[1] > 0) { - Log.Info(" " + this._encodings[i][0] + ": " + s[0] + " rects"); - } + _windowResize: function (event) { + // If the window resized then our screen element might have + // as well. Update the viewport dimensions. + window.requestAnimationFrame(function () { + this._updateClip(); + this._updateScale(); + }.bind(this)); + + if (this._resizeSession) { + // Request changing the resolution of the remote display to + // the size of the local browser viewport. + + // In order to not send multiple requests before the browser-resize + // is finished we wait 0.5 seconds before sending the request. + clearTimeout(this._resizeTimeout); + this._resizeTimeout = setTimeout(this._requestRemoteResize.bind(this), 500); + } + }, + + // Update state of clipping in Display object, and make sure the + // configured viewport matches the current screen size + _updateClip: function () { + const cur_clip = this._display.clipViewport; + let new_clip = this._clipViewport; + + if (this._scaleViewport) { + // Disable viewport clipping if we are scaling + new_clip = false; } - Log.Info("Encoding stats since page load:"); - for (i = 0; i < this._encodings.length; i++) { - s = this._encStats[this._encodings[i][1]]; - Log.Info(" " + this._encodings[i][0] + ": " + s[1] + " rects"); + if (cur_clip !== new_clip) { + this._display.clipViewport = new_clip; + } + + if (new_clip) { + // When clipping is enabled, the screen is limited to + // the size of the container. + const size = this._screenSize(); + this._display.viewportChangeSize(size.w, size.h); + this._fixScrollbars(); } }, - _cleanup: function () { - if (!this._view_only) { this._keyboard.ungrab(); } - if (!this._view_only) { this._mouse.ungrab(); } - this._display.defaultCursor(); - if (Log.get_logging() !== 'debug') { - // Show noVNC logo on load and when disconnected, unless in - // debug mode - this._display.clear(); + _updateScale: function () { + if (!this._scaleViewport) { + this._display.scale = 1.0; + } else { + const size = this._screenSize(); + this._display.autoscale(size.w, size.h); } + this._fixScrollbars(); + }, + + // Requests a change of remote desktop size. This message is an extension + // and may only be sent if we have received an ExtendedDesktopSize message + _requestRemoteResize: function () { + clearTimeout(this._resizeTimeout); + this._resizeTimeout = null; + + if (!this._resizeSession || this._viewOnly || + !this._supportsSetDesktopSize) { + return; + } + + const size = this._screenSize(); + RFB.messages.setDesktopSize(this._sock, size.w, size.h, + this._screen_id, this._screen_flags); + + Log.Debug('Requested new desktop size: ' + + size.w + 'x' + size.h); + }, + + // Gets the the size of the available screen + _screenSize: function () { + return { w: this._screen.offsetWidth, + h: this._screen.offsetHeight }; + }, + + _fixScrollbars: function () { + // This is a hack because Chrome screws up the calculation + // for when scrollbars are needed. So to fix it we temporarily + // toggle them off and on. + const orig = this._screen.style.overflow; + this._screen.style.overflow = 'hidden'; + // Force Chrome to recalculate the layout by asking for + // an element's dimensions + this._screen.getBoundingClientRect(); + this._screen.style.overflow = orig; }, /* @@ -479,7 +578,7 @@ RFB.prototype = { * disconnected - permanent state */ _updateConnectionState: function (state) { - var oldstate = this._rfb_connection_state; + const oldstate = this._rfb_connection_state; if (state === oldstate) { Log.Debug("Already in state '" + state + "', ignoring"); @@ -534,9 +633,8 @@ RFB.prototype = { // State change actions this._rfb_connection_state = state; - this._onUpdateState(this, state, oldstate); - var smsg = "New state '" + state + "', was '" + oldstate + "'."; + const smsg = "New state '" + state + "', was '" + oldstate + "'."; Log.Debug(smsg); if (this._disconnTimer && state !== 'disconnecting') { @@ -549,57 +647,52 @@ RFB.prototype = { } switch (state) { - case 'disconnected': - // Call onDisconnected callback after onUpdateState since - // we don't know if the UI only displays the latest message - if (this._rfb_disconnect_reason !== "") { - this._onDisconnected(this, this._rfb_disconnect_reason); - } else { - // No reason means clean disconnect - this._onDisconnected(this); - } - break; - case 'connecting': this._connect(); break; + case 'connected': + this.dispatchEvent(new CustomEvent("connect", { detail: {} })); + break; + case 'disconnecting': this._disconnect(); this._disconnTimer = setTimeout(function () { - this._rfb_disconnect_reason = _("Disconnect timeout"); + Log.Error("Disconnection timed out."); this._updateConnectionState('disconnected'); - }.bind(this), this._disconnectTimeout * 1000); + }.bind(this), DISCONNECT_TIMEOUT * 1000); + break; + + case 'disconnected': + this.dispatchEvent(new CustomEvent( + "disconnect", { detail: + { clean: this._rfb_clean_disconnect } })); break; } }, /* Print errors and disconnect * - * The optional parameter 'details' is used for information that + * The parameter 'details' is used for information that * should be logged but not sent to the user interface. */ - _fail: function (msg, details) { - var fullmsg = msg; - if (typeof details !== 'undefined') { - fullmsg = msg + " (" + details + ")"; - } + _fail: function (details) { switch (this._rfb_connection_state) { case 'disconnecting': - Log.Error("Failed when disconnecting: " + fullmsg); + Log.Error("Failed when disconnecting: " + details); break; case 'connected': - Log.Error("Failed while connected: " + fullmsg); + Log.Error("Failed while connected: " + details); break; case 'connecting': - Log.Error("Failed when connecting: " + fullmsg); + Log.Error("Failed when connecting: " + details); break; default: - Log.Error("RFB failure: " + fullmsg); + Log.Error("RFB failure: " + details); break; } - this._rfb_disconnect_reason = msg; //This is sent to the UI + this._rfb_clean_disconnect = false; //This is sent to the UI // Transition to disconnected without waiting for socket to close this._updateConnectionState('disconnecting'); @@ -608,31 +701,10 @@ RFB.prototype = { return false; }, - /* - * Send a notification to the UI. Valid levels are: - * 'normal'|'warn'|'error' - * - * NOTE: Options could be added in the future. - * NOTE: If this function is called multiple times, remember that the - * interface could be only showing the latest notification. - */ - _notification: function(msg, level, options) { - switch (level) { - case 'normal': - case 'warn': - case 'error': - Log.Debug("Notification[" + level + "]:" + msg); - break; - default: - Log.Error("Invalid notification level: " + level); - return; - } - - if (options) { - this._onNotification(this, msg, level, options); - } else { - this._onNotification(this, msg, level); - } + _setCapability: function (cap, val) { + this._capabilities[cap] = val; + this.dispatchEvent(new CustomEvent("capabilities", + { detail: { capabilities: this._capabilities } })); }, _handle_message: function () { @@ -672,29 +744,37 @@ RFB.prototype = { if (down) { this._mouse_buttonMask |= bmask; } else { - this._mouse_buttonMask ^= bmask; + this._mouse_buttonMask &= ~bmask; } - if (this._viewportDrag) { + if (this.dragViewport) { if (down && !this._viewportDragging) { this._viewportDragging = true; this._viewportDragPos = {'x': x, 'y': y}; + this._viewportHasMoved = false; // Skip sending mouse events return; } else { this._viewportDragging = false; - // If the viewport didn't actually move, then treat as a mouse click event - // Send the button down event here, as the button up event is sent at the end of this function - if (!this._viewportHasMoved && !this._view_only) { - RFB.messages.pointerEvent(this._sock, this._display.absX(x), this._display.absY(y), bmask); + // If we actually performed a drag then we are done + // here and should not send any mouse events + if (this._viewportHasMoved) { + return; } - this._viewportHasMoved = false; + + // Otherwise we treat this as a mouse click event. + // Send the button down event here, as the button up + // event is sent at the end of this function. + RFB.messages.pointerEvent(this._sock, + this._display.absX(x), + this._display.absY(y), + bmask); } } - if (this._view_only) { return; } // View only, skip mouse events + if (this._viewOnly) { return; } // View only, skip mouse events if (this._rfb_connection_state !== 'connected') { return; } RFB.messages.pointerEvent(this._sock, this._display.absX(x), this._display.absY(y), this._mouse_buttonMask); @@ -702,12 +782,12 @@ RFB.prototype = { _handleMouseMove: function (x, y) { if (this._viewportDragging) { - var deltaX = this._viewportDragPos.x - x; - var deltaY = this._viewportDragPos.y - y; + const deltaX = this._viewportDragPos.x - x; + const deltaY = this._viewportDragPos.y - y; // The goal is to trigger on a certain physical width, the // devicePixelRatio brings us a bit closer but is not optimal. - var dragThreshold = 10 * (window.devicePixelRatio || 1); + const dragThreshold = 10 * (window.devicePixelRatio || 1); if (this._viewportHasMoved || (Math.abs(deltaX) > dragThreshold || Math.abs(deltaY) > dragThreshold)) { @@ -721,7 +801,7 @@ RFB.prototype = { return; } - if (this._view_only) { return; } // View only, skip mouse events + if (this._viewOnly) { return; } // View only, skip mouse events if (this._rfb_connection_state !== 'connected') { return; } RFB.messages.pointerEvent(this._sock, this._display.absX(x), this._display.absY(y), this._mouse_buttonMask); @@ -731,13 +811,12 @@ RFB.prototype = { _negotiate_protocol_version: function () { if (this._sock.rQlen() < 12) { - return this._fail("Error while negotiating with server", - "Incomplete protocol version"); + return this._fail("Received incomplete protocol version."); } - var sversion = this._sock.rQshiftStr(12).substr(4, 7); + const sversion = this._sock.rQshiftStr(12).substr(4, 7); Log.Info("Server ProtocolVersion: " + sversion); - var is_repeater = 0; + let is_repeater = 0; switch (sversion) { case "000.000": // UltraVNC repeater is_repeater = 1; @@ -757,12 +836,11 @@ RFB.prototype = { this._rfb_version = 3.8; break; default: - return this._fail("Unsupported server", - "Invalid server version: " + sversion); + return this._fail("Invalid server version " + sversion); } if (is_repeater) { - var repeaterID = this._repeaterID; + let repeaterID = "ID:" + this._repeaterID; while (repeaterID.length < 250) { repeaterID += "\0"; } @@ -774,7 +852,7 @@ RFB.prototype = { this._rfb_version = this._rfb_max_version; } - var cversion = "00" + parseInt(this._rfb_version, 10) + + const cversion = "00" + parseInt(this._rfb_version, 10) + ".00" + ((this._rfb_version * 10) % 10); this._sock.send_string("RFB " + cversion + "\n"); Log.Debug('Sent ProtocolVersion: ' + cversion); @@ -786,7 +864,7 @@ RFB.prototype = { // Polyfill since IE and PhantomJS doesn't have // TypedArray.includes() function includes(item, array) { - for (var i = 0; i < array.length; i++) { + for (let i = 0; i < array.length; i++) { if (array[i] === item) { return true; } @@ -796,17 +874,14 @@ RFB.prototype = { if (this._rfb_version >= 3.7) { // Server sends supported list, client decides - var num_types = this._sock.rQshift8(); + const num_types = this._sock.rQshift8(); if (this._sock.rQwait("security type", num_types, 1)) { return false; } if (num_types === 0) { - var strlen = this._sock.rQshift32(); - var reason = this._sock.rQshiftStr(strlen); - return this._fail("Error while negotiating with server", - "Security failure: " + reason); + return this._handle_security_failure("no security types"); } - var types = this._sock.rQshiftBytes(num_types); + const types = this._sock.rQshiftBytes(num_types); Log.Debug("Server security types: " + types); // Look for each auth in preferred order @@ -820,8 +895,7 @@ RFB.prototype = { } else if (includes(2, types)) { this._rfb_auth_scheme = 2; // VNC Auth } else { - return this._fail("Unsupported server", - "Unsupported security types: " + types); + return this._fail("Unsupported security types (types: " + types + ")"); } this._sock.send([this._rfb_auth_scheme]); @@ -837,69 +911,130 @@ RFB.prototype = { return this._init_msg(); // jump to authentication }, + /* + * Get the security failure reason if sent from the server and + * send the 'securityfailure' event. + * + * - The optional parameter context can be used to add some extra + * context to the log output. + * + * - The optional parameter security_result_status can be used to + * add a custom status code to the event. + */ + _handle_security_failure: function (context, security_result_status) { + + if (typeof context === 'undefined') { + context = ""; + } else { + context = " on " + context; + } + + if (typeof security_result_status === 'undefined') { + security_result_status = 1; // fail + } + + if (this._sock.rQwait("reason length", 4)) { + return false; + } + const strlen = this._sock.rQshift32(); + let reason = ""; + + if (strlen > 0) { + if (this._sock.rQwait("reason", strlen, 8)) { return false; } + reason = this._sock.rQshiftStr(strlen); + } + + if (reason !== "") { + this.dispatchEvent(new CustomEvent( + "securityfailure", + { detail: { status: security_result_status, reason: reason } })); + + return this._fail("Security negotiation failed" + context + + " (reason: " + reason + ")"); + } else { + this.dispatchEvent(new CustomEvent( + "securityfailure", + { detail: { status: security_result_status } })); + + return this._fail("Security negotiation failed" + context); + } + }, + // authentication _negotiate_xvp_auth: function () { - var xvp_sep = this._xvp_password_sep; - var xvp_auth = this._rfb_password.split(xvp_sep); - if (xvp_auth.length < 3) { - var msg = 'XVP credentials required (user' + xvp_sep + - 'target' + xvp_sep + 'password) -- got only ' + this._rfb_password; - this._onPasswordRequired(this, msg); + if (!this._rfb_credentials.username || + !this._rfb_credentials.password || + !this._rfb_credentials.target) { + this.dispatchEvent(new CustomEvent( + "credentialsrequired", + { detail: { types: ["username", "password", "target"] } })); return false; } - var xvp_auth_str = String.fromCharCode(xvp_auth[0].length) + - String.fromCharCode(xvp_auth[1].length) + - xvp_auth[0] + - xvp_auth[1]; + const xvp_auth_str = String.fromCharCode(this._rfb_credentials.username.length) + + String.fromCharCode(this._rfb_credentials.target.length) + + this._rfb_credentials.username + + this._rfb_credentials.target; this._sock.send_string(xvp_auth_str); - this._rfb_password = xvp_auth.slice(2).join(xvp_sep); this._rfb_auth_scheme = 2; return this._negotiate_authentication(); }, _negotiate_std_vnc_auth: function () { - if (this._rfb_password.length === 0) { - this._onPasswordRequired(this); + if (this._sock.rQwait("auth challenge", 16)) { return false; } + + if (!this._rfb_credentials.password) { + this.dispatchEvent(new CustomEvent( + "credentialsrequired", + { detail: { types: ["password"] } })); return false; } - if (this._sock.rQwait("auth challenge", 16)) { return false; } - // TODO(directxman12): make genDES not require an Array - var challenge = Array.prototype.slice.call(this._sock.rQshiftBytes(16)); - var response = RFB.genDES(this._rfb_password, challenge); + const challenge = Array.prototype.slice.call(this._sock.rQshiftBytes(16)); + const response = RFB.genDES(this._rfb_credentials.password, challenge); this._sock.send(response); this._rfb_init_state = "SecurityResult"; return true; }, _negotiate_tight_tunnels: function (numTunnels) { - var clientSupportedTunnelTypes = { + const clientSupportedTunnelTypes = { 0: { vendor: 'TGHT', signature: 'NOTUNNEL' } }; - var serverSupportedTunnelTypes = {}; + const serverSupportedTunnelTypes = {}; // receive tunnel capabilities - for (var i = 0; i < numTunnels; i++) { - var cap_code = this._sock.rQshift32(); - var cap_vendor = this._sock.rQshiftStr(4); - var cap_signature = this._sock.rQshiftStr(8); + for (let i = 0; i < numTunnels; i++) { + const cap_code = this._sock.rQshift32(); + const cap_vendor = this._sock.rQshiftStr(4); + const cap_signature = this._sock.rQshiftStr(8); serverSupportedTunnelTypes[cap_code] = { vendor: cap_vendor, signature: cap_signature }; } + Log.Debug("Server Tight tunnel types: " + serverSupportedTunnelTypes); + + // Siemens touch panels have a VNC server that supports NOTUNNEL, + // but forgets to advertise it. Try to detect such servers by + // looking for their custom tunnel type. + if (serverSupportedTunnelTypes[1] && + (serverSupportedTunnelTypes[1].vendor === "SICR") && + (serverSupportedTunnelTypes[1].signature === "SCHANNEL")) { + Log.Debug("Detected Siemens server. Assuming NOTUNNEL support."); + serverSupportedTunnelTypes[0] = { vendor: 'TGHT', signature: 'NOTUNNEL' }; + } + // choose the notunnel type if (serverSupportedTunnelTypes[0]) { if (serverSupportedTunnelTypes[0].vendor != clientSupportedTunnelTypes[0].vendor || serverSupportedTunnelTypes[0].signature != clientSupportedTunnelTypes[0].signature) { - return this._fail("Unsupported server", - "Client's tunnel type had the incorrect " + + return this._fail("Client's tunnel type had the incorrect " + "vendor or signature"); } + Log.Debug("Selected tunnel type: " + clientSupportedTunnelTypes[0]); this._sock.send([0, 0, 0, 0]); // use NOTUNNEL return false; // wait until we receive the sub auth count to continue } else { - return this._fail("Unsupported server", - "Server wanted tunnels, but doesn't support " + + return this._fail("Server wanted tunnels, but doesn't support " + "the notunnel type"); } }, @@ -907,7 +1042,7 @@ RFB.prototype = { _negotiate_tight_auth: function () { if (!this._rfb_tightvnc) { // first pass, do the tunnel negotiation if (this._sock.rQwait("num tunnels", 4)) { return false; } - var numTunnels = this._sock.rQshift32(); + const numTunnels = this._sock.rQshift32(); if (numTunnels > 0 && this._sock.rQwait("tunnel capabilities", 16 * numTunnels, 4)) { return false; } this._rfb_tightvnc = true; @@ -920,7 +1055,7 @@ RFB.prototype = { // second pass, do the sub-auth negotiation if (this._sock.rQwait("sub auth count", 4)) { return false; } - var subAuthCount = this._sock.rQshift32(); + const subAuthCount = this._sock.rQshift32(); if (subAuthCount === 0) { // empty sub-auth list received means 'no auth' subtype selected this._rfb_init_state = 'SecurityResult'; return true; @@ -928,22 +1063,25 @@ RFB.prototype = { if (this._sock.rQwait("sub auth capabilities", 16 * subAuthCount, 4)) { return false; } - var clientSupportedTypes = { + const clientSupportedTypes = { 'STDVNOAUTH__': 1, 'STDVVNCAUTH_': 2 }; - var serverSupportedTypes = []; + const serverSupportedTypes = []; - for (var i = 0; i < subAuthCount; i++) { - var capNum = this._sock.rQshift32(); - var capabilities = this._sock.rQshiftStr(12); + for (let i = 0; i < subAuthCount; i++) { + this._sock.rQshift32(); // capNum + const capabilities = this._sock.rQshiftStr(12); serverSupportedTypes.push(capabilities); } - for (var authType in clientSupportedTypes) { + Log.Debug("Server Tight authentication types: " + serverSupportedTypes); + + for (let authType in clientSupportedTypes) { if (serverSupportedTypes.indexOf(authType) != -1) { this._sock.send([0, 0, 0, clientSupportedTypes[authType]]); + Log.Debug("Selected authentication type: " + authType); switch (authType) { case 'STDVNOAUTH__': // no auth @@ -953,24 +1091,19 @@ RFB.prototype = { this._rfb_auth_scheme = 2; return this._init_msg(); default: - return this._fail("Unsupported server", - "Unsupported tiny auth scheme: " + - authType); + return this._fail("Unsupported tiny auth scheme " + + "(scheme: " + authType + ")"); } } } - return this._fail("Unsupported server", - "No supported sub-auth types!"); + return this._fail("No supported sub-auth types!"); }, _negotiate_authentication: function () { switch (this._rfb_auth_scheme) { case 0: // connection failed - if (this._sock.rQwait("auth reason", 4)) { return false; } - var strlen = this._sock.rQshift32(); - var reason = this._sock.rQshiftStr(strlen); - return this._fail("Authentication failure", reason); + return this._handle_security_failure("authentication scheme"); case 1: // no auth if (this._rfb_version >= 3.8) { @@ -990,34 +1123,30 @@ RFB.prototype = { return this._negotiate_tight_auth(); default: - return this._fail("Unsupported server", - "Unsupported auth scheme: " + - this._rfb_auth_scheme); + return this._fail("Unsupported auth scheme (scheme: " + + this._rfb_auth_scheme + ")"); } }, _handle_security_result: function () { if (this._sock.rQwait('VNC auth response ', 4)) { return false; } - switch (this._sock.rQshift32()) { - case 0: // OK - this._rfb_init_state = 'ClientInitialisation'; - Log.Debug('Authentication OK'); - return this._init_msg(); - case 1: // failed - if (this._rfb_version >= 3.8) { - var length = this._sock.rQshift32(); - if (this._sock.rQwait("SecurityResult reason", length, 8)) { return false; } - var reason = this._sock.rQshiftStr(length); - return this._fail("Authentication failure", reason); - } else { - return this._fail("Authentication failure"); - } - return false; - case 2: - return this._fail("Too many authentication attempts"); - default: - return this._fail("Unsupported server", - "Unknown SecurityResult"); + + const status = this._sock.rQshift32(); + + if (status === 0) { // OK + this._rfb_init_state = 'ClientInitialisation'; + Log.Debug('Authentication OK'); + return this._init_msg(); + } else { + if (this._rfb_version >= 3.8) { + return this._handle_security_failure("security result", status); + } else { + this.dispatchEvent(new CustomEvent( + "securityfailure", + { detail: { status: status } })); + + return this._fail("Security handshake failed"); + } } }, @@ -1025,41 +1154,40 @@ RFB.prototype = { if (this._sock.rQwait("server initialization", 24)) { return false; } /* Screen size */ - this._fb_width = this._sock.rQshift16(); - this._fb_height = this._sock.rQshift16(); - this._destBuff = new Uint8Array(this._fb_width * this._fb_height * 4); + const width = this._sock.rQshift16(); + const height = this._sock.rQshift16(); /* PIXEL_FORMAT */ - var bpp = this._sock.rQshift8(); - var depth = this._sock.rQshift8(); - var big_endian = this._sock.rQshift8(); - var true_color = this._sock.rQshift8(); - - var red_max = this._sock.rQshift16(); - var green_max = this._sock.rQshift16(); - var blue_max = this._sock.rQshift16(); - var red_shift = this._sock.rQshift8(); - var green_shift = this._sock.rQshift8(); - var blue_shift = this._sock.rQshift8(); + const bpp = this._sock.rQshift8(); + const depth = this._sock.rQshift8(); + const big_endian = this._sock.rQshift8(); + const true_color = this._sock.rQshift8(); + + const red_max = this._sock.rQshift16(); + const green_max = this._sock.rQshift16(); + const blue_max = this._sock.rQshift16(); + const red_shift = this._sock.rQshift8(); + const green_shift = this._sock.rQshift8(); + const blue_shift = this._sock.rQshift8(); this._sock.rQskipBytes(3); // padding // NB(directxman12): we don't want to call any callbacks or print messages until // *after* we're past the point where we could backtrack /* Connection name/title */ - var name_length = this._sock.rQshift32(); + const name_length = this._sock.rQshift32(); if (this._sock.rQwait('server init name', name_length, 24)) { return false; } this._fb_name = decodeUTF8(this._sock.rQshiftStr(name_length)); if (this._rfb_tightvnc) { if (this._sock.rQwait('TightVNC extended server init header', 8, 24 + name_length)) { return false; } // In TightVNC mode, ServerInit message is extended - var numServerMessages = this._sock.rQshift16(); - var numClientMessages = this._sock.rQshift16(); - var numEncodings = this._sock.rQshift16(); + const numServerMessages = this._sock.rQshift16(); + const numClientMessages = this._sock.rQshift16(); + const numEncodings = this._sock.rQshift16(); this._sock.rQskipBytes(2); // padding - var totalMessagesLength = (numServerMessages + numClientMessages + numEncodings) * 16; + const totalMessagesLength = (numServerMessages + numClientMessages + numEncodings) * 16; if (this._sock.rQwait('TightVNC extended server init header', totalMessagesLength, 32 + name_length)) { return false; } // we don't actually do anything with the capability information that TIGHT sends, @@ -1077,7 +1205,7 @@ RFB.prototype = { // NB(directxman12): these are down here so that we don't run them multiple times // if we backtrack - Log.Info("Screen: " + this._fb_width + "x" + this._fb_height + + Log.Info("Screen: " + width + "x" + height + ", bpp: " + bpp + ", depth: " + depth + ", big_endian: " + big_endian + ", true_color: " + true_color + @@ -1101,30 +1229,24 @@ RFB.prototype = { } // we're past the point where we could backtrack, so it's safe to call this - this._onDesktopName(this, this._fb_name); + this.dispatchEvent(new CustomEvent( + "desktopname", + { detail: { name: this._fb_name } })); - if (this._true_color && this._fb_name === "Intel(r) AMT KVM") { - Log.Warn("Intel AMT KVM only supports 8/16 bit depths. Disabling true color"); - this._true_color = false; - } + this._resize(width, height); - this._display.set_true_color(this._true_color); - this._display.resize(this._fb_width, this._fb_height); - this._onFBResize(this, this._fb_width, this._fb_height); + if (!this._viewOnly) { this._keyboard.grab(); } + if (!this._viewOnly) { this._mouse.grab(); } - if (!this._view_only) { this._keyboard.grab(); } - if (!this._view_only) { this._mouse.grab(); } + this._fb_depth = 24; - if (this._true_color) { - this._fb_Bpp = 4; - this._fb_depth = 3; - } else { - this._fb_Bpp = 1; - this._fb_depth = 1; + if (this._fb_name === "Intel(r) AMT KVM") { + Log.Warn("Intel AMT KVM only supports 8/16 bit depths. Using low color mode."); + this._fb_depth = 8; } - RFB.messages.pixelFormat(this._sock, this._fb_Bpp, this._fb_depth, this._true_color); - RFB.messages.clientEncodings(this._sock, this._encodings, this._local_cursor, this._true_color); + RFB.messages.pixelFormat(this._sock, this._fb_depth, true); + this._sendEncodings(); RFB.messages.fbUpdateRequest(this._sock, false, 0, 0, this._fb_width, this._fb_height); this._timing.fbu_rt_start = (new Date()).getTime(); @@ -1134,6 +1256,39 @@ RFB.prototype = { return true; }, + _sendEncodings: function () { + const encs = []; + + // In preference order + encs.push(encodings.encodingCopyRect); + // Only supported with full depth support + if (this._fb_depth == 24) { + encs.push(encodings.encodingTight); + encs.push(encodings.encodingTightPNG); + encs.push(encodings.encodingHextile); + encs.push(encodings.encodingRRE); + } + encs.push(encodings.encodingRaw); + + // Psuedo-encoding settings + encs.push(encodings.pseudoEncodingQualityLevel0 + 6); + encs.push(encodings.pseudoEncodingCompressLevel0 + 2); + + encs.push(encodings.pseudoEncodingDesktopSize); + encs.push(encodings.pseudoEncodingLastRect); + encs.push(encodings.pseudoEncodingQEMUExtendedKeyEvent); + encs.push(encodings.pseudoEncodingExtendedDesktopSize); + encs.push(encodings.pseudoEncodingXvp); + encs.push(encodings.pseudoEncodingFence); + encs.push(encodings.pseudoEncodingContinuousUpdates); + + if (this._fb_depth == 24) { + encs.push(encodings.pseudoEncodingCursor); + } + + RFB.messages.clientEncodings(this._sock, encs); + }, + /* RFB protocol initialization states: * ProtocolVersion * Security @@ -1165,29 +1320,15 @@ RFB.prototype = { return this._negotiate_server_init(); default: - return this._fail("Internal error", "Unknown init state: " + - this._rfb_init_state); + return this._fail("Unknown init state (state: " + + this._rfb_init_state + ")"); } }, _handle_set_colour_map_msg: function () { Log.Debug("SetColorMapEntries"); - this._sock.rQskip8(); // Padding - - var first_colour = this._sock.rQshift16(); - var num_colours = this._sock.rQshift16(); - if (this._sock.rQwait('SetColorMapEntries', num_colours * 6, 6)) { return false; } - for (var c = 0; c < num_colours; c++) { - var red = parseInt(this._sock.rQshift16() / 256, 10); - var green = parseInt(this._sock.rQshift16() / 256, 10); - var blue = parseInt(this._sock.rQshift16() / 256, 10); - this._display.set_colourMap([blue, green, red], first_colour + c); - } - Log.Debug("colourMap: " + this._display.get_colourMap()); - Log.Info("Registered " + num_colours + " colourMap entries"); - - return true; + return this._fail("Unexpected SetColorMapEntries message"); }, _handle_server_cut_text: function () { @@ -1195,14 +1336,16 @@ RFB.prototype = { if (this._sock.rQwait("ServerCutText header", 7, 1)) { return false; } this._sock.rQskipBytes(3); // Padding - var length = this._sock.rQshift32(); + const length = this._sock.rQshift32(); if (this._sock.rQwait("ServerCutText", length, 8)) { return false; } - var text = this._sock.rQshiftStr(length); + const text = this._sock.rQshiftStr(length); - if (this._view_only) { return true; } + if (this._viewOnly) { return true; } - this._onClipboard(this, text); + this.dispatchEvent(new CustomEvent( + "clipboard", + { detail: { text: text } })); return true; }, @@ -1210,8 +1353,8 @@ RFB.prototype = { _handle_server_fence_msg: function() { if (this._sock.rQwait("ServerFence header", 8, 1)) { return false; } this._sock.rQskipBytes(3); // Padding - var flags = this._sock.rQshift32(); - var length = this._sock.rQshift8(); + let flags = this._sock.rQshift32(); + let length = this._sock.rQshift8(); if (this._sock.rQwait("ServerFence payload", length, 9)) { return false; } @@ -1220,7 +1363,7 @@ RFB.prototype = { length = 64; } - var payload = this._sock.rQshiftStr(length); + const payload = this._sock.rQshiftStr(length); this._supportsFence = true; @@ -1234,8 +1377,7 @@ RFB.prototype = { */ if (!(flags & (1<<31))) { - return this._fail("Internal error", - "Unexpected fence response"); + return this._fail("Unexpected fence response"); } // Filter out unsupported flags @@ -1253,22 +1395,20 @@ RFB.prototype = { _handle_xvp_msg: function () { if (this._sock.rQwait("XVP version and message", 3, 1)) { return false; } this._sock.rQskip8(); // Padding - var xvp_ver = this._sock.rQshift8(); - var xvp_msg = this._sock.rQshift8(); + const xvp_ver = this._sock.rQshift8(); + const xvp_msg = this._sock.rQshift8(); switch (xvp_msg) { case 0: // XVP_FAIL - Log.Error("Operation Failed"); - this._notification("XVP Operation Failed", 'error'); + Log.Error("XVP Operation Failed"); break; case 1: // XVP_INIT this._rfb_xvp_ver = xvp_ver; Log.Info("XVP extensions enabled (version " + this._rfb_xvp_ver + ")"); - this._onXvpInit(this._rfb_xvp_ver); + this._setCapability("power", true); break; default: - this._fail("Unexpected server message", - "Illegal server XVP message " + xvp_msg); + this._fail("Illegal server XVP message (msg: " + xvp_msg + ")"); break; } @@ -1276,17 +1416,17 @@ RFB.prototype = { }, _normal_msg: function () { - var msg_type; - + let msg_type; if (this._FBU.rects > 0) { msg_type = 0; } else { msg_type = this._sock.rQshift8(); } + let first, ret; switch (msg_type) { case 0: // FramebufferUpdate - var ret = this._framebufferUpdate(); + ret = this._framebufferUpdate(); if (ret && !this._enabledContinuousUpdates) { RFB.messages.fbUpdateRequest(this._sock, true, 0, 0, this._fb_width, this._fb_height); @@ -1298,14 +1438,16 @@ RFB.prototype = { case 2: // Bell Log.Debug("Bell"); - this._onBell(this); + this.dispatchEvent(new CustomEvent( + "bell", + { detail: {} })); return true; case 3: // ServerCutText return this._handle_server_cut_text(); case 150: // EndOfContinuousUpdates - var first = !(this._supportsContinuousUpdates); + first = !this._supportsContinuousUpdates; this._supportsContinuousUpdates = true; this._enabledContinuousUpdates = false; if (first) { @@ -1325,7 +1467,7 @@ RFB.prototype = { return this._handle_xvp_msg(); default: - this._fail("Unexpected server message", "Type:" + msg_type); + this._fail("Unexpected server message (type " + msg_type + ")"); Log.Debug("sock.rQslice(0, 30): " + this._sock.rQslice(0, 30)); return true; } @@ -1340,9 +1482,6 @@ RFB.prototype = { }, _framebufferUpdate: function () { - var ret = true; - var now; - if (this._FBU.rects === 0) { if (this._sock.rQwait("FBU header", 3, 1)) { return false; } this._sock.rQskip8(); // Padding @@ -1350,7 +1489,7 @@ RFB.prototype = { this._FBU.bytes = 0; this._timing.cur_fbu = 0; if (this._timing.fbu_rt_start > 0) { - now = (new Date()).getTime(); + const now = (new Date()).getTime(); Log.Info("First FBU latency: " + (now - this._timing.fbu_rt_start)); } @@ -1371,7 +1510,7 @@ RFB.prototype = { if (this._sock.rQwait("rect header", 12)) { return false; } /* New FramebufferUpdate */ - var hdr = this._sock.rQshiftBytes(12); + const hdr = this._sock.rQshiftBytes(12); this._FBU.x = (hdr[0] << 8) + hdr[1]; this._FBU.y = (hdr[2] << 8) + hdr[3]; this._FBU.width = (hdr[4] << 8) + hdr[5]; @@ -1379,28 +1518,24 @@ RFB.prototype = { this._FBU.encoding = parseInt((hdr[8] << 24) + (hdr[9] << 16) + (hdr[10] << 8) + hdr[11], 10); - this._onFBUReceive(this, - {'x': this._FBU.x, 'y': this._FBU.y, - 'width': this._FBU.width, 'height': this._FBU.height, - 'encoding': this._FBU.encoding, - 'encodingName': this._encNames[this._FBU.encoding]}); - - if (!this._encNames[this._FBU.encoding]) { - this._fail("Unexpected server message", - "Unsupported encoding " + - this._FBU.encoding); + if (!this._encHandlers[this._FBU.encoding]) { + this._fail("Unsupported encoding (encoding: " + + this._FBU.encoding + ")"); return false; } } this._timing.last_fbu = (new Date()).getTime(); - ret = this._encHandlers[this._FBU.encoding](); + const ret = this._encHandlers[this._FBU.encoding](); - now = (new Date()).getTime(); + const now = (new Date()).getTime(); this._timing.cur_fbu += (now - this._timing.last_fbu); if (ret) { + if (!(this._FBU.encoding in this._encStats)) { + this._encStats[this._FBU.encoding] = [0, 0]; + } this._encStats[this._FBU.encoding][0]++; this._encStats[this._FBU.encoding][1]++; this._timing.pixels += this._FBU.width * this._FBU.height; @@ -1419,7 +1554,7 @@ RFB.prototype = { } if (this._timing.fbu_rt_start > 0) { - var fbu_rt_diff = now - this._timing.fbu_rt_start; + const fbu_rt_diff = now - this._timing.fbu_rt_start; this._timing.fbu_rt_total += fbu_rt_diff; this._timing.fbu_rt_cnt++; Log.Info("full FBU round-trip, cur: " + @@ -1436,12 +1571,6 @@ RFB.prototype = { this._display.flip(); - this._onFBUComplete(this, - {'x': this._FBU.x, 'y': this._FBU.y, - 'width': this._FBU.width, 'height': this._FBU.height, - 'encoding': this._FBU.encoding, - 'encodingName': this._encNames[this._FBU.encoding]}); - return true; // We finished this FBU }, @@ -1450,81 +1579,38 @@ RFB.prototype = { RFB.messages.enableContinuousUpdates(this._sock, true, 0, 0, this._fb_width, this._fb_height); - } -}; + }, -make_properties(RFB, [ - ['target', 'wo', 'dom'], // VNC display rendering Canvas object - ['focusContainer', 'wo', 'dom'], // DOM element that captures keyboard input - ['encrypt', 'rw', 'bool'], // Use TLS/SSL/wss encryption - ['true_color', 'rw', 'bool'], // Request true color pixel data - ['local_cursor', 'rw', 'bool'], // Request locally rendered cursor - ['shared', 'rw', 'bool'], // Request shared mode - ['view_only', 'rw', 'bool'], // Disable client mouse/keyboard - ['xvp_password_sep', 'rw', 'str'], // Separator for XVP password fields - ['disconnectTimeout', 'rw', 'int'], // Time (s) to wait for disconnection - ['wsProtocols', 'rw', 'arr'], // Protocols to use in the WebSocket connection - ['repeaterID', 'rw', 'str'], // [UltraVNC] RepeaterID to connect to - ['viewportDrag', 'rw', 'bool'], // Move the viewport on mouse drags - - // Callback functions - ['onUpdateState', 'rw', 'func'], // onUpdateState(rfb, state, oldstate): connection state change - ['onNotification', 'rw', 'func'], // onNotification(rfb, msg, level, options): notification for the UI - ['onDisconnected', 'rw', 'func'], // onDisconnected(rfb, reason): disconnection finished - ['onPasswordRequired', 'rw', 'func'], // onPasswordRequired(rfb, msg): VNC password is required - ['onClipboard', 'rw', 'func'], // onClipboard(rfb, text): RFB clipboard contents received - ['onBell', 'rw', 'func'], // onBell(rfb): RFB Bell message received - ['onFBUReceive', 'rw', 'func'], // onFBUReceive(rfb, fbu): RFB FBU received but not yet processed - ['onFBUComplete', 'rw', 'func'], // onFBUComplete(rfb, fbu): RFB FBU received and processed - ['onFBResize', 'rw', 'func'], // onFBResize(rfb, width, height): frame buffer resized - ['onDesktopName', 'rw', 'func'], // onDesktopName(rfb, name): desktop name received - ['onXvpInit', 'rw', 'func'] // onXvpInit(version): XVP extensions active for this connection -]); - -RFB.prototype.set_local_cursor = function (cursor) { - if (!cursor || (cursor in {'0': 1, 'no': 1, 'false': 1})) { - this._local_cursor = false; - this._display.disableLocalCursor(); //Only show server-side cursor - } else { - if (this._display.get_cursor_uri()) { - this._local_cursor = true; - } else { - Log.Warn("Browser does not support local cursor"); - this._display.disableLocalCursor(); - } - } + _resize: function(width, height) { + this._fb_width = width; + this._fb_height = height; - // Need to send an updated list of encodings if we are connected - if (this._rfb_connection_state === "connected") { - RFB.messages.clientEncodings(this._sock, this._encodings, cursor, - this._true_color); - } -}; + this._destBuff = new Uint8Array(this._fb_width * this._fb_height * 4); -RFB.prototype.set_view_only = function (view_only) { - this._view_only = view_only; + this._display.resize(this._fb_width, this._fb_height); - if (this._rfb_connection_state === "connecting" || - this._rfb_connection_state === "connected") { - if (view_only) { - this._keyboard.ungrab(); - this._mouse.ungrab(); - } else { - this._keyboard.grab(); - this._mouse.grab(); - } - } + // Adjust the visible viewport based on the new dimensions + this._updateClip(); + this._updateScale(); + + this._timing.fbu_rt_start = (new Date()).getTime(); + this._updateContinuousUpdates(); + }, + + _xvpOp: function (ver, op) { + if (this._rfb_xvp_ver < ver) { return; } + Log.Info("Sending XVP operation " + op + " (version " + ver + ")"); + RFB.messages.xvpOp(this._sock, ver, op); + }, }; -RFB.prototype.get_display = function () { return this._display; }; -RFB.prototype.get_keyboard = function () { return this._keyboard; }; -RFB.prototype.get_mouse = function () { return this._mouse; }; +Object.assign(RFB.prototype, EventTargetMixin); // Class Methods RFB.messages = { keyEvent: function (sock, keysym, down) { - var buff = sock._sQ; - var offset = sock._sQlen; + const buff = sock._sQ; + const offset = sock._sQlen; buff[offset] = 4; // msg-type buff[offset + 1] = down; @@ -1543,17 +1629,16 @@ RFB.messages = { QEMUExtendedKeyEvent: function (sock, keysym, down, keycode) { function getRFBkeycode(xt_scancode) { - var upperByte = (keycode >> 8); - var lowerByte = (keycode & 0x00ff); + const upperByte = (keycode >> 8); + const lowerByte = (keycode & 0x00ff); if (upperByte === 0xe0 && lowerByte < 0x7f) { - lowerByte = lowerByte | 0x80; - return lowerByte; + return lowerByte | 0x80; } return xt_scancode; } - var buff = sock._sQ; - var offset = sock._sQlen; + const buff = sock._sQ; + const offset = sock._sQlen; buff[offset] = 255; // msg-type buff[offset + 1] = 0; // sub msg-type @@ -1566,7 +1651,7 @@ RFB.messages = { buff[offset + 6] = (keysym >> 8); buff[offset + 7] = keysym; - var RFBkeycode = getRFBkeycode(keycode); + const RFBkeycode = getRFBkeycode(keycode); buff[offset + 8] = (RFBkeycode >> 24); buff[offset + 9] = (RFBkeycode >> 16); @@ -1578,8 +1663,8 @@ RFB.messages = { }, pointerEvent: function (sock, x, y, mask) { - var buff = sock._sQ; - var offset = sock._sQlen; + const buff = sock._sQ; + const offset = sock._sQlen; buff[offset] = 5; // msg-type @@ -1597,8 +1682,8 @@ RFB.messages = { // TODO(directxman12): make this unicode compatible? clientCutText: function (sock, text) { - var buff = sock._sQ; - var offset = sock._sQlen; + const buff = sock._sQ; + const offset = sock._sQlen; buff[offset] = 6; // msg-type @@ -1606,24 +1691,43 @@ RFB.messages = { buff[offset + 2] = 0; // padding buff[offset + 3] = 0; // padding - var n = text.length; + const length = text.length; - buff[offset + 4] = n >> 24; - buff[offset + 5] = n >> 16; - buff[offset + 6] = n >> 8; - buff[offset + 7] = n; + buff[offset + 4] = length >> 24; + buff[offset + 5] = length >> 16; + buff[offset + 6] = length >> 8; + buff[offset + 7] = length; - for (var i = 0; i < n; i++) { - buff[offset + 8 + i] = text.charCodeAt(i); - } + sock._sQlen += 8; - sock._sQlen += 8 + n; - sock.flush(); + // We have to keep track of from where in the text we begin creating the + // buffer for the flush in the next iteration. + let textOffset = 0; + + let remaining = length; + while (remaining > 0) { + + const flushSize = Math.min(remaining, (sock._sQbufferSize - sock._sQlen)); + if (flushSize <= 0) { + this._fail("Clipboard contents could not be sent"); + break; + } + + for (let i = 0; i < flushSize; i++) { + buff[sock._sQlen + i] = text.charCodeAt(textOffset + i); + } + + sock._sQlen += flushSize; + sock.flush(); + + remaining -= flushSize; + textOffset += flushSize; + } }, setDesktopSize: function (sock, width, height, id, flags) { - var buff = sock._sQ; - var offset = sock._sQlen; + const buff = sock._sQ; + const offset = sock._sQlen; buff[offset] = 251; // msg-type buff[offset + 1] = 0; // padding @@ -1658,8 +1762,8 @@ RFB.messages = { }, clientFence: function (sock, flags, payload) { - var buff = sock._sQ; - var offset = sock._sQlen; + const buff = sock._sQ; + const offset = sock._sQlen; buff[offset] = 248; // msg-type @@ -1672,11 +1776,11 @@ RFB.messages = { buff[offset + 6] = flags >> 8; buff[offset + 7] = flags; - var n = payload.length; + const n = payload.length; buff[offset + 8] = n; // length - for (var i = 0; i < n; i++) { + for (let i = 0; i < n; i++) { buff[offset + 9 + i] = payload.charCodeAt(i); } @@ -1685,8 +1789,8 @@ RFB.messages = { }, enableContinuousUpdates: function (sock, enable, x, y, width, height) { - var buff = sock._sQ; - var offset = sock._sQlen; + const buff = sock._sQ; + const offset = sock._sQlen; buff[offset] = 150; // msg-type buff[offset + 1] = enable; // enable-flag @@ -1704,9 +1808,21 @@ RFB.messages = { sock.flush(); }, - pixelFormat: function (sock, bpp, depth, true_color) { - var buff = sock._sQ; - var offset = sock._sQlen; + pixelFormat: function (sock, depth, true_color) { + const buff = sock._sQ; + const offset = sock._sQlen; + + let bpp; + + if (depth > 16) { + bpp = 32; + } else if (depth > 8) { + bpp = 16; + } else { + bpp = 8; + } + + const bits = Math.floor(depth/3); buff[offset] = 0; // msg-type @@ -1714,23 +1830,23 @@ RFB.messages = { buff[offset + 2] = 0; // padding buff[offset + 3] = 0; // padding - buff[offset + 4] = bpp * 8; // bits-per-pixel - buff[offset + 5] = depth * 8; // depth + buff[offset + 4] = bpp; // bits-per-pixel + buff[offset + 5] = depth; // depth buff[offset + 6] = 0; // little-endian buff[offset + 7] = true_color ? 1 : 0; // true-color buff[offset + 8] = 0; // red-max - buff[offset + 9] = 255; // red-max + buff[offset + 9] = (1 << bits) - 1; // red-max buff[offset + 10] = 0; // green-max - buff[offset + 11] = 255; // green-max + buff[offset + 11] = (1 << bits) - 1; // green-max buff[offset + 12] = 0; // blue-max - buff[offset + 13] = 255; // blue-max + buff[offset + 13] = (1 << bits) - 1; // blue-max - buff[offset + 14] = 16; // red-shift - buff[offset + 15] = 8; // green-shift - buff[offset + 16] = 0; // blue-shift + buff[offset + 14] = bits * 2; // red-shift + buff[offset + 15] = bits * 1; // green-shift + buff[offset + 16] = bits * 0; // blue-shift buff[offset + 17] = 0; // padding buff[offset + 18] = 0; // padding @@ -1740,44 +1856,34 @@ RFB.messages = { sock.flush(); }, - clientEncodings: function (sock, encodings, local_cursor, true_color) { - var buff = sock._sQ; - var offset = sock._sQlen; + clientEncodings: function (sock, encodings) { + const buff = sock._sQ; + const offset = sock._sQlen; buff[offset] = 2; // msg-type buff[offset + 1] = 0; // padding - // offset + 2 and offset + 3 are encoding count + buff[offset + 2] = encodings.length >> 8; + buff[offset + 3] = encodings.length; - var i, j = offset + 4, cnt = 0; - for (i = 0; i < encodings.length; i++) { - if (encodings[i][0] === "Cursor" && !local_cursor) { - Log.Debug("Skipping Cursor pseudo-encoding"); - } else if (encodings[i][0] === "TIGHT" && !true_color) { - // TODO: remove this when we have tight+non-true-color - Log.Warn("Skipping tight as it is only supported with true color"); - } else { - var enc = encodings[i][1]; - buff[j] = enc >> 24; - buff[j + 1] = enc >> 16; - buff[j + 2] = enc >> 8; - buff[j + 3] = enc; - - j += 4; - cnt++; - } - } + let j = offset + 4; + for (let i = 0; i < encodings.length; i++) { + const enc = encodings[i]; + buff[j] = enc >> 24; + buff[j + 1] = enc >> 16; + buff[j + 2] = enc >> 8; + buff[j + 3] = enc; - buff[offset + 2] = cnt >> 8; - buff[offset + 3] = cnt; + j += 4; + } sock._sQlen += j - offset; sock.flush(); }, fbUpdateRequest: function (sock, incremental, x, y, w, h) { - var buff = sock._sQ; - var offset = sock._sQlen; + const buff = sock._sQ; + const offset = sock._sQlen; if (typeof(x) === "undefined") { x = 0; } if (typeof(y) === "undefined") { y = 0; } @@ -1799,12 +1905,26 @@ RFB.messages = { sock._sQlen += 10; sock.flush(); - } + }, + + xvpOp: function (sock, ver, op) { + const buff = sock._sQ; + const offset = sock._sQlen; + + buff[offset] = 250; // msg-type + buff[offset + 1] = 0; // padding + + buff[offset + 2] = ver; + buff[offset + 3] = op; + + sock._sQlen += 4; + sock.flush(); + }, }; RFB.genDES = function (password, challenge) { - var passwd = []; - for (var i = 0; i < password.length; i++) { + const passwd = []; + for (let i = 0; i < password.length; i++) { passwd.push(password.charCodeAt(i)); } return (new DES(passwd)).encrypt(challenge); @@ -1816,19 +1936,33 @@ RFB.encodingHandlers = { this._FBU.lines = this._FBU.height; } - this._FBU.bytes = this._FBU.width * this._fb_Bpp; // at least a line + const pixelSize = this._fb_depth == 8 ? 1 : 4; + this._FBU.bytes = this._FBU.width * pixelSize; // at least a line if (this._sock.rQwait("RAW", this._FBU.bytes)) { return false; } - var cur_y = this._FBU.y + (this._FBU.height - this._FBU.lines); - var curr_height = Math.min(this._FBU.lines, - Math.floor(this._sock.rQlen() / (this._FBU.width * this._fb_Bpp))); + const cur_y = this._FBU.y + (this._FBU.height - this._FBU.lines); + const curr_height = Math.min(this._FBU.lines, + Math.floor(this._sock.rQlen() / (this._FBU.width * pixelSize))); + let data = this._sock.get_rQ(); + let index = this._sock.get_rQi(); + if (this._fb_depth == 8) { + const pixels = this._FBU.width * curr_height + const newdata = new Uint8Array(pixels * 4); + for (let i = 0; i < pixels; i++) { + newdata[i * 4 + 0] = ((data[index + i] >> 0) & 0x3) * 255 / 3; + newdata[i * 4 + 1] = ((data[index + i] >> 2) & 0x3) * 255 / 3; + newdata[i * 4 + 2] = ((data[index + i] >> 4) & 0x3) * 255 / 3; + newdata[i * 4 + 4] = 0; + } + data = newdata; + index = 0; + } this._display.blitImage(this._FBU.x, cur_y, this._FBU.width, - curr_height, this._sock.get_rQ(), - this._sock.get_rQi()); - this._sock.rQskipBytes(this._FBU.width * curr_height * this._fb_Bpp); + curr_height, data, index); + this._sock.rQskipBytes(this._FBU.width * curr_height * pixelSize); this._FBU.lines -= curr_height; if (this._FBU.lines > 0) { - this._FBU.bytes = this._FBU.width * this._fb_Bpp; // At least another line + this._FBU.bytes = this._FBU.width * pixelSize; // At least another line } else { this._FBU.rects--; this._FBU.bytes = 0; @@ -1850,28 +1984,28 @@ RFB.encodingHandlers = { }, RRE: function () { - var color; + let color; if (this._FBU.subrects === 0) { - this._FBU.bytes = 4 + this._fb_Bpp; - if (this._sock.rQwait("RRE", 4 + this._fb_Bpp)) { return false; } + this._FBU.bytes = 4 + 4; + if (this._sock.rQwait("RRE", 4 + 4)) { return false; } this._FBU.subrects = this._sock.rQshift32(); - color = this._sock.rQshiftBytes(this._fb_Bpp); // Background + color = this._sock.rQshiftBytes(4); // Background this._display.fillRect(this._FBU.x, this._FBU.y, this._FBU.width, this._FBU.height, color); } - while (this._FBU.subrects > 0 && this._sock.rQlen() >= (this._fb_Bpp + 8)) { - color = this._sock.rQshiftBytes(this._fb_Bpp); - var x = this._sock.rQshift16(); - var y = this._sock.rQshift16(); - var width = this._sock.rQshift16(); - var height = this._sock.rQshift16(); + while (this._FBU.subrects > 0 && this._sock.rQlen() >= (4 + 8)) { + color = this._sock.rQshiftBytes(4); + const x = this._sock.rQshift16(); + const y = this._sock.rQshift16(); + const width = this._sock.rQshift16(); + const height = this._sock.rQshift16(); this._display.fillRect(this._FBU.x + x, this._FBU.y + y, width, height, color); this._FBU.subrects--; } if (this._FBU.subrects > 0) { - var chunk = Math.min(this._rre_chunk_sz, this._FBU.subrects); - this._FBU.bytes = (this._fb_Bpp + 8) * chunk; + const chunk = Math.min(this._rre_chunk_sz, this._FBU.subrects); + this._FBU.bytes = (4 + 8) * chunk; } else { this._FBU.rects--; this._FBU.bytes = 0; @@ -1881,8 +2015,8 @@ RFB.encodingHandlers = { }, HEXTILE: function () { - var rQ = this._sock.get_rQ(); - var rQi = this._sock.get_rQi(); + const rQ = this._sock.get_rQ(); + let rQi = this._sock.get_rQi(); if (this._FBU.tiles === 0) { this._FBU.tiles_x = Math.ceil(this._FBU.width / 16); @@ -1894,38 +2028,38 @@ RFB.encodingHandlers = { while (this._FBU.tiles > 0) { this._FBU.bytes = 1; if (this._sock.rQwait("HEXTILE subencoding", this._FBU.bytes)) { return false; } - var subencoding = rQ[rQi]; // Peek + const subencoding = rQ[rQi]; // Peek if (subencoding > 30) { // Raw - this._fail("Unexpected server message", - "Illegal hextile subencoding: " + subencoding); + this._fail("Illegal hextile subencoding (subencoding: " + + subencoding + ")"); return false; } - var subrects = 0; - var curr_tile = this._FBU.total_tiles - this._FBU.tiles; - var tile_x = curr_tile % this._FBU.tiles_x; - var tile_y = Math.floor(curr_tile / this._FBU.tiles_x); - var x = this._FBU.x + tile_x * 16; - var y = this._FBU.y + tile_y * 16; - var w = Math.min(16, (this._FBU.x + this._FBU.width) - x); - var h = Math.min(16, (this._FBU.y + this._FBU.height) - y); + let subrects = 0; + const curr_tile = this._FBU.total_tiles - this._FBU.tiles; + const tile_x = curr_tile % this._FBU.tiles_x; + const tile_y = Math.floor(curr_tile / this._FBU.tiles_x); + const x = this._FBU.x + tile_x * 16; + const y = this._FBU.y + tile_y * 16; + const w = Math.min(16, (this._FBU.x + this._FBU.width) - x); + const h = Math.min(16, (this._FBU.y + this._FBU.height) - y); // Figure out how much we are expecting if (subencoding & 0x01) { // Raw - this._FBU.bytes += w * h * this._fb_Bpp; + this._FBU.bytes += w * h * 4; } else { if (subencoding & 0x02) { // Background - this._FBU.bytes += this._fb_Bpp; + this._FBU.bytes += 4; } if (subencoding & 0x04) { // Foreground - this._FBU.bytes += this._fb_Bpp; + this._FBU.bytes += 4; } if (subencoding & 0x08) { // AnySubrects this._FBU.bytes++; // Since we aren't shifting it off if (this._sock.rQwait("hextile subrects header", this._FBU.bytes)) { return false; } subrects = rQ[rQi + this._FBU.bytes - 1]; // Peek if (subencoding & 0x10) { // SubrectsColoured - this._FBU.bytes += subrects * (this._fb_Bpp + 2); + this._FBU.bytes += subrects * (4 + 2); } else { this._FBU.bytes += subrects * 2; } @@ -1949,22 +2083,12 @@ RFB.encodingHandlers = { rQi += this._FBU.bytes - 1; } else { if (this._FBU.subencoding & 0x02) { // Background - if (this._fb_Bpp == 1) { - this._FBU.background = rQ[rQi]; - } else { - // fb_Bpp is 4 - this._FBU.background = [rQ[rQi], rQ[rQi + 1], rQ[rQi + 2], rQ[rQi + 3]]; - } - rQi += this._fb_Bpp; + this._FBU.background = [rQ[rQi], rQ[rQi + 1], rQ[rQi + 2], rQ[rQi + 3]]; + rQi += 4; } if (this._FBU.subencoding & 0x04) { // Foreground - if (this._fb_Bpp == 1) { - this._FBU.foreground = rQ[rQi]; - } else { - // this._fb_Bpp is 4 - this._FBU.foreground = [rQ[rQi], rQ[rQi + 1], rQ[rQi + 2], rQ[rQi + 3]]; - } - rQi += this._fb_Bpp; + this._FBU.foreground = [rQ[rQi], rQ[rQi + 1], rQ[rQi + 2], rQ[rQi + 3]]; + rQi += 4; } this._display.startTile(x, y, w, h, this._FBU.background); @@ -1972,28 +2096,23 @@ RFB.encodingHandlers = { subrects = rQ[rQi]; rQi++; - for (var s = 0; s < subrects; s++) { - var color; + for (let s = 0; s < subrects; s++) { + let color; if (this._FBU.subencoding & 0x10) { // SubrectsColoured - if (this._fb_Bpp === 1) { - color = rQ[rQi]; - } else { - // _fb_Bpp is 4 - color = [rQ[rQi], rQ[rQi + 1], rQ[rQi + 2], rQ[rQi + 3]]; - } - rQi += this._fb_Bpp; + color = [rQ[rQi], rQ[rQi + 1], rQ[rQi + 2], rQ[rQi + 3]]; + rQi += 4; } else { color = this._FBU.foreground; } - var xy = rQ[rQi]; + const xy = rQ[rQi]; rQi++; - var sx = (xy >> 4); - var sy = (xy & 0x0f); + const sx = (xy >> 4); + const sy = (xy & 0x0f); - var wh = rQ[rQi]; + const wh = rQ[rQi]; rQi++; - var sw = (wh >> 4) + 1; - var sh = (wh & 0x0f) + 1; + const sw = (wh >> 4) + 1; + const sh = (wh & 0x0f) + 1; this._display.subTile(sx, sy, sw, sh, color); } @@ -2013,51 +2132,22 @@ RFB.encodingHandlers = { return true; }, - getTightCLength: function (arr) { - var header = 1, data = 0; - data += arr[0] & 0x7f; - if (arr[0] & 0x80) { - header++; - data += (arr[1] & 0x7f) << 7; - if (arr[1] & 0x80) { - header++; - data += arr[2] << 14; - } - } - return [header, data]; - }, - - display_tight: function (isTightPNG) { - if (this._fb_depth === 1) { - this._fail("Internal error", - "Tight protocol handler only implements " + - "true color mode"); - } - + TIGHT: function (isTightPNG) { this._FBU.bytes = 1; // compression-control byte if (this._sock.rQwait("TIGHT compression-control", this._FBU.bytes)) { return false; } - var checksum = function (data) { - var sum = 0; - for (var i = 0; i < data.length; i++) { - sum += data[i]; - if (sum > 65536) sum -= 65536; - } - return sum; - }; - - var resetStreams = 0; - var streamId = -1; - var decompress = function (data, expected) { - for (var i = 0; i < 4; i++) { + let resetStreams = 0; + let streamId = -1; + const decompress = function (data, expected) { + for (let i = 0; i < 4; i++) { if ((resetStreams >> i) & 1) { this._FBU.zlibs[i].reset(); Log.Info("Reset zlib stream " + i); } } - //var uncompressed = this._FBU.zlibs[streamId].uncompress(data, 0); - var uncompressed = this._FBU.zlibs[streamId].inflate(data, true, expected); + //const uncompressed = this._FBU.zlibs[streamId].uncompress(data, 0); + const uncompressed = this._FBU.zlibs[streamId].inflate(data, true, expected); /*if (uncompressed.status !== 0) { Log.Error("Invalid data in zlib stream"); }*/ @@ -2066,18 +2156,18 @@ RFB.encodingHandlers = { return uncompressed; }.bind(this); - var indexedToRGBX2Color = function (data, palette, width, height) { + const indexedToRGBX2Color = function (data, palette, width, height) { // Convert indexed (palette based) image data to RGB // TODO: reduce number of calculations inside loop - var dest = this._destBuff; - var w = Math.floor((width + 7) / 8); - var w1 = Math.floor(width / 8); - - /*for (var y = 0; y < height; y++) { - var b, x, dp, sp; - var yoffset = y * width; - var ybitoffset = y * w; - var xoffset, targetbyte; + const dest = this._destBuff; + const w = Math.floor((width + 7) / 8); + const w1 = Math.floor(width / 8); + + /*for (let y = 0; y < height; y++) { + let b, x, dp, sp; + const yoffset = y * width; + const ybitoffset = y * w; + let xoffset, targetbyte; for (x = 0; x < w1; x++) { xoffset = yoffset + x * 8; targetbyte = data[ybitoffset + x]; @@ -2101,10 +2191,10 @@ RFB.encodingHandlers = { } }*/ - for (var y = 0; y < height; y++) { - var b, x, dp, sp; + for (let y = 0; y < height; y++) { + let dp, sp, x; for (x = 0; x < w1; x++) { - for (b = 7; b >= 0; b--) { + for (let b = 7; b >= 0; b--) { dp = (y * width + x * 8 + 7 - b) * 4; sp = (data[y * w + x] >> b & 1) * 3; dest[dp] = palette[sp]; @@ -2114,7 +2204,7 @@ RFB.encodingHandlers = { } } - for (b = 7; b >= 8 - width % 8; b--) { + for (let b = 7; b >= 8 - width % 8; b--) { dp = (y * width + x * 8 + 7 - b) * 4; sp = (data[y * w + x] >> b & 1) * 3; dest[dp] = palette[sp]; @@ -2127,12 +2217,12 @@ RFB.encodingHandlers = { return dest; }.bind(this); - var indexedToRGBX = function (data, palette, width, height) { + const indexedToRGBX = function (data, palette, width, height) { // Convert indexed (palette based) image data to RGB - var dest = this._destBuff; - var total = width * height * 4; - for (var i = 0, j = 0; i < total; i += 4, j++) { - var sp = data[j] * 3; + const dest = this._destBuff; + const total = width * height * 4; + for (let i = 0, j = 0; i < total; i += 4, j++) { + const sp = data[j] * 3; dest[i] = palette[sp]; dest[i + 1] = palette[sp + 1]; dest[i + 2] = palette[sp + 2]; @@ -2142,20 +2232,20 @@ RFB.encodingHandlers = { return dest; }.bind(this); - var rQi = this._sock.get_rQi(); - var rQ = this._sock.rQwhole(); - var cmode, data; - var cl_header, cl_data; + const rQi = this._sock.get_rQi(); + const rQ = this._sock.rQwhole(); + let cmode, data; + let cl_header, cl_data; - var handlePalette = function () { - var numColors = rQ[rQi + 2] + 1; - var paletteSize = numColors * this._fb_depth; + const handlePalette = function () { + const numColors = rQ[rQi + 2] + 1; + const paletteSize = numColors * 3; this._FBU.bytes += paletteSize; if (this._sock.rQwait("TIGHT palette " + cmode, this._FBU.bytes)) { return false; } - var bpp = (numColors <= 2) ? 1 : 8; - var rowSize = Math.floor((this._FBU.width * bpp + 7) / 8); - var raw = false; + const bpp = (numColors <= 2) ? 1 : 8; + const rowSize = Math.floor((this._FBU.width * bpp + 7) / 8); + let raw = false; if (rowSize * this._FBU.height < 12) { raw = true; cl_header = 0; @@ -2163,7 +2253,7 @@ RFB.encodingHandlers = { //clength = [0, rowSize * this._FBU.height]; } else { // begin inline getTightCLength (returning two-item arrays is bad for performance with GC) - var cl_offset = rQi + 3 + paletteSize; + const cl_offset = rQi + 3 + paletteSize; cl_header = 1; cl_data = 0; cl_data += rQ[cl_offset] & 0x7f; @@ -2183,7 +2273,7 @@ RFB.encodingHandlers = { // Shift ctl, filter id, num colors, palette entries, and clength off this._sock.rQskipBytes(3); - //var palette = this._sock.rQshiftBytes(paletteSize); + //const palette = this._sock.rQshiftBytes(paletteSize); this._sock.rQshiftTo(this._paletteBuff, paletteSize); this._sock.rQskipBytes(cl_header); @@ -2194,29 +2284,29 @@ RFB.encodingHandlers = { } // Convert indexed (palette based) image data to RGB - var rgbx; + let rgbx; if (numColors == 2) { rgbx = indexedToRGBX2Color(data, this._paletteBuff, this._FBU.width, this._FBU.height); - this._display.blitRgbxImage(this._FBU.x, this._FBU.y, this._FBU.width, this._FBU.height, rgbx, 0, false); } else { rgbx = indexedToRGBX(data, this._paletteBuff, this._FBU.width, this._FBU.height); - this._display.blitRgbxImage(this._FBU.x, this._FBU.y, this._FBU.width, this._FBU.height, rgbx, 0, false); } + this._display.blitRgbxImage(this._FBU.x, this._FBU.y, this._FBU.width, this._FBU.height, rgbx, 0, false); + return true; }.bind(this); - var handleCopy = function () { - var raw = false; - var uncompressedSize = this._FBU.width * this._FBU.height * this._fb_depth; + const handleCopy = function () { + let raw = false; + const uncompressedSize = this._FBU.width * this._FBU.height * 3; if (uncompressedSize < 12) { raw = true; cl_header = 0; cl_data = uncompressedSize; } else { // begin inline getTightCLength (returning two-item arrays is for peformance with GC) - var cl_offset = rQi + 1; + const cl_offset = rQi + 1; cl_header = 1; cl_data = 0; cl_data += rQ[cl_offset] & 0x7f; @@ -2247,7 +2337,7 @@ RFB.encodingHandlers = { return true; }.bind(this); - var ctl = this._sock.rQpeek8(); + let ctl = this._sock.rQpeek8(); // Keep tight reset bits resetStreams = ctl & 0xF; @@ -2261,19 +2351,20 @@ RFB.encodingHandlers = { else if (ctl === 0x0A) cmode = "png"; else if (ctl & 0x04) cmode = "filter"; else if (ctl < 0x04) cmode = "copy"; - else return this._fail("Unexpected server message", - "Illegal tight compression received, " + - "ctl: " + ctl); + else return this._fail("Illegal tight compression received (ctl: " + + ctl + ")"); - if (isTightPNG && (cmode === "filter" || cmode === "copy")) { - return this._fail("Unexpected server message", - "filter/copy received in tightPNG mode"); + if (isTightPNG && (ctl < 0x08)) { + return this._fail("BasicCompression received in TightPNG rect"); + } + if (!isTightPNG && (ctl === 0x0A)) { + return this._fail("PNG received in standard Tight rect"); } switch (cmode) { - // fill use fb_depth because TPIXELs drop the padding byte + // fill use depth because TPIXELs drop the padding byte case "fill": // TPIXEL - this._FBU.bytes += this._fb_depth; + this._FBU.bytes += 3; break; case "jpeg": // max clength this._FBU.bytes += 3; @@ -2291,6 +2382,7 @@ RFB.encodingHandlers = { if (this._sock.rQwait("TIGHT " + cmode, this._FBU.bytes)) { return false; } // Determine FBU.bytes + let cl_offset, filterId; switch (cmode) { case "fill": // skip ctl byte @@ -2300,7 +2392,7 @@ RFB.encodingHandlers = { case "png": case "jpeg": // begin inline getTightCLength (returning two-item arrays is for peformance with GC) - var cl_offset = rQi + 1; + cl_offset = rQi + 1; cl_header = 1; cl_data = 0; cl_data += rQ[cl_offset] & 0x7f; @@ -2322,15 +2414,14 @@ RFB.encodingHandlers = { this._display.imageRect(this._FBU.x, this._FBU.y, "image/" + cmode, data); break; case "filter": - var filterId = rQ[rQi + 1]; + filterId = rQ[rQi + 1]; if (filterId === 1) { if (!handlePalette()) { return false; } } else { // Filter 0, Copy could be valid here, but servers don't send it as an explicit filter // Filter 2, Gradient is valid but not use if jpeg is enabled - this._fail("Unexpected server message", - "Unsupported tight subencoding received, " + - "filter: " + filterId); + this._fail("Unsupported tight subencoding received " + + "(filter: " + filterId + ")"); } break; case "copy": @@ -2345,34 +2436,27 @@ RFB.encodingHandlers = { return true; }, - TIGHT: function () { return this._encHandlers.display_tight(false); }, - TIGHT_PNG: function () { return this._encHandlers.display_tight(true); }, - last_rect: function () { this._FBU.rects = 0; return true; }, - handle_FB_resize: function () { - this._fb_width = this._FBU.width; - this._fb_height = this._FBU.height; - this._destBuff = new Uint8Array(this._fb_width * this._fb_height * 4); - this._display.resize(this._fb_width, this._fb_height); - this._onFBResize(this, this._fb_width, this._fb_height); - this._timing.fbu_rt_start = (new Date()).getTime(); - this._updateContinuousUpdates(); - - this._FBU.bytes = 0; - this._FBU.rects -= 1; - return true; - }, - ExtendedDesktopSize: function () { this._FBU.bytes = 1; if (this._sock.rQwait("ExtendedDesktopSize", this._FBU.bytes)) { return false; } + const firstUpdate = !this._supportsSetDesktopSize; this._supportsSetDesktopSize = true; - var number_of_screens = this._sock.rQpeek8(); + + // Normally we only apply the current resize mode after a + // window resize event. However there is no such trigger on the + // initial connect. And we don't know if the server supports + // resizing until we've gotten here. + if (firstUpdate) { + this._requestRemoteResize(); + } + + const number_of_screens = this._sock.rQpeek8(); this._FBU.bytes = 4 + (number_of_screens * 16); if (this._sock.rQwait("ExtendedDesktopSize", this._FBU.bytes)) { return false; } @@ -2380,7 +2464,7 @@ RFB.encodingHandlers = { this._sock.rQskipBytes(1); // number-of-screens this._sock.rQskipBytes(3); // padding - for (var i = 0; i < number_of_screens; i += 1) { + for (let i = 0; i < number_of_screens; i += 1) { // Save the id and flags of the first screen if (i === 0) { this._screen_id = this._sock.rQshiftBytes(4); // id @@ -2404,7 +2488,7 @@ RFB.encodingHandlers = { // We need to handle errors when we requested the resize. if (this._FBU.x === 1 && this._FBU.y !== 0) { - var msg = ""; + let msg = ""; // The y-position indicates the status code from the server switch (this._FBU.y) { case 1: @@ -2420,36 +2504,40 @@ RFB.encodingHandlers = { msg = "Unknown reason"; break; } - this._notification("Server did not accept the resize request: " - + msg, 'normal'); - return true; + Log.Warn("Server did not accept the resize request: " + + msg); + } else { + this._resize(this._FBU.width, this._FBU.height); } - this._encHandlers.handle_FB_resize(); + this._FBU.bytes = 0; + this._FBU.rects -= 1; return true; }, DesktopSize: function () { - this._encHandlers.handle_FB_resize(); + this._resize(this._FBU.width, this._FBU.height); + this._FBU.bytes = 0; + this._FBU.rects -= 1; return true; }, Cursor: function () { Log.Debug(">> set_cursor"); - var x = this._FBU.x; // hotspot-x - var y = this._FBU.y; // hotspot-y - var w = this._FBU.width; - var h = this._FBU.height; + const x = this._FBU.x; // hotspot-x + const y = this._FBU.y; // hotspot-y + const w = this._FBU.width; + const h = this._FBU.height; - var pixelslength = w * h * this._fb_Bpp; - var masklength = Math.floor((w + 7) / 8) * h; + const pixelslength = w * h * 4; + const masklength = Math.floor((w + 7) / 8) * h; this._FBU.bytes = pixelslength + masklength; if (this._sock.rQwait("cursor encoding", this._FBU.bytes)) { return false; } - this._display.changeCursor(this._sock.rQshiftBytes(pixelslength), - this._sock.rQshiftBytes(masklength), - x, y, w, h); + this._cursor.change(this._sock.rQshiftBytes(pixelslength), + this._sock.rQshiftBytes(masklength), + x, y, w, h); this._FBU.bytes = 0; this._FBU.rects--; @@ -2461,18 +2549,14 @@ RFB.encodingHandlers = { QEMUExtendedKeyEvent: function () { this._FBU.rects--; - var keyboardEvent = document.createEvent("keyboardEvent"); - if (keyboardEvent.code !== undefined) { - this._qemuExtKeyEventSupported = true; - this._keyboard.setQEMUVNCKeyboardHandler(); + // Old Safari doesn't support creating keyboard events + try { + const keyboardEvent = document.createEvent("keyboardEvent"); + if (keyboardEvent.code !== undefined) { + this._qemuExtKeyEventSupported = true; + } + } catch (err) { + // Do nothing } }, - - JPEG_quality_lo: function () { - Log.Error("Server sent jpeg_quality pseudo-encoding"); - }, - - compress_lo: function () { - Log.Error("Server sent compress level pseudo-encoding"); - } -}; +}