From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) by lore.proxmox.com (Postfix) with ESMTPS id 8E9CC1FF13A for ; Wed, 01 Apr 2026 09:55:51 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 308B810E74; Wed, 1 Apr 2026 09:56:14 +0200 (CEST) From: Christian Ebner To: pbs-devel@lists.proxmox.com Subject: [PATCH proxmox-backup 12/20] ui: define and expose encryption key management menu item and windows Date: Wed, 1 Apr 2026 09:55:13 +0200 Message-ID: <20260401075521.176354-13-c.ebner@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20260401075521.176354-1-c.ebner@proxmox.com> References: <20260401075521.176354-1-c.ebner@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-Bm-Milter-Handled: 55990f41-d878-4baa-be0a-ee34c49e34d2 X-Bm-Transport-Timestamp: 1775030089805 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.064 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Message-ID-Hash: 2MLJAVOXVYUUU23NN5VDSWFD5JUY7NFS X-Message-ID-Hash: 2MLJAVOXVYUUU23NN5VDSWFD5JUY7NFS X-MailFrom: c.ebner@proxmox.com X-Mailman-Rule-Misses: dmarc-mitigation; no-senders; approved; loop; banned-address; emergency; member-moderation; nonmember-moderation; administrivia; implicit-dest; max-recipients; max-size; news-moderation; no-subject; digests; suspicious-header X-Mailman-Version: 3.3.10 Precedence: list List-Id: Proxmox Backup Server development discussion List-Help: List-Owner: List-Post: List-Subscribe: List-Unsubscribe: Allows to create or remove encryption keys via the WebUI. A new key entity can be added by either generating a new key by the server itself or uploading a pre-existing key via a key file, similar to what Proxmox VE currently allows when setting up a PBS storage. After creation, the key will be shown in a dialog which allows export thereof. This is reusing the same logic as PVE with slight adaptions to include key id and different api endpoint. On removal the user is informed about the risk of not being able to decrypt snapshots anymore. Signed-off-by: Christian Ebner --- www/Makefile | 2 + www/NavigationTree.js | 6 + www/Utils.js | 1 + www/config/EncryptionKeysView.js | 143 ++++++++++++ www/window/EncryptionKeysEdit.js | 382 +++++++++++++++++++++++++++++++ 5 files changed, 534 insertions(+) create mode 100644 www/config/EncryptionKeysView.js create mode 100644 www/window/EncryptionKeysEdit.js diff --git a/www/Makefile b/www/Makefile index 9ebf0445f..dbede8a5a 100644 --- a/www/Makefile +++ b/www/Makefile @@ -70,6 +70,7 @@ JSSRC= \ config/GCView.js \ config/WebauthnView.js \ config/CertificateView.js \ + config/EncryptionKeysView.js \ config/NodeOptionView.js \ config/MetricServerView.js \ config/NotificationConfigView.js \ @@ -78,6 +79,7 @@ JSSRC= \ window/BackupGroupChangeOwner.js \ window/CreateDirectory.js \ window/DataStoreEdit.js \ + window/EncryptionKeysEdit.js \ window/NamespaceEdit.js \ window/MaintenanceOptions.js \ window/NotesEdit.js \ diff --git a/www/NavigationTree.js b/www/NavigationTree.js index 649692c83..58543bdc3 100644 --- a/www/NavigationTree.js +++ b/www/NavigationTree.js @@ -74,6 +74,12 @@ Ext.define('PBS.store.NavigationStore', { path: 'pbsCertificateConfiguration', leaf: true, }, + { + text: gettext('Encryption Keys'), + iconCls: 'fa fa-lock', + path: 'pbsEncryptionKeysView', + leaf: true, + }, { text: gettext('Notifications'), iconCls: 'fa fa-bell-o', diff --git a/www/Utils.js b/www/Utils.js index 25fba16f9..a10251c2f 100644 --- a/www/Utils.js +++ b/www/Utils.js @@ -450,6 +450,7 @@ Ext.define('PBS.Utils', { prune: (type, id) => PBS.Utils.render_datastore_worker_id(id, gettext('Prune')), prunejob: (type, id) => PBS.Utils.render_prune_job_worker_id(id, gettext('Prune Job')), reader: (type, id) => PBS.Utils.render_datastore_worker_id(id, gettext('Read Objects')), + 'remove-encryption-key': [gettext('Encryption Key'), gettext('Remove Encryption Key')], 'rewind-media': [gettext('Drive'), gettext('Rewind Media')], 's3-refresh': [gettext('Datastore'), gettext('S3 Refresh')], sync: ['Datastore', gettext('Remote Sync')], diff --git a/www/config/EncryptionKeysView.js b/www/config/EncryptionKeysView.js new file mode 100644 index 000000000..965dec47c --- /dev/null +++ b/www/config/EncryptionKeysView.js @@ -0,0 +1,143 @@ +Ext.define('pbs-encryption-keys', { + extend: 'Ext.data.Model', + fields: ['id', 'fingerprint', 'created'], + idProperty: 'id', + proxy: { + type: 'proxmox', + url: '/api2/json/config/encryption-keys', + }, +}); + +Ext.define('PBS.config.EncryptionKeysView', { + extend: 'Ext.grid.GridPanel', + alias: 'widget.pbsEncryptionKeysView', + + title: gettext('Encryption Keys'), + + stateful: true, + stateId: 'grid-encryption-keys', + + controller: { + xclass: 'Ext.app.ViewController', + + addEncryptionKey: function () { + let me = this; + Ext.create('PBS.window.EncryptionKeysEdit', { + listeners: { + destroy: function () { + me.reload(); + }, + }, + }).show(); + }, + + removeEncryptionKey: function () { + let me = this; + let view = me.getView(); + let selection = view.getSelection(); + + if (!selection || selection.length < 1) { + return; + } + + let keyID = selection[0].data.id; + + Ext.create('Proxmox.window.SafeDestroy', { + url: `/api2/json/config/encryption-keys/${keyID}`, + item: { + id: keyID, + }, + autoShow: true, + showProgress: false, + taskName: 'remove-encryption-key', + listeners: { + destroy: () => me.reload(), + }, + additionalItems: [ + { + xtype: 'box', + userCls: 'pmx-hint', + style: { + 'inline-size': '375px', + 'overflow-wrap': 'break-word', + }, + padding: '5', + html: gettext( + 'Make sure you have a backup of the encryption key!

You will not be able to decrypt backup snapshots encrypted with this key once removed.', + ), + }, + ], + }).show(); + }, + + reload: function () { + this.getView().getStore().rstore.load(); + }, + + init: function (view) { + Proxmox.Utils.monStoreErrors(view, view.getStore().rstore); + }, + }, + + listeners: { + activate: 'reload', + itemdblclick: 'editEncryptionKeys', + }, + + store: { + type: 'diff', + autoDestroy: true, + autoDestroyRstore: true, + sorters: 'id', + rstore: { + type: 'update', + storeid: 'pbs-encryption-keys', + model: 'pbs-encryption-keys', + autoStart: true, + interval: 5000, + }, + }, + + tbar: [ + { + xtype: 'proxmoxButton', + text: gettext('Add'), + handler: 'addEncryptionKey', + selModel: false, + }, + { + xtype: 'proxmoxButton', + text: gettext('Remove'), + handler: 'removeEncryptionKey', + disabled: true, + }, + ], + + viewConfig: { + trackOver: false, + }, + + columns: [ + { + dataIndex: 'id', + header: gettext('Encryption Key ID'), + renderer: Ext.String.htmlEncode, + sortable: true, + width: 200, + }, + { + dataIndex: 'fingerprint', + header: gettext('Fingerprint'), + renderer: Ext.String.htmlEncode, + sortable: false, + width: 600, + }, + { + dataIndex: 'created', + header: gettext('Created'), + renderer: Proxmox.Utils.render_timestamp, + sortable: false, + flex: 1, + }, + ], +}); diff --git a/www/window/EncryptionKeysEdit.js b/www/window/EncryptionKeysEdit.js new file mode 100644 index 000000000..42a14cb20 --- /dev/null +++ b/www/window/EncryptionKeysEdit.js @@ -0,0 +1,382 @@ +Ext.define('PBS.ShowEncryptionKey', { + extend: 'Ext.window.Window', + xtype: 'pbsShowEncryptionKey', + mixins: ['Proxmox.Mixin.CBind'], + + width: 600, + modal: true, + resizable: false, + title: gettext('Important: Save your Encryption Key'), + + // avoid close by ESC key, force user to more manual action + onEsc: Ext.emptyFn, + closable: false, + + items: [ + { + xtype: 'form', + layout: { + type: 'vbox', + align: 'stretch', + }, + bodyPadding: 10, + border: false, + defaults: { + anchor: '100%', + border: false, + padding: '10 0 0 0', + }, + items: [ + { + xtype: 'textfield', + fieldLabel: gettext('Key ID'), + labelWidth: 80, + inputId: 'keyID', + cbind: { + value: '{keyID}', + }, + editable: false, + }, + { + xtype: 'textfield', + fieldLabel: gettext('Key'), + labelWidth: 80, + inputId: 'encryption-key', + cbind: { + value: '{key}', + }, + editable: false, + }, + { + xtype: 'component', + html: + gettext( + 'Keep your encryption key safe, but easily accessible for disaster recovery.', + ) + + '
' + + gettext('We recommend the following safe-keeping strategy:'), + }, + { + xtyp: 'container', + layout: 'hbox', + items: [ + { + xtype: 'component', + html: '1. ' + gettext('Save the key in your password manager.'), + flex: 1, + }, + { + xtype: 'button', + text: gettext('Copy Key'), + iconCls: 'fa fa-clipboard x-btn-icon-el-default-toolbar-small', + cls: 'x-btn-default-toolbar-small proxmox-inline-button', + width: 110, + handler: function (b) { + document.getElementById('encryption-key').select(); + document.execCommand('copy'); + }, + }, + ], + }, + { + xtype: 'container', + layout: 'hbox', + items: [ + { + xtype: 'component', + html: + '2. ' + + gettext( + 'Download the key to a USB (pen) drive, placed in secure vault.', + ), + flex: 1, + }, + { + xtype: 'button', + text: gettext('Download'), + iconCls: 'fa fa-download x-btn-icon-el-default-toolbar-small', + cls: 'x-btn-default-toolbar-small proxmox-inline-button', + width: 110, + handler: function (b) { + let showWindow = this.up('window'); + + let filename = `${showWindow.keyID}.enc`; + + let hiddenElement = document.createElement('a'); + hiddenElement.href = + 'data:attachment/text,' + encodeURI(showWindow.key); + hiddenElement.target = '_blank'; + hiddenElement.download = filename; + hiddenElement.click(); + }, + }, + ], + }, + { + xtype: 'container', + layout: 'hbox', + items: [ + { + xtype: 'component', + html: + '3. ' + + gettext('Print as paperkey, laminated and placed in secure vault.'), + flex: 1, + }, + { + xtype: 'button', + text: gettext('Print Key'), + iconCls: 'fa fa-print x-btn-icon-el-default-toolbar-small', + cls: 'x-btn-default-toolbar-small proxmox-inline-button', + width: 110, + handler: function (b) { + let showWindow = this.up('window'); + showWindow.paperkey(showWindow.key); + }, + }, + ], + }, + ], + }, + { + xtype: 'component', + border: false, + padding: '10 10 10 10', + userCls: 'pmx-hint', + html: gettext( + 'Please save the encryption key - losing it will render any backup created with it unusable', + ), + }, + ], + buttons: [ + { + text: gettext('Close'), + handler: function (b) { + let showWindow = this.up('window'); + showWindow.close(); + }, + }, + ], + paperkey: function (keyString) { + let me = this; + + const key = JSON.parse(keyString); + + const qrwidth = 500; + let qrdiv = document.createElement('div'); + let qrcode = new QRCode(qrdiv, { + width: qrwidth, + height: qrwidth, + correctLevel: QRCode.CorrectLevel.H, + }); + qrcode.makeCode(keyString); + + let shortKeyFP = ''; + if (key.fingerprint) { + shortKeyFP = PBS.Utils.renderKeyID(key.fingerprint); + } + + let printFrame = document.createElement('iframe'); + Object.assign(printFrame.style, { + position: 'fixed', + right: '0', + bottom: '0', + width: '0', + height: '0', + border: '0', + }); + const prettifiedKey = JSON.stringify(key, null, 2); + const keyQrBase64 = qrdiv.children[0].toDataURL('image/png'); + const html = ` +

Encryption Key '${me.keyID}' (${shortKeyFP})

+

+-----BEGIN PROXMOX BACKUP KEY----- +${prettifiedKey} +-----END PROXMOX BACKUP KEY-----

+
+ `; + + printFrame.src = 'data:text/html;base64,' + btoa(html); + document.body.appendChild(printFrame); + me.on('destroy', () => document.body.removeChild(printFrame)); + }, +}); + +Ext.define('PBS.window.EncryptionKeysEdit', { + extend: 'Proxmox.window.Edit', + xtype: 'widget.pbsEncryptionKeysEdit', + mixins: ['Proxmox.Mixin.CBind'], + + width: 400, + + fieldDefaults: { labelWidth: 120 }, + + subject: gettext('Encryption Key'), + + cbindData: function (initialConfig) { + let me = this; + + me.url = '/api2/extjs/config/encryption-keys'; + me.method = 'POST'; + me.autoLoad = false; + + return {}; + }, + + apiCallDone: function (success, response, options) { + let me = this; + + if (!me.rendered) { + return; + } + + let res = response.result.data; + if (!res) { + return; + } + + let keyIdField = me.down('field[name=id]'); + Ext.create('PBS.ShowEncryptionKey', { + autoShow: true, + keyID: keyIdField.getValue(), + key: JSON.stringify(res), + }); + }, + + viewModel: { + data: { + keepCryptVisible: false, + }, + }, + + items: [ + { + xtype: 'pmxDisplayEditField', + name: 'id', + fieldLabel: gettext('Encryption Key ID'), + renderer: Ext.htmlEncode, + allowBlank: false, + minLength: 4, + editable: true, + }, + { + xtype: 'displayfield', + name: 'crypt-key-fp', + fieldLabel: gettext('Key Source'), + padding: '2 0', + }, + { + xtype: 'radiofield', + name: 'keysource', + value: true, + inputValue: 'new', + submitValue: false, + boxLabel: gettext('Auto-generate a new encryption key'), + padding: '0 0 0 25', + }, + { + xtype: 'radiofield', + name: 'keysource', + inputValue: 'upload', + submitValue: false, + boxLabel: gettext('Upload an existing encryption key'), + padding: '0 0 0 25', + listeners: { + change: function (f, value) { + let editWindow = this.up('window'); + if (!editWindow.rendered) { + return; + } + let uploadKeyField = editWindow.down('field[name=key]'); + uploadKeyField.setDisabled(!value); + uploadKeyField.setHidden(!value); + + let uploadKeyButton = editWindow.down('filebutton[name=upload-button]'); + uploadKeyButton.setDisabled(!value); + uploadKeyButton.setHidden(!value); + + if (value) { + uploadKeyField.validate(); + } else { + uploadKeyField.reset(); + } + }, + }, + }, + { + xtype: 'fieldcontainer', + layout: 'hbox', + items: [ + { + xtype: 'proxmoxtextfield', + name: 'key', + fieldLabel: gettext('Upload From File'), + value: '', + disabled: true, + hidden: true, + allowBlank: false, + labelAlign: 'right', + flex: 1, + emptyText: gettext('Drag-and-drop key file here.'), + validator: function (value) { + if (value.length) { + let key; + try { + key = JSON.parse(value); + } catch (e) { + return 'Failed to parse key - ' + e; + } + if (key.data === undefined) { + return 'Does not seems like a valid Proxmox Backup key!'; + } + } + return true; + }, + afterRender: function () { + if (!window.FileReader) { + // No FileReader support in this browser + return; + } + let cancel = function (ev) { + ev = ev.event; + if (ev.preventDefault) { + ev.preventDefault(); + } + }; + this.inputEl.on('dragover', cancel); + this.inputEl.on('dragenter', cancel); + this.inputEl.on('drop', (ev) => { + cancel(ev); + let reader = new FileReader(); + reader.onload = (val) => this.setValue(val); + reader.readAsText(ev.event.dataTransfer.files[0]); + }); + }, + }, + { + xtype: 'filebutton', + name: 'upload-button', + iconCls: 'fa fa-fw fa-folder-open-o x-btn-icon-el-default-toolbar-small', + cls: 'x-btn-default-toolbar-small proxmox-inline-button', + margin: '0 0 0 4', + disabled: true, + hidden: true, + listeners: { + change: function (btn, e, value) { + let ev = e.event; + let field = btn.up().down('proxmoxtextfield[name=key]'); + let reader = new FileReader(); + reader.onload = (ev) => field.setValue(ev.target.result); + reader.readAsText(ev.target.files[0]); + btn.reset(); + }, + }, + }, + ], + }, + ], +}); -- 2.47.3