Merge pull request #867 from nextcloud/artonge/feat/allow_loading_media_as_blob

feat: Allow loading media as `blob:`

Author: artonge

js/end_to_end_encryption-files.mjs

@@ -18,6 +18,7 @@
 use OCA\EndToEndEncryption\IMetaDataStorage;
 use OCA\EndToEndEncryption\IMetaDataStorageV1;
 use OCA\EndToEndEncryption\KeyStorage;
+use OCA\EndToEndEncryption\Listener\AllowBlobMediaInCSPListener;
 use OCA\EndToEndEncryption\Listener\LoadAdditionalListener;
 use OCA\EndToEndEncryption\Listener\UserDeletedListener;
 use OCA\EndToEndEncryption\MetaDataStorage;
@@ -34,6 +35,7 @@
 use OCP\AppFramework\Bootstrap\IRegistrationContext;
 use OCP\EventDispatcher\IEventDispatcher;
 use OCP\SabrePluginEvent;
+use OCP\Security\CSP\AddContentSecurityPolicyEvent;
 use OCP\User\Events\UserDeletedEvent;
 
 class Application extends App implements IBootstrap {
@@ -62,6 +64,7 @@ public function register(IRegistrationContext $context): void {
 		$context->registerServiceAlias(IMetaDataStorage::class, MetaDataStorage::class);
 		$context->registerEventListener(UserDeletedEvent::class, UserDeletedListener::class);
 		$context->registerEventListener(LoadAdditionalScriptsEvent::class, LoadAdditionalListener::class);
+		$context->registerEventListener(AddContentSecurityPolicyEvent::class, AllowBlobMediaInCSPListener::class);
 		$context->registerPublicShareTemplateProvider(E2EEPublicShareTemplateProvider::class);
 	}
 

js/end_to_end_encryption-files.mjs.map

@@ -0,0 +1,32 @@
+<?php
+
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+declare(strict_types=1);
+
+namespace OCA\EndToEndEncryption\Listener;
+
+use OCP\AppFramework\Http\ContentSecurityPolicy;
+use OCP\EventDispatcher\Event;
+use OCP\EventDispatcher\IEventListener;
+use OCP\Security\CSP\AddContentSecurityPolicyEvent;
+
+/**
+ * @template-implements IEventListener<Event>
+ * We need it to be able to expose decrypted video and audio files in a blob URL.
+ */
+class AllowBlobMediaInCSPListener implements IEventListener {
+
+	public function handle(Event $event): void {
+		if (!($event instanceof AddContentSecurityPolicyEvent)) {
+			return;
+		}
+
+		$csp = new ContentSecurityPolicy();
+		$csp->addAllowedMediaDomain('blob:');
+		$event->addPolicy($csp);
+	}
+}

lib/AppInfo/Application.php

@@ -26,10 +26,10 @@ if (userConfig.e2eeInBrowserEnabled) {
 }
 
 function disableFileAction(actionId: string) {
-	logger.debug('Disabling file action', { actionId })
+	logger.debug(`Inhibiting ${actionId} actions for e2ee files`)
 	const actions = getFileActions()
 
-	const action = actions.find(action => action.id === actionId) as any
+	const action = actions.find(action => action.id === actionId) as unknown as { _action: { enabled: (nodes: Node[], view: View) => boolean } }
 	const originalEnabled = action._action.enabled
 
 	action._action.enabled = (nodes: Node[], view: View) => {

lib/Listener/AllowBlobMediaInCSPListener.php

@@ -1,5 +1,5 @@
 /**
- * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
@@ -13,6 +13,7 @@ import { FileAction, Node, FileType, DefaultType } from '@nextcloud/files'
 import { isDownloadable } from './permissions.ts'
 
 async function downloadNodes([file]: Node[]) {
+	// Decryption happens in the proxy.
 	const response = await fetch(file.encodedSource)
 	const decryptedFileContent = await response.arrayBuffer()
 	const blob = new Blob([decryptedFileContent], { type: file.mime })

src/files.ts

@@ -5,6 +5,7 @@
  */
 
 import { dirname } from 'path'
+import type { WebDAVClient } from 'webdav'
 
 import { getCurrentUser } from '@nextcloud/auth'
 import { getClient, getDefaultPropfind } from '@nextcloud/files/dav'
@@ -17,7 +18,7 @@ import { decryptMetadataInfo, getMetadataPrivateKey } from './metadataUtils.ts'
 import logger from './logger.ts'
 import { validateMetadataSignature, validateUserCertificates } from './security.ts'
 
-const davClient = getClient()
+const davClient = getClient() as WebDAVClient
 
 export const state = {
 	_userPrivateKey: undefined as CryptoKey | undefined,

src/services/downloadUnencryptedAction.ts

@@ -58,7 +58,6 @@ async function handleGet(request: Request): Promise<Response> {
 			throw new Error('Could not find file in metadata')
 		}
 
-		logger.debug('Fetching encrypted file', { request })
 		return await decryptFile(await responsePromise, fileInfo)
 	} catch (error) {
 		return await responsePromise
@@ -144,11 +143,15 @@ export function replacePlaceholdersInPropfind(xml: DAVResult, path: string, decr
 }
 
 export async function decryptFile(response: Response, fileEncryptionInfo: FileEncryptionInfo): Promise<Response> {
+	logger.debug('Decrypting encrypted file', { response, fileEncryptionInfo })
 	const decryptedFileContent = await decryptWithAES(
 		new Uint8Array(await response.arrayBuffer()),
 		await loadAESPrivateKey(base64ToBuffer(fileEncryptionInfo.key)),
 		{ iv: base64ToBuffer(fileEncryptionInfo.nonce) },
 	)
 
-	return new Response(decryptedFileContent, response)
+	const headers = new Headers(response.headers)
+	headers.set('Content-Type', fileEncryptionInfo.mimetype)
+
+	return new Response(decryptedFileContent, { ...response, headers })
 }