[PATCH proxmox-backup 12/20] ui: define and expose encryption key management menu item and windows

Christian Ebner
2026-04-01T07:55:51Z

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 <c.ebner@proxmox.com>
---
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 = `
+ window.addEventListener('DOMContentLoaded', (ev) => window.print());
+ @media print and (max-height: 150mm) {
+ h4, p { margin: 0; font-size: 1em; }
+ }
+ 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