diff --git a/.storybook/preview.js b/.storybook/preview.js
index 546954d93..9906c7c7c 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -22,6 +22,9 @@ import Tab from '@/components/Tabs/Tab.vue';
 import Tabs from '@/components/Tabs/Tabs.vue';
 import FloatingVue from 'floating-vue';
 
+// Directives
+import {allowedHtmlDirective} from '@/directive/allowedHtml.js';
+
 import PkpDialog from '@/components/Modal/Dialog.vue';
 
 import VueScrollTo from 'vue-scrollto';
@@ -51,6 +54,10 @@ initialize({
 
 setup((app) => {
 	app.use(pinia);
+
+	// directives
+	app.directive('pkp-allowed-html', allowedHtmlDirective);
+
 	app.mixin(GlobalMixins);
 
 	app.use(FloatingVue, {
diff --git a/package-lock.json b/package-lock.json
index 3054a4bfe..32aa09a24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "chart.js": "^4.3.3",
         "clone-deep": "^4.0.1",
         "debounce": "^1.2.0",
+        "dompurify": "^3.0.8",
         "dropzone-vue3": "^1.0.2",
         "element-resize-event": "^3.0.6",
         "floating-vue": "^2.0.0-beta.24",
@@ -8428,6 +8429,11 @@
       "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
       "dev": true
     },
+    "node_modules/dompurify": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.8.tgz",
+      "integrity": "sha512-b7uwreMYL2eZhrSCRC4ahLTeZcPZxSmYfmcQGXGkXiZSNW1X85v+SDM5KsWcpivIiUBH47Ji7NtyUdpLeF5JZQ=="
+    },
     "node_modules/dotenv": {
       "version": "16.4.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.1.tgz",
diff --git a/package.json b/package.json
index 85dad536f..8fb75b46a 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "chart.js": "^4.3.3",
     "clone-deep": "^4.0.1",
     "debounce": "^1.2.0",
+    "dompurify": "^3.0.8",
     "dropzone-vue3": "^1.0.2",
     "element-resize-event": "^3.0.6",
     "floating-vue": "^2.0.0-beta.24",
diff --git a/public/globals.js b/public/globals.js
index 8e46982f9..3cd33d973 100644
--- a/public/globals.js
+++ b/public/globals.js
@@ -3,6 +3,11 @@
  * are not part of the UI Library's responsibilities
  */
 window.pkp = {
+	serverContext: {
+		configAllowedHtml:
+			'a[href|target|title],em,strong,cite,code,ul,ol,li[class],dl,dt,dd,b,i,u,img[src|alt],sup,sub,br,p',
+		apiBaseUrl: 'https://mock/index.php/publicknowledge/api/v1/',
+	},
 	/**
 	 * Event bus. This will be a Vue instance but must be registered in main.js
 	 * where Vue can be imported
diff --git a/src/components/Container/SubmissionWizardPage.stories.js b/src/components/Container/SubmissionWizardPage.stories.js
index ecad4d142..c8eff906a 100644
--- a/src/components/Container/SubmissionWizardPage.stories.js
+++ b/src/components/Container/SubmissionWizardPage.stories.js
@@ -86,7 +86,7 @@ const SubmissionWizardPageWithDataAndTemplate = {
 						<panel-section v-for="section in step.sections" :key="section.id">
 							<template #header>
 								<h2>{{ section.name }}</h2>
-								<div v-html="section.description" />
+								<div v-pkp-allowed-html="section.description" />
 							</template>
 							<pkp-form
 								v-if="section.type === 'form'"
@@ -243,7 +243,7 @@ const SubmissionWizardPageWithDataAndTemplate = {
 												</h4>
 												<div
 													class="submissionWizard__reviewPanel__item__value"
-													v-html="localize(publication.title)"
+													v-pkp-allowed-html="localize(publication.title)"
 												/>
 											</div>
 											<div class="submissionWizard__reviewPanel__item">
@@ -262,7 +262,7 @@ const SubmissionWizardPageWithDataAndTemplate = {
 												</h4>
 												<div
 													class="submissionWizard__reviewPanel__item__value"
-													v-html="localize(publication.abstract)"
+													v-pkp-allowed-html="localize(publication.abstract)"
 												/>
 											</div>
 											<div
diff --git a/src/components/DateRange/DateRange.vue b/src/components/DateRange/DateRange.vue
index 1fc0e6a38..5a47c8fcb 100644
--- a/src/components/DateRange/DateRange.vue
+++ b/src/components/DateRange/DateRange.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="pkpDateRange">
 		<span class="-screenReader">{{ dateRangeLabel }}</span>
-		<span class="pkpDateRange__current" v-html="currentRange" />
+		<span v-pkp-allowed-html="currentRange" class="pkpDateRange__current" />
 		<button
 			ref="toggleButton"
 			class="pkpDateRange__button"
@@ -63,7 +63,7 @@
 				<pkp-button @click="applyCustomRange">{{ applyLabel }}</pkp-button>
 				<div v-if="errorMessage" class="pkpDateRange__error">
 					<icon icon="exclamation-triangle" :inline="true" />
-					<span v-html="errorMessage" />
+					<span v-pkp-allowed-html="errorMessage" />
 				</div>
 			</form>
 		</div>
diff --git a/src/components/FileAttacher/FileAttacher.vue b/src/components/FileAttacher/FileAttacher.vue
index d085b0ab0..aa98e67a5 100644
--- a/src/components/FileAttacher/FileAttacher.vue
+++ b/src/components/FileAttacher/FileAttacher.vue
@@ -6,7 +6,7 @@
 			:key="key"
 		>
 			<h2>{{ attacher.label }}</h2>
-			<p v-html="attacher.description" />
+			<p v-pkp-allowed-html="attacher.description" />
 			<template #actions>
 				<pkp-button
 					:aria-describedby="'attacher' + key"
diff --git a/src/components/Form/FieldError.vue b/src/components/Form/FieldError.vue
index 9ee6998a8..6a417a443 100644
--- a/src/components/Form/FieldError.vue
+++ b/src/components/Form/FieldError.vue
@@ -6,7 +6,7 @@
 			class="pkpFieldError__message"
 		>
 			<icon icon="exclamation-triangle" :inline="true" />
-			<span v-html="message" />
+			<span v-pkp-allowed-html="message" />
 		</div>
 	</div>
 </template>
diff --git a/src/components/Form/FormGroup.vue b/src/components/Form/FormGroup.vue
index 5528f30e8..8e8f50f45 100644
--- a/src/components/Form/FormGroup.vue
+++ b/src/components/Form/FormGroup.vue
@@ -4,8 +4,8 @@
 			<legend class="pkpFormGroup__legend">{{ label }}</legend>
 			<div
 				v-if="description"
+				v-pkp-allowed-html="description"
 				class="pkpFormGroup__description"
-				v-html="description"
 			></div>
 		</div>
 		<div class="pkpFormGroup__fields">
diff --git a/src/components/Form/fields/FieldArchivingPn.vue b/src/components/Form/fields/FieldArchivingPn.vue
index 8066b9e0b..4662db2fe 100644
--- a/src/components/Form/fields/FieldArchivingPn.vue
+++ b/src/components/Form/fields/FieldArchivingPn.vue
@@ -19,8 +19,8 @@
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
+				v-pkp-allowed-html="tooltip"
 				class="-screenReader"
-				v-html="tooltip"
 			/>
 			<help-button
 				v-if="helpTopic"
@@ -33,13 +33,13 @@
 		<div
 			v-if="description"
 			:id="describedByDescriptionId"
+			v-pkp-allowed-html="description"
 			class="pkpFormField__description pkpFormField--options__description"
-			v-html="description"
 		/>
 		<div
 			v-if="terms && value"
+			v-pkp-allowed-html="terms"
 			class="pkpFormField__description pkpFormField--options__description pkpFormField--archivingPn__terms"
-			v-html="terms"
 		/>
 		<field-error
 			v-if="errors && errors.length"
diff --git a/src/components/Form/fields/FieldBaseAutosuggest.vue b/src/components/Form/fields/FieldBaseAutosuggest.vue
index 2d21d0d8f..eac14aa0e 100644
--- a/src/components/Form/fields/FieldBaseAutosuggest.vue
+++ b/src/components/Form/fields/FieldBaseAutosuggest.vue
@@ -19,8 +19,8 @@
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
+				v-pkp-allowed-html="tooltip"
 				class="-screenReader"
-				v-html="tooltip"
 			/>
 			<help-button
 				v-if="helpTopic"
@@ -33,8 +33,8 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
+			v-pkp-allowed-html="description"
 			class="pkpFormField__description"
-			v-html="description"
 		/>
 		<div class="pkpFormField__control pkpAutosuggest__control">
 			<div
@@ -67,8 +67,8 @@
 					<span
 						v-if="tooltip"
 						:id="describedByTooltipId"
+						v-pkp-allowed-html="tooltip"
 						class="-screenReader"
-						v-html="tooltip"
 					/>
 					<help-button
 						v-if="helpTopic"
diff --git a/src/components/Form/fields/FieldColor.vue b/src/components/Form/fields/FieldColor.vue
index 7ec0b83f3..d1d695f23 100644
--- a/src/components/Form/fields/FieldColor.vue
+++ b/src/components/Form/fields/FieldColor.vue
@@ -21,8 +21,8 @@
 			<span
 				v-if="isPrimaryLocale && tooltip"
 				:id="describedByTooltipId"
+				v-pkp-allowed-html="tooltip"
 				class="-screenReader"
-				v-html="tooltip"
 			/>
 			<help-button
 				v-if="isPrimaryLocale && helpTopic"
@@ -35,8 +35,8 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
+			v-pkp-allowed-html="description"
 			class="pkpFormField__description"
-			v-html="description"
 		/>
 		<div class="pkpFormField__control">
 			<color-picker
diff --git a/src/components/Form/fields/FieldHtml.vue b/src/components/Form/fields/FieldHtml.vue
index ca07cd7b8..405580efc 100644
--- a/src/components/Form/fields/FieldHtml.vue
+++ b/src/components/Form/fields/FieldHtml.vue
@@ -5,7 +5,7 @@
 				{{ label }}
 			</span>
 			<tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
-			<span v-if="tooltip" class="-screenReader" v-html="tooltip" />
+			<span v-if="tooltip" v-pkp-allowed-html="tooltip" class="-screenReader" />
 			<help-button
 				v-if="helpTopic"
 				:topic="helpTopic"
@@ -14,8 +14,8 @@
 			/>
 		</div>
 		<div
+			v-pkp-allowed-html="description"
 			class="pkpFormField__control pkpFormField__control--html"
-			v-html="description"
 		/>
 	</div>
 </template>
diff --git a/src/components/Form/fields/FieldMetadataSetting.vue b/src/components/Form/fields/FieldMetadataSetting.vue
index d8e76c4cd..ede2e8d06 100644
--- a/src/components/Form/fields/FieldMetadataSetting.vue
+++ b/src/components/Form/fields/FieldMetadataSetting.vue
@@ -6,8 +6,8 @@
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
+				v-pkp-allowed-html="tooltip"
 				class="-screenReader"
-				v-html="tooltip"
 			/>
 			<help-button
 				v-if="helpTopic"
@@ -20,8 +20,8 @@
 		<div
 			v-if="description"
 			:id="describedByDescriptionId"
+			v-pkp-allowed-html="description"
 			class="pkpFormField__description pkpFormField--options__description"
-			v-html="description"
 		/>
 		<field-error
 			v-if="errors && errors.length"
@@ -44,8 +44,8 @@
 					:disabled="option.disabled"
 				/>
 				<span
+					v-pkp-allowed-html="option.label"
 					class="pkpFormField--options__optionLabel"
-					v-html="option.label"
 				/>
 			</label>
 			<div v-if="isEnabled" class="pkpFormField--metadata__submissionOptions">
@@ -63,8 +63,8 @@
 						:disabled="option.disabled"
 					/>
 					<span
+						v-pkp-allowed-html="option.label"
 						class="pkpFormField--options__optionLabel"
-						v-html="option.label"
 					/>
 				</label>
 			</div>
diff --git a/src/components/Form/fields/FieldOptions.vue b/src/components/Form/fields/FieldOptions.vue
index d60a3cb7e..8c991492f 100644
--- a/src/components/Form/fields/FieldOptions.vue
+++ b/src/components/Form/fields/FieldOptions.vue
@@ -21,8 +21,8 @@
 			<span
 				v-if="isPrimaryLocale && tooltip"
 				:id="describedByTooltipId"
+				v-pkp-allowed-html="tooltip"
 				class="-screenReader"
-				v-html="tooltip"
 			/>
 			<help-button
 				v-if="isPrimaryLocale && helpTopic"
@@ -35,8 +35,8 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
+			v-pkp-allowed-html="description"
 			class="pkpFormField__description pkpFormField--options__description"
-			v-html="description"
 		/>
 		<div class="pkpFormField__control">
 			<VueDraggable
@@ -79,8 +79,8 @@
 						:disabled="option.disabled"
 					/>
 					<span
+						v-pkp-allowed-html="option.label"
 						class="pkpFormField--options__optionLabel"
-						v-html="option.label"
 					/>
 					<orderer
 						v-if="isOrderable"
diff --git a/src/components/Form/fields/FieldPubId.vue b/src/components/Form/fields/FieldPubId.vue
index 1edf68de6..d66f1700a 100644
--- a/src/components/Form/fields/FieldPubId.vue
+++ b/src/components/Form/fields/FieldPubId.vue
@@ -11,8 +11,8 @@
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
+				v-pkp-allowed-html="tooltip"
 				class="-screenReader"
-				v-html="tooltip"
 			/>
 			<help-button
 				v-if="helpTopic"
@@ -25,8 +25,8 @@
 		<div
 			v-if="description"
 			:id="describedByDescriptionId"
+			v-pkp-allowed-html="description"
 			class="pkpFormField__description"
-			v-html="description"
 		/>
 		<div class="pkpFormField__control">
 			<input
diff --git a/src/components/Form/fields/FieldRadioInput.vue b/src/components/Form/fields/FieldRadioInput.vue
index 20ed95fb2..113af03dd 100644
--- a/src/components/Form/fields/FieldRadioInput.vue
+++ b/src/components/Form/fields/FieldRadioInput.vue
@@ -21,8 +21,8 @@
 			<span
 				v-if="isPrimaryLocale && tooltip"
 				:id="describedByTooltipId"
+				v-pkp-allowed-html="tooltip"
 				class="-screenReader"
-				v-html="tooltip"
 			/>
 			<help-button
 				v-if="isPrimaryLocale && helpTopic"
@@ -35,8 +35,8 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
+			v-pkp-allowed-html="description"
 			class="pkpFormField__description pkpFormField--options__description"
-			v-html="description"
 		/>
 		<field-error
 			v-if="errors && errors.length"
diff --git a/src/components/Form/fields/FieldRichTextarea.vue b/src/components/Form/fields/FieldRichTextarea.vue
index ff0c21ccc..c0e67cd68 100644
--- a/src/components/Form/fields/FieldRichTextarea.vue
+++ b/src/components/Form/fields/FieldRichTextarea.vue
@@ -21,8 +21,8 @@
 			<span
 				v-if="isPrimaryLocale && tooltip"
 				:id="describedByTooltipId"
+				v-pkp-allowed-html="tooltip"
 				class="-screenReader"
-				v-html="tooltip"
 			/>
 			<help-button
 				v-if="isPrimaryLocale && helpTopic"
@@ -35,8 +35,8 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
+			v-pkp-allowed-html="description"
 			class="pkpFormField__description"
-			v-html="description"
 		/>
 		<div
 			class="pkpFormField__control pkpFormField--richTextarea__control"
diff --git a/src/components/Form/fields/FieldSelect.vue b/src/components/Form/fields/FieldSelect.vue
index 2ee3c650f..6a443e42e 100644
--- a/src/components/Form/fields/FieldSelect.vue
+++ b/src/components/Form/fields/FieldSelect.vue
@@ -13,8 +13,8 @@
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
+				v-pkp-allowed-html="tooltip"
 				class="-screenReader"
-				v-html="tooltip"
 			/>
 			<help-button
 				v-if="helpTopic"
@@ -27,8 +27,8 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
+			v-pkp-allowed-html="description"
 			class="pkpFormField__description"
-			v-html="description"
 		/>
 		<div
 			class="pkpFormField__control"
diff --git a/src/components/Form/fields/FieldSelectIssue.vue b/src/components/Form/fields/FieldSelectIssue.vue
index fcf126f68..864c78389 100644
--- a/src/components/Form/fields/FieldSelectIssue.vue
+++ b/src/components/Form/fields/FieldSelectIssue.vue
@@ -11,8 +11,8 @@
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
+				v-pkp-allowed-html="tooltip"
 				class="-screenReader"
-				v-html="tooltip"
 			/>
 			<help-button
 				v-if="helpTopic"
@@ -25,12 +25,12 @@
 		<div
 			v-if="description"
 			:id="describedByDescriptionId"
+			v-pkp-allowed-html="description"
 			class="pkpFormField__description"
-			v-html="description"
 		/>
 		<div class="pkpFormField__control">
 			<span class="pkpFormField__description">
-				<span v-html="notice" />
+				<span v-pkp-allowed-html="notice" />
 				<pkp-button
 					v-if="button"
 					v-bind="button"
diff --git a/src/components/Form/fields/FieldText.vue b/src/components/Form/fields/FieldText.vue
index 4d6575258..d02d0423f 100644
--- a/src/components/Form/fields/FieldText.vue
+++ b/src/components/Form/fields/FieldText.vue
@@ -18,8 +18,8 @@
 			<span
 				v-if="isPrimaryLocale && tooltip"
 				:id="describedByTooltipId"
+				v-pkp-allowed-html="tooltip"
 				class="-screenReader"
-				v-html="tooltip"
 			/>
 			<help-button
 				v-if="isPrimaryLocale && helpTopic"
@@ -32,8 +32,8 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
+			v-pkp-allowed-html="description"
 			class="pkpFormField__description"
-			v-html="description"
 		/>
 		<div class="pkpFormField__control" :class="controlClasses">
 			<div class="pkpFormField__control_top">
@@ -53,10 +53,10 @@
 				<span
 					v-if="prefix"
 					ref="prefix"
+					v-pkp-allowed-html="prefix"
 					class="pkpFormField__inputPrefix"
 					:style="prefixStyles"
 					@click="setFocus"
-					v-html="prefix"
 				/>
 				<multilingual-progress
 					v-if="isMultilingual && locales.length > 1"
diff --git a/src/components/Form/fields/FieldTextarea.vue b/src/components/Form/fields/FieldTextarea.vue
index f92448202..621542207 100644
--- a/src/components/Form/fields/FieldTextarea.vue
+++ b/src/components/Form/fields/FieldTextarea.vue
@@ -18,8 +18,8 @@
 			<span
 				v-if="isPrimaryLocale && tooltip"
 				:id="describedByTooltipId"
+				v-pkp-allowed-html="tooltip"
 				class="-screenReader"
-				v-html="tooltip"
 			/>
 			<help-button
 				v-if="isPrimaryLocale && helpTopic"
@@ -32,8 +32,8 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
+			v-pkp-allowed-html="description"
 			class="pkpFormField__description"
-			v-html="description"
 		/>
 		<div class="pkpFormField__control">
 			<textarea
diff --git a/src/components/Form/fields/FieldUpload.vue b/src/components/Form/fields/FieldUpload.vue
index 4c6acd250..85a63280e 100644
--- a/src/components/Form/fields/FieldUpload.vue
+++ b/src/components/Form/fields/FieldUpload.vue
@@ -13,8 +13,8 @@
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
+				v-pkp-allowed-html="tooltip"
 				class="-screenReader"
-				v-html="tooltip"
 			/>
 			<help-button
 				v-if="helpTopic"
@@ -27,8 +27,8 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
+			v-pkp-allowed-html="description"
 			class="pkpFormField__description"
-			v-html="description"
 		/>
 		<div
 			:id="controlId"
diff --git a/src/components/Form/fields/FieldUploadImage.vue b/src/components/Form/fields/FieldUploadImage.vue
index 483a70762..7858d8afb 100644
--- a/src/components/Form/fields/FieldUploadImage.vue
+++ b/src/components/Form/fields/FieldUploadImage.vue
@@ -13,8 +13,8 @@
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
+				v-pkp-allowed-html="tooltip"
 				class="-screenReader"
-				v-html="tooltip"
 			/>
 			<help-button
 				v-if="helpTopic"
@@ -27,8 +27,8 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
+			v-pkp-allowed-html="description"
 			class="pkpFormField__description"
-			v-html="description"
 		/>
 		<div
 			:id="controlId"
@@ -56,8 +56,8 @@
 					/>
 					<div
 						:id="altTextDescriptionId"
+						v-pkp-allowed-html="altTextDescription"
 						class="pkpFormField--uploadImage__altTextDescription"
-						v-html="altTextDescription"
 					/>
 				</div>
 				<div class="pkpFormField--upload__previewActions">
diff --git a/src/components/ListPanel/submissions/SubmissionsListItem.vue b/src/components/ListPanel/submissions/SubmissionsListItem.vue
index d821004d8..e15dfd233 100644
--- a/src/components/ListPanel/submissions/SubmissionsListItem.vue
+++ b/src/components/ListPanel/submissions/SubmissionsListItem.vue
@@ -14,13 +14,13 @@
 					</span>
 				</div>
 				<div
-					class="listPanel__itemSubtitle"
-					v-html="
+					v-pkp-allowed-html="
 						localizeSubmission(
 							currentPublication.fullTitle,
 							currentPublication.locale,
 						)
 					"
+					class="listPanel__itemSubtitle"
 				></div>
 
 				<!-- Review assignment information -->
@@ -55,7 +55,7 @@
 					v-if="reviewerWorkflowLink"
 					class="listPanel__item--submission__notice"
 				>
-					<span v-html="reviewerWorkflowLink" />
+					<span v-pkp-allowed-html="reviewerWorkflowLink" />
 				</div>
 				<div v-else-if="notice" class="listPanel__item--submission__notice">
 					<icon icon="exclamation-triangle" :inline="true" />
@@ -186,7 +186,7 @@
 					{{ t('submission.list.discussions') }}
 				</list-item>
 				<list-item v-if="dualWorkflowLinks">
-					<span v-html="dualWorkflowLinks" />
+					<span v-pkp-allowed-html="dualWorkflowLinks" />
 				</list-item>
 				<list-item>
 					<span>
diff --git a/src/components/ListPanel/users/SelectReviewerListItem.vue b/src/components/ListPanel/users/SelectReviewerListItem.vue
index fa749ce5c..2433834d0 100644
--- a/src/components/ListPanel/users/SelectReviewerListItem.vue
+++ b/src/components/ListPanel/users/SelectReviewerListItem.vue
@@ -191,13 +191,13 @@
 					<div class="listPanel__item--reviewer__detailHeading">
 						{{ gossipLabel }}
 					</div>
-					<div v-html="item.gossip"></div>
+					<div v-pkp-allowed-html="item.gossip"></div>
 				</list-item>
 				<list-item v-if="localize(item.biography)">
 					<div class="listPanel__item--reviewer__detailHeading">
 						{{ biographyLabel }}
 					</div>
-					<div v-html="localize(item.biography)"></div>
+					<div v-pkp-allowed-html="localize(item.biography)"></div>
 				</list-item>
 			</list>
 		</div>
diff --git a/src/components/Modal/Dialog.vue b/src/components/Modal/Dialog.vue
index a3918618b..e2aeb3bc2 100644
--- a/src/components/Modal/Dialog.vue
+++ b/src/components/Modal/Dialog.vue
@@ -48,7 +48,7 @@
 								</button>
 							</div>
 							<div class="modal-content p-4">
-								<div v-html="dialogProps.message" />
+								<div v-pkp-allowed-html="dialogProps.message" />
 							</div>
 							<div class="flex items-center justify-end p-4">
 								<spinner v-if="isLoading" />
diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
index 7ebd9d807..0ee602e2a 100644
--- a/src/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -11,8 +11,8 @@
 			</div>
 			<div
 				v-if="description"
+				v-pkp-allowed-html="description"
 				class="pkpTable__description"
-				v-html="description"
 			/>
 		</caption>
 		<thead>
diff --git a/src/components/Table/TableCell.vue b/src/components/Table/TableCell.vue
index 4beeaf158..2db594586 100644
--- a/src/components/Table/TableCell.vue
+++ b/src/components/Table/TableCell.vue
@@ -9,7 +9,7 @@
 			<slot :column="column" :row="row" />
 		</template>
 		<template v-else>
-			<span v-html="value" />
+			<span v-pkp-allowed-html="value" />
 		</template>
 	</component>
 </template>
diff --git a/src/composables/useApiUrl.js b/src/composables/useApiUrl.js
index 8f1ce1033..ac08833e5 100644
--- a/src/composables/useApiUrl.js
+++ b/src/composables/useApiUrl.js
@@ -6,14 +6,14 @@ import {ref, computed} from 'vue';
  */
 
 export function useApiUrl(_path) {
-	if (typeof pkp === 'undefined' || !pkp?.context?.apiBaseUrl) {
-		throw new Error('pkp.context.apiBaseUrl is not configured');
+	if (typeof pkp === 'undefined' || !pkp?.serverContext?.apiBaseUrl) {
+		throw new Error('pkp.serverContext.apiBaseUrl is not configured');
 	}
 
 	// normalise to be ref even if its not passed as ref
 	const path = ref(_path);
 
-	const apiUrl = computed(() => `${pkp.context.apiBaseUrl}${path.value}`);
+	const apiUrl = computed(() => `${pkp.serverContext.apiBaseUrl}${path.value}`);
 
 	return {apiUrl};
 }
diff --git a/src/directive/allowedHtml.js b/src/directive/allowedHtml.js
new file mode 100644
index 000000000..8e3e6f37e
--- /dev/null
+++ b/src/directive/allowedHtml.js
@@ -0,0 +1,57 @@
+import DOMPurify from 'dompurify';
+
+if (typeof pkp === 'undefined' || !pkp?.serverContext?.configAllowedHtml) {
+	throw new Error('pkp.serverContext.configAllowedHtml is not configured');
+}
+
+const allowed_html = pkp.serverContext.configAllowedHtml;
+
+// additional tags and attrs used in po files
+const allowedTagsPO = ['button'];
+const allowedAttrsPO = [];
+
+let ALLOWED_TAGS = [];
+let ALLOWED_ATTR = [];
+
+allowed_html.split(',').forEach((tagWithAttribute) => {
+	const parts = tagWithAttribute.split('[');
+	const tag = parts[0];
+	ALLOWED_TAGS.push(tag);
+
+	if (parts.length > 1) {
+		const attributes = parts[1].substring(0, parts[1].length - 1).split('|');
+		attributes.forEach((attribute) => ALLOWED_ATTR.push(attribute));
+	}
+});
+
+ALLOWED_TAGS = [...ALLOWED_TAGS, ...allowedTagsPO];
+ALLOWED_ATTR = [...ALLOWED_ATTR, ...allowedAttrsPO];
+
+// DOMPurify does not support defining tags along with attributes, its separate lists
+// https://github.com/cure53/DOMPurify/issues/272
+const sanitizeConfig = {
+	ALLOWED_TAGS,
+	ALLOWED_ATTR,
+};
+
+export const allowedHtmlDirective = {
+	beforeMount(el, binding) {
+		// Sanitize the content before inserting it into the element
+		const cleanContent = DOMPurify.sanitize(
+			String(binding.value),
+			sanitizeConfig,
+		);
+
+		el.innerHTML = cleanContent;
+	},
+	updated(el, binding) {
+		// Re-sanitize the content if the bound value changes
+		if (binding.value !== binding.oldValue) {
+			const cleanContent = DOMPurify.sanitize(
+				String(binding.value),
+				sanitizeConfig,
+			);
+			el.innerHTML = cleanContent;
+		}
+	},
+};
diff --git a/src/docs/Component.vue b/src/docs/Component.vue
index d012a53da..eda4f80c6 100644
--- a/src/docs/Component.vue
+++ b/src/docs/Component.vue
@@ -91,9 +91,9 @@
 						</div>
 						<pre
 							class="component__example__template"
-						><div class="language-html" v-html="currentExample.template" /></pre>
+						><div v-pkp-allowed-html="currentExample.template" class="language-html" /></pre>
 						<section v-if="readme" class="component__example__readme bodyText">
-							<div v-html="readme" />
+							<div v-pkp-allowed-html="readme" />
 						</section>
 					</template>
 					<div v-else class="component__example__none">
diff --git a/src/docs/Page.vue b/src/docs/Page.vue
index 89ede7ac0..5816a076c 100644
--- a/src/docs/Page.vue
+++ b/src/docs/Page.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="page bodyText" v-html="output" />
+	<div v-pkp-allowed-html="output" class="page bodyText" />
 </template>
 
 <script>
diff --git a/src/docs/components/Modal/previews/PreviewModalSide.vue b/src/docs/components/Modal/previews/PreviewModalSide.vue
index 94f913292..1f0fef049 100644
--- a/src/docs/components/Modal/previews/PreviewModalSide.vue
+++ b/src/docs/components/Modal/previews/PreviewModalSide.vue
@@ -17,7 +17,7 @@
 			</template>
 			<panel>
 				<panel-section>
-					<div v-html="pars[0]"></div>
+					<div v-pkp-allowed-html="pars[0]"></div>
 				</panel-section>
 			</panel>
 		</modal>
@@ -33,7 +33,7 @@
 			</template>
 			<panel>
 				<panel-section v-for="(par, i) in pars" :key="i">
-					<div v-html="par"></div>
+					<div v-pkp-allowed-html="par"></div>
 				</panel-section>
 			</panel>
 		</modal>
diff --git a/src/docs/components/SubmissionWizardPage/previews/PreviewSubmissionWizardPage.vue b/src/docs/components/SubmissionWizardPage/previews/PreviewSubmissionWizardPage.vue
index 40f75e882..47b2da8cf 100644
--- a/src/docs/components/SubmissionWizardPage/previews/PreviewSubmissionWizardPage.vue
+++ b/src/docs/components/SubmissionWizardPage/previews/PreviewSubmissionWizardPage.vue
@@ -60,7 +60,7 @@
 						<panel-section v-for="section in step.sections" :key="section.id">
 							<template #header>
 								<h2>{{ section.name }}</h2>
-								<div v-html="section.description" />
+								<div v-pkp-allowed-html="section.description" />
 							</template>
 							<pkp-form
 								v-if="section.type === 'form'"
@@ -216,8 +216,8 @@
 													Title
 												</h4>
 												<div
+													v-pkp-allowed-html="localize(publication.title)"
 													class="submissionWizard__reviewPanel__item__value"
-													v-html="localize(publication.title)"
 												/>
 											</div>
 											<div class="submissionWizard__reviewPanel__item">
@@ -235,8 +235,8 @@
 													Abstract
 												</h4>
 												<div
+													v-pkp-allowed-html="localize(publication.abstract)"
 													class="submissionWizard__reviewPanel__item__value"
-													v-html="localize(publication.abstract)"
 												/>
 											</div>
 											<div
diff --git a/src/pages/submissions/SubmissionsTable.vue b/src/pages/submissions/SubmissionsTable.vue
index e72c43375..144ace71b 100644
--- a/src/pages/submissions/SubmissionsTable.vue
+++ b/src/pages/submissions/SubmissionsTable.vue
@@ -21,7 +21,10 @@
 		</tr>
 	</PkpTable>
 	<div class="submissions__list__footer">
-		<span class="submission__list__showing" v-html="showingXofX"></span>
+		<span
+			v-pkp-allowed-html="showingXofX"
+			class="submission__list__showing"
+		></span>
 		<Pagination
 			v-if="pagination.pageCount > 1"
 			:current-page="currentPage"