I9421 v-pkp-allowed-html

.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
+	vueApp.directive('pkp-allowed-html', allowedHtmlDirective);
+
 	app.mixin(GlobalMixins);
 
 	app.use(FloatingVue, {

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",

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

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>

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"

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>

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">

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"

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"

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

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>

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>

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"

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

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"

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"

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"

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"