From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9]) by lore.proxmox.com (Postfix) with ESMTPS id EA6231FF140 for ; Fri, 10 Apr 2026 18:55:13 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 2361723B8E; Fri, 10 Apr 2026 18:55:47 +0200 (CEST) From: Christian Ebner To: pbs-devel@lists.proxmox.com Subject: [PATCH proxmox-backup v2 19/27] ui: define and expose encryption key management menu item and windows Date: Fri, 10 Apr 2026 18:54:46 +0200 Message-ID: <20260410165454.1578501-20-c.ebner@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20260410165454.1578501-1-c.ebner@proxmox.com> References: <20260410165454.1578501-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: 1775840039837 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.070 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: 2MA6QKQJ3FZNI7J4WI2O6QAPC5U5TTVV X-Message-ID-Hash: 2MA6QKQJ3FZNI7J4WI2O6QAPC5U5TTVV 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 | 324 ++++++++++++++++++++++++++ www/window/EncryptionKeysEdit.js | 383 +++++++++++++++++++++++++++++++ 5 files changed, 716 insertions(+) create mode 100644 www/config/EncryptionKeysView.js create mode 100644 www/window/EncryptionKeysEdit.js diff --git a/www/Makefile b/www/Makefile index 5a60e47e1..08ad50846 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 35b8d693b..f596c7d1b 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 350ab820b..bf4b025c7 100644 --- a/www/Utils.js +++ b/www/Utils.js @@ -451,6 +451,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('Key'), gettext('Remove 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..ecf67cb6a --- /dev/null +++ b/www/config/EncryptionKeysView.js @@ -0,0 +1,324 @@ +Ext.define('pbs-encryption-keys', { + extend: 'Ext.data.Model', + fields: ['id', 'type', 'hint', 'fingerprint', 'created', 'archived-at'], + idProperty: 'id', +}); + +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', + + addSyncEncryptionKey: function () { + let me = this; + Ext.create('PBS.window.EncryptionKeysEdit', { + listeners: { + destroy: function () { + me.reload(); + }, + }, + }).show(); + }, + + addTapeEncryptionKey: function () { + let me = this; + Ext.create('PBS.TapeManagement.EncryptionEditWindow', { + listeners: { + destroy: function () { + me.reload(); + }, + }, + }).show(); + }, + + archiveEncryptionKey: function () { + let me = this; + let view = me.getView(); + let selection = view.getSelection(); + + if (!selection || selection.length < 1) { + return; + } + + if (selection[0].data.type === 'tape') { + Ext.Msg.alert(gettext('Error'), gettext('cannot archive tape key')); + } + + let keyID = selection[0].data.id; + Proxmox.Utils.API2Request({ + url: `/api2/extjs/config/encryption-keys/${keyID}`, + method: 'POST', + waitMsgTarget: view, + failure: function (response, opts) { + Ext.Msg.alert(gettext('Error'), response.htmlStatus); + }, + success: function (response, opts) { + view.getSelectionModel().deselectAll(); + me.reload(); + }, + }); + }, + + removeEncryptionKey: function () { + let me = this; + let view = me.getView(); + let selection = view.getSelection(); + + if (!selection || selection.length < 1) { + return; + } + + let keyType = selection[0].data.type; + let keyID = selection[0].data.id; + let keyFp = selection[0].data.fingerprint; + let endpointUrl = + keyType === 'tape' + ? `/api2/extjs/config/tape-encryption-keys/${keyFp}` + : `/api2/extjs/config/encryption-keys/${keyID}`; + + Ext.create('Proxmox.window.SafeDestroy', { + url: endpointUrl, + item: { + id: `${keyType}/${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 contents encrypted with this key once removed.', + ), + }, + ], + }).show(); + }, + + restoreEncryptionKey: function () { + Ext.create('Proxmox.window.Edit', { + title: gettext('Restore Key'), + isCreate: true, + submitText: gettext('Restore'), + method: 'POST', + url: `/api2/extjs/tape/drive`, + submitUrl: function (url, values) { + let drive = values.drive; + delete values.drive; + return `${url}/${drive}/restore-key`; + }, + items: [ + { + xtype: 'pbsDriveSelector', + fieldLabel: gettext('Drive'), + name: 'drive', + }, + { + xtype: 'textfield', + inputType: 'password', + fieldLabel: gettext('Password'), + name: 'password', + }, + ], + }).show(); + }, + + reload: async function () { + let me = this; + let view = me.getView(); + + let syncKeysFuture = Proxmox.Async.api2({ + url: '/api2/extjs/config/encryption-keys', + method: 'GET', + params: { + 'include-archived': true, + }, + }); + + let tapeKeysFuture = Proxmox.Async.api2({ + url: '/api2/extjs/config/tape-encryption-keys', + method: 'GET', + }); + + let [syncKeys, tapeKeys] = await Promise.all([syncKeysFuture, tapeKeysFuture]); + + let combinedKeys = []; + + syncKeys.result.data.forEach((key) => { + key.type = 'sync'; + combinedKeys.push(key); + }); + + tapeKeys.result.data.forEach((key) => { + // generate a temp id for listing based on creation timestamp and fingerprint + key.id = `${key.created}-${key.fingerprint.substring(0, 9).replace(/:/g, '')}`; + key.type = 'tape'; + combinedKeys.push(key); + }); + + let store = view.getStore().rstore; + store.loadData(combinedKeys); + store.fireEvent('load', store, combinedKeys, true); + }, + + init: function () { + let me = this; + me.reload(); + me.updateTask = Ext.TaskManager.start({ + run: () => me.reload(), + interval: 5000, + }); + }, + + destroy: function () { + let me = this; + if (me.updateTask) { + Ext.TaskManager.stop(me.updateTask); + } + }, + }, + + listeners: { + activate: 'reload', + }, + + store: { + type: 'diff', + autoDestroy: true, + autoDestroyRstore: true, + sorters: 'id', + rstore: { + type: 'store', + storeid: 'pbs-encryption-keys', + model: 'pbs-encryption-keys', + proxy: { + type: 'memory', + }, + }, + }, + + tbar: [ + { + text: gettext('Add'), + menu: [ + { + text: gettext('Add Sync Encryption Key'), + iconCls: 'fa fa-check-circle', + handler: 'addSyncEncryptionKey', + selModel: false, + }, + { + text: gettext('Add Tape Encryption Key'), + iconCls: 'pbs-icon-tape', + handler: 'addTapeEncryptionKey', + selModel: false, + }, + ], + }, + '-', + { + xtype: 'proxmoxButton', + text: gettext('Archive'), + handler: 'archiveEncryptionKey', + dangerous: true, + confirmMsg: Ext.String.format( + gettext('Archiving will render the key unusable to encrypt new content, proceed?'), + ), + disabled: true, + enableFn: (item) => item.data.type === 'sync' && !item.data['archived-at'], + }, + '-', + { + xtype: 'proxmoxButton', + text: gettext('Remove'), + handler: 'removeEncryptionKey', + disabled: true, + enableFn: (item) => + (item.data.type === 'sync' && !!item.data['archived-at']) || + item.data.type === 'tape', + }, + '-', + { + text: gettext('Restore Key'), + xtype: 'proxmoxButton', + handler: 'restoreEncryptionKey', + disabled: true, + enableFn: (item) => item.data.type === 'tape', + }, + ], + + viewConfig: { + trackOver: false, + }, + + columns: [ + { + dataIndex: 'id', + header: gettext('Key ID'), + renderer: Ext.String.htmlEncode, + sortable: true, + width: 200, + }, + { + dataIndex: 'type', + header: gettext('Type'), + renderer: function (value) { + let iconCls, label; + if (value === 'sync') { + iconCls = 'fa fa-check-circle'; + label = gettext('Sync'); + } else if (value === 'tape') { + iconCls = 'pbs-icon-tape'; + label = gettext('Tape'); + } else { + return value; + } + return ` ${label}`; + }, + sortable: true, + width: 50, + }, + { + dataIndex: 'hint', + header: gettext('Hint'), + sortable: true, + width: 50, + }, + { + dataIndex: 'fingerprint', + header: gettext('Fingerprint'), + sortable: false, + width: 600, + }, + { + dataIndex: 'created', + header: gettext('Created'), + renderer: Proxmox.Utils.render_timestamp, + sortable: true, + flex: 1, + }, + { + dataIndex: 'archived-at', + header: gettext('Archived'), + renderer: (val) => (val ? Proxmox.Utils.render_timestamp(val) : ''), + sortable: true, + flex: 1, + }, + ], +}); diff --git a/www/window/EncryptionKeysEdit.js b/www/window/EncryptionKeysEdit.js new file mode 100644 index 000000000..f5edf5dc4 --- /dev/null +++ b/www/window/EncryptionKeysEdit.js @@ -0,0 +1,383 @@ +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:'), + }, + { + xtype: '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: 3, + 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 () { + let me = this; + 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 = (ev) => me.setValue(ev.target.result); + 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