From: Christian Ebner <c.ebner@proxmox.com>
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 [thread overview]
Message-ID: <20260401075521.176354-13-c.ebner@proxmox.com> (raw)
In-Reply-To: <20260401075521.176354-1-c.ebner@proxmox.com>
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!<br><br>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.',
+ ) +
+ '<br>' +
+ 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 = `<html><head><script>
+ window.addEventListener('DOMContentLoaded', (ev) => window.print());
+ </script><style>@media print and (max-height: 150mm) {
+ h4, p { margin: 0; font-size: 1em; }
+ }</style></head><body style="padding: 5px;">
+ <h4>Encryption Key '${me.keyID}' (${shortKeyFP})</h4>
+<p style="font-size:1.2em;font-family:monospace;white-space:pre-wrap;overflow-wrap:break-word;">
+-----BEGIN PROXMOX BACKUP KEY-----
+${prettifiedKey}
+-----END PROXMOX BACKUP KEY-----</p>
+ <center><img style="width: 100%; max-width: ${qrwidth}px;" src="${keyQrBase64}"></center>
+ </body></html>`;
+
+ 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
next prev parent reply other threads:[~2026-04-01 7:55 UTC|newest]
Thread overview: 32+ messages / expand[flat|nested] mbox.gz Atom feed top
2026-04-01 7:55 [PATCH proxmox{,-backup} 00/20] fix #7251: implement server side encryption support for push sync jobs Christian Ebner
2026-04-01 7:55 ` [PATCH proxmox 01/20] pbs-api-types: define encryption key type and schema Christian Ebner
2026-04-01 7:55 ` [PATCH proxmox 02/20] pbs-api-types: sync job: add optional encryption key to config Christian Ebner
2026-04-01 7:55 ` [PATCH proxmox-backup 03/20] pbs-key-config: introduce store_with() for KeyConfig Christian Ebner
2026-04-01 7:55 ` [PATCH proxmox-backup 04/20] pbs-config: implement encryption key config handling Christian Ebner
2026-04-01 23:27 ` Thomas Lamprecht
2026-04-02 7:09 ` Christian Ebner
2026-04-01 7:55 ` [PATCH proxmox-backup 05/20] pbs-config: acls: add 'encryption-keys' as valid 'system' subpath Christian Ebner
2026-04-01 7:55 ` [PATCH proxmox-backup 06/20] ui: expose 'encryption-keys' as acl subpath for 'system' Christian Ebner
2026-04-01 7:55 ` [PATCH proxmox-backup 07/20] api: config: add endpoints for encryption key manipulation Christian Ebner
2026-04-01 7:55 ` [PATCH proxmox-backup 08/20] api: config: allow encryption key manipulation for sync job Christian Ebner
2026-04-01 7:55 ` [PATCH proxmox-backup 09/20] sync: push: rewrite manifest instead of pushing pre-existing one Christian Ebner
2026-04-01 7:55 ` [PATCH proxmox-backup 10/20] sync: add helper to check encryption key acls and load key Christian Ebner
2026-04-01 7:55 ` [PATCH proxmox-backup 11/20] fix #7251: api: push: encrypt snapshots using configured encryption key Christian Ebner
2026-04-01 7:55 ` Christian Ebner [this message]
2026-04-01 23:09 ` [PATCH proxmox-backup 12/20] ui: define and expose encryption key management menu item and windows Thomas Lamprecht
2026-04-03 8:35 ` Dominik Csapak
2026-04-01 23:10 ` Thomas Lamprecht
2026-04-03 12:16 ` Dominik Csapak
2026-04-01 7:55 ` [PATCH proxmox-backup 13/20] ui: expose assigning encryption key to sync jobs Christian Ebner
2026-04-01 7:55 ` [PATCH proxmox-backup 14/20] sync: pull: load encryption key if given in job config Christian Ebner
2026-04-01 7:55 ` [PATCH proxmox-backup 15/20] sync: expand source chunk reader trait by crypt config Christian Ebner
2026-04-01 7:55 ` [PATCH proxmox-backup 16/20] sync: pull: introduce and use decrypt index writer if " Christian Ebner
2026-04-01 7:55 ` [PATCH proxmox-backup 17/20] sync: pull: extend encountered chunk by optional decrypted digest Christian Ebner
2026-04-01 7:55 ` [PATCH proxmox-backup 18/20] sync: pull: decrypt blob files on pull if encryption key is configured Christian Ebner
2026-04-01 7:55 ` [PATCH proxmox-backup 19/20] sync: pull: decrypt chunks and rewrite index file for matching key Christian Ebner
2026-04-01 7:55 ` [PATCH proxmox-backup 20/20] sync: pull: decrypt snapshots with matching encryption key fingerprint Christian Ebner
2026-04-02 0:25 ` [PATCH proxmox{,-backup} 00/20] fix #7251: implement server side encryption support for push sync jobs Thomas Lamprecht
2026-04-02 7:37 ` Christian Ebner
2026-04-03 8:39 ` Dominik Csapak
2026-04-03 8:50 ` Christian Ebner
2026-04-03 9:00 ` Dominik Csapak
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20260401075521.176354-13-c.ebner@proxmox.com \
--to=c.ebner@proxmox.com \
--cc=pbs-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.