feat(n8n Form Node): Add read-only/custom HTML form elements (#12760)

packages/nodes-base/nodes/Form/utils.ts

@@ -24,11 +24,16 @@ import { getResolvables } from '../../utils/utilities';
 import { WebhookAuthorizationError } from '../Webhook/error';
 import { validateWebhookAuthentication } from '../Webhook/utils';
 
-function sanitizeHtml(text: string) {
+export function sanitizeHtml(text: string) {
 	return sanitize(text, {
 		allowedTags: [
 			'b',
+			'div',
 			'i',
+			'iframe',
+			'img',
+			'video',
+			'source',
 			'em',
 			'strong',
 			'a',
@@ -48,8 +53,18 @@ function sanitizeHtml(text: string) {
 		],
 		allowedAttributes: {
 			a: ['href', 'target', 'rel'],
+			img: ['src', 'alt', 'width', 'height'],
+			video: ['*'],
+			iframe: ['*'],
+			source: ['*'],
+		},
+		transformTags: {
+			iframe: sanitize.simpleTransform('iframe', {
+				sandbox: '',
+				referrerpolicy: 'strict-origin-when-cross-origin',
+				allow: 'fullscreen; autoplay; encrypted-media',
+			}),
 		},
-		nonBooleanAttributes: ['*'],
 	});
 }
 
@@ -149,6 +164,9 @@ export function prepareFormData({
 			input.selectOptions = fieldOptions.map((e) => e.option);
 		} else if (fieldType === 'textarea') {
 			input.isTextarea = true;
+		} else if (fieldType === 'html') {
+			input.isHtml = true;
+			input.html = field.html as string;
 		} else {
 			input.isInput = true;
 			input.type = fieldType as 'text' | 'number' | 'date' | 'email';
@@ -409,7 +427,14 @@ export async function formWebhook(
 	}
 
 	const mode = context.getMode() === 'manual' ? 'test' : 'production';
-	const formFields = context.getNodeParameter('formFields.values', []) as FormFieldsParameter;
+	const formFields = (context.getNodeParameter('formFields.values', []) as FormFieldsParameter).map(
+		(field) => {
+			if (field.fieldType === 'html') {
+				field.html = sanitizeHtml(field.html as string);
+			}
+			return field;
+		},
+	);
 	const method = context.getRequestObject().method;
 
 	checkResponseModeConfiguration(context);