Form success message with html elements rendered as plain text

[azrikahar]

Overview

After submitting the form for newsletter, the message shown is wrapped by literal <p> tags:

Investigation

It seems like it is technically correct that success_message is wrapped with <p> tags as seen in the template:

https://github.com/directus-community/directus-template-cli/blob/66f15fe2e710663d3d51a8a9d5e71f33ad1682a8/templates/agencyos/src/content/forms.json#L89

Particularly since success_message is a WYSIWYG input.

However due to how the relevant code in Agency OS renders the success message:

https://github.com/directus-community/agency-os/blob/3a1ef98ac5eabff2d6379acc050f6c5a1ce3121e/components/base/UForm.vue#L63-L65

the <p> tag will be rendered as plain text.

Maybe doing something like this would work via v-html:

			<VAlert v-if="form.on_success === 'message' && success" type="success">
				<div v-html="form.success_message ?? 'Success! Your form has been submitted.'"></div>
			</VAlert>

but this in turn means we may require something such as https://github.com/licitdev/directus-extension-sanitize-html to make sure success_message is sanitized properly for security purposes.

[jbool24]

It may not be a popular idea but this v-html directive should already be sanitized as part of Nuxt itself. I know they probably left that open to developer choice but it might be safer to default to some sanitization library but also it to be extended using a modifier or something. Example v-html has default html sanitizer and then v-html:{{custom-token}} or something could allow over-ride with a registered sanitizer plugin or something.

[ComfortablyCoding]

As far as I understand nuxt does not sanitize v-html, at least I was not able to find any documentation regarding this.

The vue ecosystem already has some packages that resolve this (for example this small dompurify wrapper directive https://www.npmjs.com/package/vue-dompurify-html) which we can utilize and should resolve the issue client side.