From f116d7b09433f5573f387bec02c00f3a2dfbb9bf Mon Sep 17 00:00:00 2001 From: totaam Date: Wed, 20 Oct 2021 18:27:07 +0700 Subject: [PATCH] #20 validate jpeg, png and webp from the decode worker --- html5/js/Client.js | 35 +++++++++++++++++++---- html5/js/DecodeWorker.js | 62 +++++++++++++++++++++++++++++++--------- html5/js/Utilities.js | 9 ------ 3 files changed, 78 insertions(+), 28 deletions(-) diff --git a/html5/js/Client.js b/html5/js/Client.js index 4474f9c9..7168c1b5 100644 --- a/html5/js/Client.js +++ b/html5/js/Client.js @@ -59,9 +59,6 @@ XpraClient.prototype.init_settings = function(container) { this.remote_logging = true; this.enabled_encodings = []; this.supported_encodings = ["jpeg", "png", "rgb", "rgb32", "rgb24"]; //"h264", "vp8+webm", "h264+mp4", "mpeg4+mp4"]; - if (Utilities.canUseWebP()) { - this.supported_encodings.push("webp"); - } this.debug_categories = []; this.start_new_session = null; this.clipboard_enabled = false; @@ -389,8 +386,10 @@ XpraClient.prototype.initialize_workers = function() { // detect websocket in webworker support and degrade gracefully if (!window.Worker) { // no webworker support + this.decode_worker = false; this.clog("no webworker support at all."); this._do_connect(false); + return; } this.clog("we have webworker support"); // spawn worker that checks for a websocket @@ -418,6 +417,7 @@ XpraClient.prototype.initialize_workers = function() { worker.postMessage({'cmd': 'check'}); if (!DECODE_WORKER) { + this.decode_worker = false; return; } const decode_worker = new Worker('js/DecodeWorker.js'); @@ -441,14 +441,24 @@ XpraClient.prototype.initialize_workers = function() { } switch (data['result']) { case true: - me.clog("we can decode using a worker"); + const formats = data['formats']; + me.clog("we can decode using a worker: "+formats); + for (let i = 0; i < formats.length; i++) { + const format = formats[i]; + if (me.supported_encodings.indexOf(format)<0) { + me.supported_encodings.push(format); + } + } + me.clog("full list of supported encodings:", me.supported_encodings); me.decode_worker = decode_worker; break; case false: me.clog("we can't decode using a worker: "+data['message']); + me.decode_worker = false; break; default: me.clog("client got unknown message from the decode worker"); + me.decode_worker = false; } }, false); // ask the worker to check for websocket support, when we receive a reply @@ -1070,7 +1080,20 @@ XpraClient.prototype.emit_connection_established = function(event_type) { /** * Hello */ -XpraClient.prototype._send_hello = function(challenge_response, client_salt) { +XpraClient.prototype._send_hello = function() { + if (this.decode_worker==null) { + this.clog("waiting for decode worker to finish initializing"); + const me = this; + setTimeout(function() { + me._send_hello(); + }, 100); + } + else { + this.do_send_hello(null, null); + } +} + +XpraClient.prototype.do_send_hello = function(challenge_response, client_salt) { // make the base hello this._make_hello_base(); // handle a challenge if we need to @@ -2200,7 +2223,7 @@ XpraClient.prototype.do_process_challenge = function(digest, server_salt, salt_d this.clog("challenge using digest", digest); const challenge_response = this._gendigest(digest, password, salt); if (challenge_response) { - this._send_hello(challenge_response, client_salt); + this.do_send_hello(challenge_response, client_salt); } else { this.callback_close("server requested an unsupported digest " + digest); diff --git a/html5/js/DecodeWorker.js b/html5/js/DecodeWorker.js index d1281363..f12db6e8 100644 --- a/html5/js/DecodeWorker.js +++ b/html5/js/DecodeWorker.js @@ -284,24 +284,60 @@ function decode_draw_packet(packet) { } } +function check_image_decode(format, image_bytes, success_cb, fail_cb) { + try { + const data = new Uint8Array(image_bytes); + const blob = new Blob([data], {type: "image/"+format}); + createImageBitmap(blob, { + "premultiplyAlpha" : "none", + }).then(function() { + success_cb(format); + }, function(e) { + fail_cb(format, ""+e); + }); + } + catch (e) { + fail_cb(format, ""+e); + } +} + onmessage = function(e) { const data = e.data; switch (data.cmd) { case 'check': - //check for buggy Firefox: - try { - const png_data = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 1, 0, 0, 0, 1, 8, 6, 0, 0, 0, 31, 21, 196, 137, 0, 0, 0, 13, 73, 68, 65, 84, 120, 218, 99, 252, 207, 192, 80, 15, 0, 4, 133, 1, 128, 132, 169, 140, 33, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130]); - const blob = new Blob([png_data], {type: "image/png"}); - createImageBitmap(blob, { - "premultiplyAlpha" : "none", - }).then(function() { - self.postMessage({'result': true}); - }, function(e) { - self.postMessage({'result': false, 'message' : ""+e}); - }); + const CHECKS = { + "png" : [137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 1, 0, 0, 0, 1, 8, 6, 0, 0, 0, 31, 21, 196, 137, 0, 0, 0, 13, 73, 68, 65, 84, 120, 218, 99, 252, 207, 192, 80, 15, 0, 4, 133, 1, 128, 132, 169, 140, 33, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130], + "webp" : [82, 73, 70, 70, 58, 0, 0, 0, 87, 69, 66, 80, 86, 80, 56, 32, 46, 0, 0, 0, 178, 2, 0, 157, 1, 42, 2, 0, 2, 0, 46, 105, 52, 154, 77, 34, 34, 34, 34, 34, 0, 104, 75, 40, 0, 5, 206, 150, 90, 0, 0, 254, 247, 159, 127, 253, 15, 63, 198, 192, 255, 242, 240, 96, 0, 0], + "jpeg" : [255, 216, 255, 224, 0, 16, 74, 70, 73, 70, 0, 1, 1, 1, 0, 96, 0, 96, 0, 0, 255, 219, 0, 67, 0, 8, 6, 6, 7, 6, 5, 8, 7, 7, 7, 9, 9, 8, 10, 12, 20, 13, 12, 11, 11, 12, 25, 18, 19, 15, 20, 29, 26, 31, 30, 29, 26, 28, 28, 32, 36, 46, 39, 32, 34, 44, 35, 28, 28, 40, 55, 41, 44, 48, 49, 52, 52, 52, 31, 39, 57, 61, 56, 50, 60, 46, 51, 52, 50, 255, 219, 0, 67, 1, 9, 9, 9, 12, 11, 12, 24, 13, 13, 24, 50, 33, 28, 33, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 255, 192, 0, 17, 8, 0, 1, 0, 1, 3, 1, 34, 0, 2, 17, 1, 3, 17, 1, 255, 196, 0, 31, 0, 0, 1, 5, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 255, 196, 0, 181, 16, 0, 2, 1, 3, 3, 2, 4, 3, 5, 5, 4, 4, 0, 0, 1, 125, 1, 2, 3, 0, 4, 17, 5, 18, 33, 49, 65, 6, 19, 81, 97, 7, 34, 113, 20, 50, 129, 145, 161, 8, 35, 66, 177, 193, 21, 82, 209, 240, 36, 51, 98, 114, 130, 9, 10, 22, 23, 24, 25, 26, 37, 38, 39, 40, 41, 42, 52, 53, 54, 55, 56, 57, 58, 67, 68, 69, 70, 71, 72, 73, 74, 83, 84, 85, 86, 87, 88, 89, 90, 99, 100, 101, 102, 103, 104, 105, 106, 115, 116, 117, 118, 119, 120, 121, 122, 131, 132, 133, 134, 135, 136, 137, 138, 146, 147, 148, 149, 150, 151, 152, 153, 154, 162, 163, 164, 165, 166, 167, 168, 169, 170, 178, 179, 180, 181, 182, 183, 184, 185, 186, 194, 195, 196, 197, 198, 199, 200, 201, 202, 210, 211, 212, 213, 214, 215, 216, 217, 218, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 241, 242, 243, 244, 245, 246, 247, 248, 249, 250, 255, 196, 0, 31, 1, 0, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 255, 196, 0, 181, 17, 0, 2, 1, 2, 4, 4, 3, 4, 7, 5, 4, 4, 0, 1, 2, 119, 0, 1, 2, 3, 17, 4, 5, 33, 49, 6, 18, 65, 81, 7, 97, 113, 19, 34, 50, 129, 8, 20, 66, 145, 161, 177, 193, 9, 35, 51, 82, 240, 21, 98, 114, 209, 10, 22, 36, 52, 225, 37, 241, 23, 24, 25, 26, 38, 39, 40, 41, 42, 53, 54, 55, 56, 57, 58, 67, 68, 69, 70, 71, 72, 73, 74, 83, 84, 85, 86, 87, 88, 89, 90, 99, 100, 101, 102, 103, 104, 105, 106, 115, 116, 117, 118, 119, 120, 121, 122, 130, 131, 132, 133, 134, 135, 136, 137, 138, 146, 147, 148, 149, 150, 151, 152, 153, 154, 162, 163, 164, 165, 166, 167, 168, 169, 170, 178, 179, 180, 181, 182, 183, 184, 185, 186, 194, 195, 196, 197, 198, 199, 200, 201, 202, 210, 211, 212, 213, 214, 215, 216, 217, 218, 226, 227, 228, 229, 230, 231, 232, 233, 234, 242, 243, 244, 245, 246, 247, 248, 249, 250, 255, 218, 0, 12, 3, 1, 0, 2, 17, 3, 17, 0, 63, 0, 247, 250, 40, 162, 128, 63, 255, 217], + }; + const errors = []; + const formats = []; + function done(format) { + delete CHECKS[format]; + if (Object.keys(CHECKS).length==0) { + if (errors.length==0) { + self.postMessage({'result': true, 'formats' : formats}); + } + else { + self.postMessage({'result': false, 'errors' : errors}); + } + } + } + function success(format) { + //console.log("Decode worker success for "+format); + formats.push(format); + done(format); + } + function failure(format, message) { + errors.push(message); + if (console.warn) { + console.warn("Warning: cannot decode '"+format+"': "+message); + } + done(format); } - catch (e) { - self.postMessage({'result': false, 'message' : ""+e}); + for (var format in CHECKS) { + var image_bytes = CHECKS[format]; + check_image_decode(format, image_bytes, success, failure); } break; case 'eos': diff --git a/html5/js/Utilities.js b/html5/js/Utilities.js index c2f8fb40..f85c9ff9 100644 --- a/html5/js/Utilities.js +++ b/html5/js/Utilities.js @@ -208,15 +208,6 @@ const Utilities = { return layout; }, - canUseWebP : function() { - const elem = document.createElement('canvas'); - const ctx = elem.getContext('2d'); - if (!ctx) { - return false; - } - return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0; - }, - getAudioContextClass : function() { return window.AudioContext || window.webkitAudioContext || window.audioContext; },