mirror of
https://github.com/nextcloud/server.git
synced 2026-04-23 23:27:46 -04:00
fix(settings): Clarify peculiarities of enabling encryption
- Clarify that enabling server side encryption will not encrypt existing files but only new or changed files. - Clarify that server side encryption can only be disabled using OCC - Ensure there is accessible information of encryption state (`disabled` input will not be announced so make it `aria-disabled` instead) - Make warning more prominent by moving it into a dialog Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen
parent
8bc5ec1879
commit
cdaeb63862
5 changed files with 294 additions and 191 deletions
|
|
@ -1,189 +0,0 @@
|
|||
<!--
|
||||
- SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
|
||||
- SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<template>
|
||||
<NcSettingsSection :name="t('settings', 'Server-side encryption')"
|
||||
:description="t('settings', 'Server-side encryption makes it possible to encrypt files which are uploaded to this server. This comes with limitations like a performance penalty, so enable this only if needed.')"
|
||||
:doc-url="encryptionAdminDoc">
|
||||
<NcCheckboxRadioSwitch :checked="encryptionEnabled || shouldDisplayWarning"
|
||||
:disabled="encryptionEnabled"
|
||||
type="switch"
|
||||
@update:checked="displayWarning">
|
||||
{{ t('settings', 'Enable server-side encryption') }}
|
||||
</NcCheckboxRadioSwitch>
|
||||
|
||||
<div v-if="shouldDisplayWarning && !encryptionEnabled" class="notecard warning" role="alert">
|
||||
<p>{{ t('settings', 'Please read carefully before activating server-side encryption:') }}</p>
|
||||
<ul>
|
||||
<li>{{ t('settings', 'Once encryption is enabled, all files uploaded to the server from that point forward will be encrypted at rest on the server. It will only be possible to disable encryption at a later date if the active encryption module supports that function, and all pre-conditions (e.g. setting a recover key) are met.') }}</li>
|
||||
<li>{{ t('settings', 'Encryption alone does not guarantee security of the system. Please see documentation for more information about how the encryption app works, and the supported use cases.') }}</li>
|
||||
<li>{{ t('settings', 'Be aware that encryption always increases the file size.') }}</li>
|
||||
<li>{{ t('settings', 'It is always good to create regular backups of your data, in case of encryption make sure to backup the encryption keys along with your data.') }}</li>
|
||||
</ul>
|
||||
|
||||
<p class="margin-bottom">
|
||||
{{ t('settings', 'This is the final warning: Do you really want to enable encryption?') }}
|
||||
</p>
|
||||
<NcButton type="primary"
|
||||
@click="enableEncryption()">
|
||||
{{ t('settings', "Enable encryption") }}
|
||||
</NcButton>
|
||||
</div>
|
||||
|
||||
<div v-if="encryptionEnabled">
|
||||
<div v-if="encryptionReady">
|
||||
<p v-if="encryptionModules.length === 0">
|
||||
{{ t('settings', 'No encryption module loaded, please enable an encryption module in the app menu.') }}
|
||||
</p>
|
||||
<template v-else>
|
||||
<h3>{{ t('settings', 'Select default encryption module:') }}</h3>
|
||||
<fieldset>
|
||||
<NcCheckboxRadioSwitch v-for="(module, id) in encryptionModules"
|
||||
:key="id"
|
||||
:checked.sync="defaultCheckedModule"
|
||||
:value="id"
|
||||
type="radio"
|
||||
name="default_encryption_module"
|
||||
@update:checked="checkDefaultModule">
|
||||
{{ module.displayName }}
|
||||
</NcCheckboxRadioSwitch>
|
||||
</fieldset>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div v-else-if="externalBackendsEnabled">
|
||||
{{
|
||||
t(
|
||||
'settings',
|
||||
'You need to migrate your encryption keys from the old encryption (ownCloud <= 8.0) to the new one. Please enable the "Default encryption module" and run {command}',
|
||||
{ command: '"occ encryption:migrate"' },
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</NcSettingsSection>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { showError } from '@nextcloud/dialogs'
|
||||
import { loadState } from '@nextcloud/initial-state'
|
||||
import { generateOcsUrl } from '@nextcloud/router'
|
||||
import { confirmPassword } from '@nextcloud/password-confirmation'
|
||||
import axios from '@nextcloud/axios'
|
||||
import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
|
||||
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
|
||||
import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
|
||||
|
||||
import logger from '../logger'
|
||||
|
||||
import '@nextcloud/password-confirmation/dist/style.css'
|
||||
|
||||
export default {
|
||||
name: 'Encryption',
|
||||
components: {
|
||||
NcCheckboxRadioSwitch,
|
||||
NcSettingsSection,
|
||||
NcButton,
|
||||
},
|
||||
data() {
|
||||
const encryptionModules = loadState('settings', 'encryption-modules')
|
||||
return {
|
||||
encryptionReady: loadState('settings', 'encryption-ready'),
|
||||
encryptionEnabled: loadState('settings', 'encryption-enabled'),
|
||||
externalBackendsEnabled: loadState('settings', 'external-backends-enabled'),
|
||||
encryptionAdminDoc: loadState('settings', 'encryption-admin-doc'),
|
||||
encryptionModules,
|
||||
shouldDisplayWarning: false,
|
||||
migrating: false,
|
||||
defaultCheckedModule: Object.entries(encryptionModules).find((module) => module[1].default)?.[0],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
displayWarning() {
|
||||
if (!this.encryptionEnabled) {
|
||||
this.shouldDisplayWarning = !this.shouldDisplayWarning
|
||||
} else {
|
||||
this.encryptionEnabled = false
|
||||
this.shouldDisplayWarning = false
|
||||
}
|
||||
},
|
||||
async update(key, value) {
|
||||
await confirmPassword()
|
||||
|
||||
const url = generateOcsUrl('/apps/provisioning_api/api/v1/config/apps/{appId}/{key}', {
|
||||
appId: 'core',
|
||||
key,
|
||||
})
|
||||
|
||||
try {
|
||||
const { data } = await axios.post(url, {
|
||||
value,
|
||||
})
|
||||
this.handleResponse({
|
||||
status: data.ocs?.meta?.status,
|
||||
})
|
||||
} catch (e) {
|
||||
this.handleResponse({
|
||||
errorMessage: t('settings', 'Unable to update server side encryption config'),
|
||||
error: e,
|
||||
})
|
||||
}
|
||||
},
|
||||
async checkDefaultModule() {
|
||||
await this.update('default_encryption_module', this.defaultCheckedModule)
|
||||
},
|
||||
async enableEncryption() {
|
||||
this.encryptionEnabled = true
|
||||
await this.update('encryption_enabled', 'yes')
|
||||
},
|
||||
async handleResponse({ status, errorMessage, error }) {
|
||||
if (status !== 'ok') {
|
||||
showError(errorMessage)
|
||||
logger.error(errorMessage, { error })
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.notecard.success {
|
||||
--note-background: rgba(var(--color-success-rgb), 0.2);
|
||||
--note-theme: var(--color-success);
|
||||
}
|
||||
|
||||
.notecard.error {
|
||||
--note-background: rgba(var(--color-error-rgb), 0.2);
|
||||
--note-theme: var(--color-error);
|
||||
}
|
||||
|
||||
.notecard.warning {
|
||||
--note-background: rgba(var(--color-warning-rgb), 0.2);
|
||||
--note-theme: var(--color-warning);
|
||||
}
|
||||
|
||||
#body-settings .notecard {
|
||||
color: var(--color-text-light);
|
||||
background-color: var(--note-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-inline-start: 4px solid var(--note-theme);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: rgba(43, 42, 51, 0.05) 0px 1px 2px 0px;
|
||||
margin: 1rem 0;
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: initial;
|
||||
margin-inline-start: 1rem;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.margin-bottom {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
197
apps/settings/src/components/Encryption/EncryptionSettings.vue
Normal file
197
apps/settings/src/components/Encryption/EncryptionSettings.vue
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
<!--
|
||||
- SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
|
||||
- SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { OCSResponse } from '@nextcloud/typings/ocs'
|
||||
import { showError, spawnDialog } from '@nextcloud/dialogs'
|
||||
import { loadState } from '@nextcloud/initial-state'
|
||||
import { t } from '@nextcloud/l10n'
|
||||
import { confirmPassword } from '@nextcloud/password-confirmation'
|
||||
import { generateOcsUrl } from '@nextcloud/router'
|
||||
import { ref } from 'vue'
|
||||
import { textExistingFilesNotEncrypted } from './sharedTexts.ts'
|
||||
|
||||
import axios from '@nextcloud/axios'
|
||||
import logger from '../../logger.ts'
|
||||
|
||||
import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
|
||||
import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
|
||||
import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
|
||||
import EncryptionWarningDialog from './EncryptionWarningDialog.vue'
|
||||
|
||||
interface EncryptionModule {
|
||||
default?: boolean
|
||||
displayName: string
|
||||
}
|
||||
|
||||
const allEncryptionModules = loadState<never[]|Record<string, EncryptionModule>>('settings', 'encryption-modules')
|
||||
/** Available encryption modules on the backend */
|
||||
const encryptionModules = Array.isArray(allEncryptionModules) ? [] : Object.entries(allEncryptionModules).map(([id, module]) => ({ ...module, id }))
|
||||
/** ID of the default encryption module */
|
||||
const defaultCheckedModule = encryptionModules.find((module) => module.default)?.id
|
||||
|
||||
/** Is the server side encryptio ready to be enabled */
|
||||
const encryptionReady = loadState<boolean>('settings', 'encryption-ready')
|
||||
/** Are external backends enabled (legacy ownCloud stuff) */
|
||||
const externalBackendsEnabled = loadState<boolean>('settings', 'external-backends-enabled')
|
||||
/** URL to the admin docs */
|
||||
const encryptionAdminDoc = loadState<string>('settings', 'encryption-admin-doc')
|
||||
|
||||
/** Is the encryption enabled */
|
||||
const encryptionEnabled = ref(loadState<boolean>('settings', 'encryption-enabled'))
|
||||
|
||||
/** Loading state while enabling encryption (e.g. because the confirmation dialog is open) */
|
||||
const loadingEncryptionState = ref(false)
|
||||
|
||||
/**
|
||||
* Open the encryption-enabling warning (spawns a dialog)
|
||||
* @param enabled The enabled state of encryption
|
||||
*/
|
||||
function displayWarning(enabled: boolean) {
|
||||
if (loadingEncryptionState.value || enabled === false) {
|
||||
return
|
||||
}
|
||||
|
||||
loadingEncryptionState.value = true
|
||||
spawnDialog(EncryptionWarningDialog, {}, async (confirmed) => {
|
||||
try {
|
||||
if (confirmed) {
|
||||
await enableEncryption()
|
||||
}
|
||||
} finally {
|
||||
loadingEncryptionState.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Update an encryption setting on the backend
|
||||
* @param key The setting to update
|
||||
* @param value The new value
|
||||
*/
|
||||
async function update(key: string, value: string) {
|
||||
await confirmPassword()
|
||||
|
||||
const url = generateOcsUrl('/apps/provisioning_api/api/v1/config/apps/{appId}/{key}', {
|
||||
appId: 'core',
|
||||
key,
|
||||
})
|
||||
|
||||
try {
|
||||
const { data } = await axios.post<OCSResponse>(url, {
|
||||
value,
|
||||
})
|
||||
if (data.ocs.meta.status !== 'ok') {
|
||||
throw new Error('Unsuccessful OCS response', { cause: data.ocs })
|
||||
}
|
||||
} catch (error) {
|
||||
showError(t('settings', 'Unable to update server side encryption config'))
|
||||
logger.error('Unable to update server side encryption config', { error })
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* Choose the default encryption module
|
||||
*/
|
||||
async function checkDefaultModule(): Promise<void> {
|
||||
if (defaultCheckedModule) {
|
||||
await update('default_encryption_module', defaultCheckedModule)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Enable encryption - sends an async POST request
|
||||
*/
|
||||
async function enableEncryption(): Promise<void> {
|
||||
encryptionEnabled.value = await update('encryption_enabled', 'yes')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NcSettingsSection :name="t('settings', 'Server-side encryption')"
|
||||
:description="t('settings', 'Server-side encryption makes it possible to encrypt files which are uploaded to this server. This comes with limitations like a performance penalty, so enable this only if needed.')"
|
||||
:doc-url="encryptionAdminDoc">
|
||||
<NcNoteCard v-if="encryptionEnabled" type="info">
|
||||
<p>
|
||||
{{ textExistingFilesNotEncrypted }}
|
||||
{{ t('settings', 'To encrypt all existing files run this OCC command:') }}
|
||||
</p>
|
||||
<code>
|
||||
<pre>occ encryption:encrypt-all</pre>
|
||||
</code>
|
||||
</NcNoteCard>
|
||||
|
||||
<NcCheckboxRadioSwitch :class="{ disabled: encryptionEnabled }"
|
||||
:checked="encryptionEnabled"
|
||||
:aria-disabled="encryptionEnabled ? 'true' : undefined"
|
||||
:aria-describedby="encryptionEnabled ? 'server-side-encryption-disable-hint' : undefined"
|
||||
:loading="loadingEncryptionState"
|
||||
type="switch"
|
||||
@update:checked="displayWarning">
|
||||
{{ t('settings', 'Enable server-side encryption') }}
|
||||
</NcCheckboxRadioSwitch>
|
||||
<p v-if="encryptionEnabled" id="server-side-encryption-disable-hint" class="disable-hint">
|
||||
{{ t('settings', 'Disabling server side encryption is only possible using OCC, please refer to the documentation.') }}
|
||||
</p>
|
||||
|
||||
<NcNoteCard v-if="encryptionModules.length === 0"
|
||||
type="warning"
|
||||
:text="t('settings', 'No encryption module loaded, please enable an encryption module in the app menu.')" />
|
||||
|
||||
<template v-else-if="encryptionEnabled">
|
||||
<div v-if="encryptionReady && encryptionModules.length > 0">
|
||||
<h3>{{ t('settings', 'Select default encryption module:') }}</h3>
|
||||
<fieldset>
|
||||
<NcCheckboxRadioSwitch v-for="module in encryptionModules"
|
||||
:key="module.id"
|
||||
:checked.sync="defaultCheckedModule"
|
||||
:value="module.id"
|
||||
type="radio"
|
||||
name="default_encryption_module"
|
||||
@update:checked="checkDefaultModule">
|
||||
{{ module.displayName }}
|
||||
</NcCheckboxRadioSwitch>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div v-else-if="externalBackendsEnabled">
|
||||
{{
|
||||
t(
|
||||
'settings',
|
||||
'You need to migrate your encryption keys from the old encryption (ownCloud <= 8.0) to the new one. Please enable the "Default encryption module" and run {command}',
|
||||
{ command: '"occ encryption:migrate"' },
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
</NcSettingsSection>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
code {
|
||||
background-color: var(--color-background-dark);
|
||||
color: var(--color-main-text);
|
||||
|
||||
display: block;
|
||||
margin-block-start: 0.5rem;
|
||||
padding: .25lh .5lh;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
.disabled :deep(*) {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
.disable-hint {
|
||||
color: var(--color-text-maxcontrast);
|
||||
padding-inline-start: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!--
|
||||
- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
|
||||
- SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { IDialogButton } from '@nextcloud/dialogs'
|
||||
|
||||
import { t } from '@nextcloud/l10n'
|
||||
import { textExistingFilesNotEncrypted } from './sharedTexts.ts'
|
||||
import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
|
||||
import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'close', encrypt: boolean): void
|
||||
}>()
|
||||
|
||||
const buttons: IDialogButton[] = [
|
||||
{
|
||||
label: t('settings', 'Cancel encryption'),
|
||||
// @ts-expect-error Needs to be fixed in the dialogs library - value is allowed but missing from the types
|
||||
type: 'tertiary',
|
||||
callback: () => emit('close', false),
|
||||
},
|
||||
{
|
||||
label: t('settings', 'Enable encryption'),
|
||||
type: 'error',
|
||||
callback: () => emit('close', true),
|
||||
},
|
||||
]
|
||||
|
||||
/**
|
||||
* When closed we need to emit the close event
|
||||
* @param isOpen open state of the dialog
|
||||
*/
|
||||
function onUpdateOpen(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
emit('close', false)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NcDialog :buttons="buttons"
|
||||
:name="t('settings', 'Confirm enabling encryption')"
|
||||
size="normal"
|
||||
@update:open="onUpdateOpen">
|
||||
<NcNoteCard type="warning">
|
||||
<p>
|
||||
{{ t('settings', 'Please read carefully before activating server-side encryption:') }}
|
||||
<ul>
|
||||
<li>
|
||||
{{ t('settings', 'Once encryption is enabled, all files uploaded to the server from that point forward will be encrypted at rest on the server. It will only be possible to disable encryption at a later date if the active encryption module supports that function, and all pre-conditions (e.g. setting a recover key) are met.') }}
|
||||
</li>
|
||||
<li>
|
||||
{{ t('settings', 'Encryption alone does not guarantee security of the system. Please see documentation for more information about how the encryption app works, and the supported use cases.') }}
|
||||
</li>
|
||||
<li>
|
||||
{{ t('settings', 'Be aware that encryption always increases the file size.') }}
|
||||
</li>
|
||||
<li>
|
||||
{{ t('settings', 'It is always good to create regular backups of your data, in case of encryption make sure to backup the encryption keys along with your data.') }}
|
||||
</li>
|
||||
<li>
|
||||
{{ textExistingFilesNotEncrypted }}
|
||||
{{ t('settings', 'Refer to the admin documentation on how to manually also encrypt existing files.') }}
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
</NcNoteCard>
|
||||
<p>
|
||||
{{ t('settings', 'This is the final warning: Do you really want to enable encryption?') }}
|
||||
</p>
|
||||
</NcDialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
li {
|
||||
list-style-type: initial;
|
||||
margin-inline-start: 1rem;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
p + p,
|
||||
div + p {
|
||||
margin-block: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
7
apps/settings/src/components/Encryption/sharedTexts.ts
Normal file
7
apps/settings/src/components/Encryption/sharedTexts.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
/*!
|
||||
* SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
*/
|
||||
import { t } from '@nextcloud/l10n'
|
||||
|
||||
export const textExistingFilesNotEncrypted = t('settings', 'For performance reasons, when you enable encryption on a Nextcloud server only new and changed files are encrypted.')
|
||||
|
|
@ -7,7 +7,7 @@ import { loadState } from '@nextcloud/initial-state'
|
|||
import Vue from 'vue'
|
||||
|
||||
import AdminTwoFactor from './components/AdminTwoFactor.vue'
|
||||
import Encryption from './components/Encryption.vue'
|
||||
import EncryptionSettings from './components/Encryption/EncryptionSettings.vue'
|
||||
import store from './store/admin-security.js'
|
||||
|
||||
// eslint-disable-next-line camelcase
|
||||
|
|
@ -28,5 +28,5 @@ new View({
|
|||
store,
|
||||
}).$mount('#two-factor-auth-settings')
|
||||
|
||||
const EncryptionView = Vue.extend(Encryption)
|
||||
const EncryptionView = Vue.extend(EncryptionSettings)
|
||||
new EncryptionView().$mount('#vue-admin-encryption')
|
||||
|
|
|
|||
Loading…
Reference in a new issue