Merge pull request #1353 from nextcloud/feat/embedded

Allow embedding forms within other websites

Author: susnux

appinfo/routes.php

@@ -46,6 +46,13 @@
 			'verb' => 'GET'
 		],
 
+		// Embedded View
+		[
+			'name' => 'page#embedded_form_view',
+			'url' => '/embed/{hash}',
+			'verb' => 'GET'
+		],
+
 		// Internal views
 		[
 			'name' => 'page#views',

css/embedded.css

@@ -0,0 +1,25 @@
+/**
+ * @copyright Copyright (c) 2022 Ferdinand Thiessen <[email protected]>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/* Remove background for embedded view */
+body {
+	background-color: var(--color-main-background) !important;
+	background-image: none !important;
+}

docs/Embedding.md

@@ -0,0 +1,90 @@
+# Embedding
+Besides sharing and using the [API](./API.md) for custom forms it is possible to embed forms inside external
+websites.
+
+## Obtaining the embedding code
+
+For embedding a form it is **required** to create a *public share link*.\
+The embedding code can be copied from the *sharing sidebar* or crafted manually by using the public share link:
+
+If the public share link looks like this:\
+`https://SERVER_DOMAIN/apps/forms/s/SHARE_HASH`
+
+The embeddable URL looks like this:\
+`https://SERVER_DOMAIN/apps/forms/embed/SHARE_HASH`
+
+Using the copy-embedding-code button on the *sharing sidebar* will automatically generate ready-to-use HTML code for embedding which looks like this:
+```html
+<iframe src="EMBEDDABLE_URL" width="750" height="900"></iframe>
+```
+The size parameters are based on our default forms styling.
+
+## window message events 
+The embedded view provides a `MessageEvent` to communicate its size with its parent window.
+This is done as accessing the document within an `iframe` is not possible if not on the same domain.
+
+### Auto resizing the `iframe`
+
+The emitted message on the embedded view looks like this:
+```json
+{
+	"type": "resize-iframe",
+	"payload": {
+		"width": 750,
+		"height": 900,
+	},
+}
+```
+
+To receive this information on your parent site:
+```js
+window.addEventListener("message", (event) => {
+	if (event.origin !== "http://your-nextcloud-server.com") {
+		return;
+	}
+
+	if (event.data.type !== "resize-iframe") {
+		return;
+	}
+
+	const { width, height } = event.data.payload;
+
+	iframe.width = width;
+	iframe.height = height;
+}, false);
+```
+
+### Form submitted
+When the form is submitted a message event like this is emitted:
+
+The emitted message on the embedded view looks like this:
+```json
+{
+	"type": "form-saved",
+	"payload": {
+		"id": 1234,
+	},
+}
+```
+
+## Custom styling
+To apply custom styles on the embedded forms the [Custom CSS App](https://apps.nextcloud.com/apps/theming_customcss) can be used.
+
+The embedded form provides the `app-forms-embedded` class, so you can apply your styles.\
+For example if you want the form to be displayed without margins you can use this:
+```css
+#content-vue.app-forms-embedded {
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+    margin: 0;
+}
+```
+
+Or if you want the form to fill the screen:
+```css
+#content-vue.app-forms-embedded .app-content header,
+#content-vue.app-forms-embedded .app-content form {
+	max-width: unset;
+}
+```

lib/AppInfo/Application.php

@@ -31,7 +31,6 @@
 use OCA\Forms\Capabilities;
 use OCA\Forms\FormsMigrator;
 use OCA\Forms\Listener\UserDeletedListener;
-use OCA\Forms\Middleware\PublicCorsMiddleware;
 use OCP\AppFramework\App;
 use OCP\AppFramework\Bootstrap\IBootContext;
 use OCP\AppFramework\Bootstrap\IBootstrap;
@@ -60,7 +59,6 @@ public function register(IRegistrationContext $context): void {
 		$context->registerCapability(Capabilities::class);
 		$context->registerEventListener(UserDeletedEvent::class, UserDeletedListener::class);
 		$context->registerUserMigrator(FormsMigrator::class);
-		$context->registerMiddleware(PublicCorsMiddleware::class);
 	}
 
 	/**

lib/Constants.php

@@ -154,12 +154,15 @@ class Constants {
 	public const PERMISSION_RESULTS = 'results';
 	public const PERMISSION_RESULTS_DELETE = 'results_delete';
 	public const PERMISSION_SUBMIT = 'submit';
+	/** Special internal permissions to allow embedding a form (share) into external websites */
+	public const PERMISSION_EMBED = 'embed';
 
 	public const PERMISSION_ALL = [
 		self::PERMISSION_EDIT,
 		self::PERMISSION_RESULTS,
 		self::PERMISSION_RESULTS_DELETE,
 		self::PERMISSION_SUBMIT,
+		self::PERMISSION_EMBED,
 	];
 
 	/**

lib/Controller/ApiController.php

@@ -1035,8 +1035,8 @@ private function storeAnswersForQuestion($submissionId, array $question, array $
 
 	/**
 	 * @CORS
-	 * @PublicCORSFix
 	 * @NoAdminRequired
+	 * @NoCSRFRequired
 	 * @PublicPage
 	 *
 	 * Process a new submission
@@ -1104,7 +1104,7 @@ public function insertSubmission(int $formId, array $answers, string $shareHash
 		$submission->setFormId($formId);
 		$submission->setTimestamp(time());
 
-		// If not logged in or anonymous use anonID
+		// If not logged in, anonymous, or embedded use anonID
 		if (!$this->currentUser || $form->getIsAnonymous()) {
 			$anonID = "anon-user-".  hash('md5', strval(time() + rand()));
 			$submission->setUserId($anonID);

lib/Controller/PageController.php

@@ -36,6 +36,7 @@
 use OCP\Accounts\IAccountManager;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Db\DoesNotExistException;
+use OCP\AppFramework\Http\ContentSecurityPolicy;
 use OCP\AppFramework\Http\RedirectResponse;
 use OCP\AppFramework\Http\Response;
 use OCP\AppFramework\Http\Template\PublicTemplateResponse;
@@ -152,46 +153,87 @@ public function internalLinkView(string $hash): Response {
 	 * @return TemplateResponse Public template.
 	 */
 	public function publicLinkView(string $hash): Response {
-		// Inject style on all templates
-		Util::addStyle($this->appName, 'forms');
+		try {
+			$share = $this->shareMapper->findPublicShareByHash($hash);
+			$form = $this->formMapper->findById($share->getFormId());
+		} catch (DoesNotExistException $e) {
+			return $this->provideEmptyContent(Constants::EMPTY_NOTFOUND);
+		}
 
+		return $this->createPublicSubmitView($form, $hash);
+	}
+
+	/**
+	 * @NoAdminRequired
+	 * @PublicPage
+	 * @NoCSRFRequired
+	 *
+	 * @param string $hash
+	 * @return Response
+	 */
+	public function embeddedFormView(string $hash): Response {
 		try {
 			$share = $this->shareMapper->findPublicShareByHash($hash);
+			// Check if the form is allwed to be embedded
+			if (!in_array(Constants::PERMISSION_EMBED, $share->getPermissions())) {
+				throw new DoesNotExistException('Shared form not allowed to be embedded');
+			}
+
 			$form = $this->formMapper->findById($share->getFormId());
 		} catch (DoesNotExistException $e) {
 			return $this->provideEmptyContent(Constants::EMPTY_NOTFOUND);
+			// We do not handle the MultipleObjectsReturnedException as this will automatically result in a 500 error as expected
 		}
 
+		Util::addStyle($this->appName, 'embedded');
+		$response = $this->createPublicSubmitView($form, $hash)
+			->renderAs(TemplateResponse::RENDER_AS_BASE);
+		
+		$this->initialState->provideInitialState('isEmbedded', true);
+		
+		return $this->setEmbeddedCSP($response);
+	}
+
+	/**
+	 * Create a TemplateResponse for a given public form
+	 * This sets all needed headers, initial state, loads scripts and styles
+	 */
+	protected function createPublicSubmitView(Form $form, string $hash): TemplateResponse {
 		// Has form expired
 		if ($this->formsService->hasFormExpired($form)) {
 			return $this->provideEmptyContent(Constants::EMPTY_EXPIRED, $form);
 		}
 
+		$this->insertHeaderOnIos();
+
+		// Inject style on all templates
+		Util::addStyle($this->appName, 'forms');
 		// Main Template to fill the form
 		Util::addScript($this->appName, 'forms-submit');
-		$this->insertHeaderOnIos();
+
 		$this->initialState->provideInitialState('form', $this->formsService->getPublicForm($form));
 		$this->initialState->provideInitialState('isLoggedIn', $this->userSession->isLoggedIn());
 		$this->initialState->provideInitialState('shareHash', $hash);
 		$this->initialState->provideInitialState('maxStringLengths', Constants::MAX_STRING_LENGTHS);
 		return $this->provideTemplate(self::TEMPLATE_MAIN, $form, ['id-app-navigation' => null]);
 	}
 
-	public function provideEmptyContent(string $renderAs, ?Form $form = null): TemplateResponse {
+	/**
+	 * Provide empty content message response for a form
+	 */
+	protected function provideEmptyContent(string $renderAs, ?Form $form = null): TemplateResponse {
 		Util::addScript($this->appName, 'forms-emptyContent');
 		$this->initialState->provideInitialState('renderAs', $renderAs);
 		return $this->provideTemplate(self::TEMPLATE_MAIN, $form);
 	}
 
 	/**
-	 * @NoAdminRequired
-	 * @NoCSRFRequired
-	 * @PublicPage
+	 * Helper function to create a template response from a form
 	 * @param string $template
 	 * @param Form $form Necessary to set header on public forms, not necessary for 'notfound'-template
 	 * @return TemplateResponse
 	 */
-	public function provideTemplate(string $template, ?Form $form = null, array $options = []): TemplateResponse {
+	protected function provideTemplate(string $template, ?Form $form = null, array $options = []): TemplateResponse {
 		Util::addStyle($this->appName, 'forms-style');
 		// If not logged in, use PublicTemplate
 		if (!$this->userSession->isLoggedIn()) {
@@ -217,7 +259,6 @@ public function provideTemplate(string $template, ?Form $form = null, array $opt
 					}
 				}
 			}
-
 			return $response;
 		}
 
@@ -230,7 +271,7 @@ public function provideTemplate(string $template, ?Form $form = null, array $opt
 	/**
 	 * Insert the extended viewport Header on iPhones to prevent automatic zooming.
 	 */
-	public function insertHeaderOnIos(): void {
+	protected function insertHeaderOnIos(): void {
 		$USER_AGENT_IPHONE_SAFARI = '/^Mozilla\/5\.0 \(iPhone[^)]+\) AppleWebKit\/[0-9.]+ \(KHTML, like Gecko\) Version\/[0-9.]+ Mobile\/[0-9.A-Z]+ Safari\/[0-9.A-Z]+$/';
 		if (preg_match($USER_AGENT_IPHONE_SAFARI, $this->request->getHeader('User-Agent'))) {
 			Util::addHeader('meta', [
@@ -239,4 +280,17 @@ public function insertHeaderOnIos(): void {
 			]);
 		}
 	}
+
+	/**
+	 * Set CSP options to allow the page be embedded using <iframe>
+	 */
+	protected function setEmbeddedCSP(TemplateResponse $response) {
+		$policy = new ContentSecurityPolicy();
+		$policy->addAllowedFrameAncestorDomain('*');
+
+		$response->addHeader('X-Frame-Options', 'ALLOW');
+		$response->setContentSecurityPolicy($policy);
+
+		return $response;
+	}
 }

lib/Controller/ShareApiController.php

@@ -325,6 +325,12 @@ protected function validatePermissions(array $permissions, int $shareType): bool
 				case IShare::TYPE_GROUP:
 				case IShare::TYPE_CIRCLE:
 					break;
+				case IShare::TYPE_LINK:
+					// For link shares we only allow the embedding permission
+					if (count($sanitizedPermissions) > 2 || !in_array(Constants::PERMISSION_EMBED, $sanitizedPermissions)) {
+						return false;
+					}
+					break;
 				default:
 					// e.g. link shares ...
 					return false;