pkp/pkp-lib#9421 replace v-html with v-strip-unsave-html (#324)

* pkp/pkp-lib#9421 replace v-html with v-strip-unsave-html * pkp/pkp-lib#9421 doc tool might require v-html
pkp · Feb 9, 2024 · 71ba3d4 · 71ba3d4
1 parent fcebfb3
commit 71ba3d4
Show file tree

Hide file tree

Showing 29 changed files with 98 additions and 53 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "core-js": "^3.8.0",
     "debounce": "^1.2.0",
     "dedent": "^0.7.0",
+    "dompurify": "^3.0.8",
     "element-resize-event": "^3.0.3",
     "highlight.js": "^10.4.1",
     "html-entities": "^1.3.1",

diff --git 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 class="pkpDateRange__current" v-strip-unsafe-html="currentRange" />
 		<button
 			class="pkpDateRange__button"
 			ref="toggleButton"
@@ -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-strip-unsafe-html="errorMessage" />
 				</div>
 			</form>
 		</div>

diff --git a/src/components/FileAttacher/FileAttacher.vue b/src/components/FileAttacher/FileAttacher.vue
@@ -6,7 +6,7 @@
 			:id="'attacher' + key"
 		>
 			<h2>{{ attacher.label }}</h2>
-			<p v-html="attacher.description" />
+			<p v-strip-unsafe-html="attacher.description" />
 			<template slot="actions">
 				<pkp-button
 					:aria-describedby="'attacher' + key"

diff --git 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-strip-unsafe-html="message" />
 		</div>
 	</div>
 </template>

diff --git a/src/components/Form/FormGroup.vue b/src/components/Form/FormGroup.vue
@@ -5,7 +5,7 @@
 			<div
 				v-if="description"
 				class="pkpFormGroup__description"
-				v-html="description"
+				v-strip-unsafe-html="description"
 			></div>
 		</div>
 		<div class="pkpFormGroup__fields">

diff --git a/src/components/Form/fields/FieldArchivingPn.vue b/src/components/Form/fields/FieldArchivingPn.vue
@@ -20,7 +20,7 @@
 				v-if="tooltip"
 				class="-screenReader"
 				:id="describedByTooltipId"
-				v-html="tooltip"
+				v-strip-unsafe-html="tooltip"
 			/>
 			<help-button
 				v-if="helpTopic"
@@ -33,13 +33,13 @@
 		<div
 			v-if="description"
 			class="pkpFormField__description pkpFormField--options__description"
-			v-html="description"
+			v-strip-unsafe-html="description"
 			:id="describedByDescriptionId"
 		/>
 		<div
 			v-if="terms && value"
 			class="pkpFormField__description pkpFormField--options__description pkpFormField--archivingPn__terms"
-			v-html="terms"
+			v-strip-unsafe-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
@@ -21,7 +21,7 @@
 				v-if="tooltip"
 				class="-screenReader"
 				:id="describedByTooltipId"
-				v-html="tooltip"
+				v-strip-unsafe-html="tooltip"
 			/>
 			<help-button
 				v-if="helpTopic"
@@ -34,7 +34,7 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			class="pkpFormField__description"
-			v-html="description"
+			v-strip-unsafe-html="description"
 			:id="describedByDescriptionId"
 		/>
 		<div class="pkpFormField__control pkpAutosuggest__control">

diff --git a/src/components/Form/fields/FieldColor.vue b/src/components/Form/fields/FieldColor.vue
@@ -22,7 +22,7 @@
 				v-if="isPrimaryLocale && tooltip"
 				class="-screenReader"
 				:id="describedByTooltipId"
-				v-html="tooltip"
+				v-strip-unsafe-html="tooltip"
 			/>
 			<help-button
 				v-if="isPrimaryLocale && helpTopic"
@@ -35,7 +35,7 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			class="pkpFormField__description"
-			v-html="description"
+			v-strip-unsafe-html="description"
 			:id="describedByDescriptionId"
 		/>
 		<div class="pkpFormField__control">

diff --git a/src/components/Form/fields/FieldHtml.vue b/src/components/Form/fields/FieldHtml.vue
@@ -5,7 +5,11 @@
 				{{ 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"
+				class="-screenReader"
+				v-strip-unsafe-html="tooltip"
+			/>
 			<help-button
 				v-if="helpTopic"
 				:topic="helpTopic"
@@ -15,7 +19,7 @@
 		</div>
 		<div
 			class="pkpFormField__control pkpFormField__control--html"
-			v-html="description"
+			v-strip-unsafe-html="description"
 		/>
 	</div>
 </template>

diff --git a/src/components/Form/fields/FieldMetadataSetting.vue b/src/components/Form/fields/FieldMetadataSetting.vue
@@ -7,7 +7,7 @@
 				v-if="tooltip"
 				class="-screenReader"
 				:id="describedByTooltipId"
-				v-html="tooltip"
+				v-strip-unsafe-html="tooltip"
 			/>
 			<help-button
 				v-if="helpTopic"
@@ -20,7 +20,7 @@
 		<div
 			v-if="description"
 			class="pkpFormField__description pkpFormField--options__description"
-			v-html="description"
+			v-strip-unsafe-html="description"
 			:id="describedByDescriptionId"
 		/>
 		<field-error
@@ -45,7 +45,7 @@
 				/>
 				<span
 					class="pkpFormField--options__optionLabel"
-					v-html="option.label"
+					v-strip-unsafe-html="option.label"
 				/>
 			</label>
 			<div v-if="isEnabled" class="pkpFormField--metadata__submissionOptions">
@@ -64,7 +64,7 @@
 					/>
 					<span
 						class="pkpFormField--options__optionLabel"
-						v-html="option.label"
+						v-strip-unsafe-html="option.label"
 					/>
 				</label>
 			</div>

diff --git a/src/components/Form/fields/FieldOptions.vue b/src/components/Form/fields/FieldOptions.vue
@@ -22,7 +22,7 @@
 				v-if="isPrimaryLocale && tooltip"
 				class="-screenReader"
 				:id="describedByTooltipId"
-				v-html="tooltip"
+				v-strip-unsafe-html="tooltip"
 			/>
 			<help-button
 				v-if="isPrimaryLocale && helpTopic"
@@ -35,7 +35,7 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			class="pkpFormField__description pkpFormField--options__description"
-			v-html="description"
+			v-strip-unsafe-html="description"
 			:id="describedByDescriptionId"
 		/>
 		<div class="pkpFormField__control">
@@ -79,7 +79,7 @@
 					/>
 					<span
 						class="pkpFormField--options__optionLabel"
-						v-html="option.label"
+						v-strip-unsafe-html="option.label"
 					/>
 					<orderer
 						v-if="isOrderable"

diff --git a/src/components/Form/fields/FieldPubId.vue b/src/components/Form/fields/FieldPubId.vue
@@ -12,7 +12,7 @@
 				v-if="tooltip"
 				class="-screenReader"
 				:id="describedByTooltipId"
-				v-html="tooltip"
+				v-strip-unsafe-html="tooltip"
 			/>
 			<help-button
 				v-if="helpTopic"
@@ -25,7 +25,7 @@
 		<div
 			v-if="description"
 			class="pkpFormField__description"
-			v-html="description"
+			v-strip-unsafe-html="description"
 			:id="describedByDescriptionId"
 		/>
 		<div class="pkpFormField__control">

diff --git a/src/components/Form/fields/FieldRadioInput.vue b/src/components/Form/fields/FieldRadioInput.vue
@@ -22,7 +22,7 @@
 				v-if="isPrimaryLocale && tooltip"
 				class="-screenReader"
 				:id="describedByTooltipId"
-				v-html="tooltip"
+				v-strip-unsafe-html="tooltip"
 			/>
 			<help-button
 				v-if="isPrimaryLocale && helpTopic"
@@ -35,7 +35,7 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			class="pkpFormField__description pkpFormField--options__description"
-			v-html="description"
+			v-strip-unsafe-html="description"
 			:id="describedByDescriptionId"
 		/>
 		<field-error

diff --git a/src/components/Form/fields/FieldRichTextarea.vue b/src/components/Form/fields/FieldRichTextarea.vue
@@ -22,7 +22,7 @@
 				v-if="isPrimaryLocale && tooltip"
 				class="-screenReader"
 				:id="describedByTooltipId"
-				v-html="tooltip"
+				v-strip-unsafe-html="tooltip"
 			/>
 			<help-button
 				v-if="isPrimaryLocale && helpTopic"
@@ -35,7 +35,7 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			class="pkpFormField__description"
-			v-html="description"
+			v-strip-unsafe-html="description"
 			:id="describedByDescriptionId"
 		/>
 		<div

diff --git a/src/components/Form/fields/FieldSelect.vue b/src/components/Form/fields/FieldSelect.vue
@@ -14,7 +14,7 @@
 				v-if="tooltip"
 				class="-screenReader"
 				:id="describedByTooltipId"
-				v-html="tooltip"
+				v-strip-unsafe-html="tooltip"
 			/>
 			<help-button
 				v-if="helpTopic"
@@ -27,7 +27,7 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			class="pkpFormField__description"
-			v-html="description"
+			v-strip-unsafe-html="description"
 			:id="describedByDescriptionId"
 		/>
 		<div

diff --git a/src/components/Form/fields/FieldSelectIssue.vue b/src/components/Form/fields/FieldSelectIssue.vue
@@ -12,7 +12,7 @@
 				v-if="tooltip"
 				class="-screenReader"
 				:id="describedByTooltipId"
-				v-html="tooltip"
+				v-strip-unsafe-html="tooltip"
 			/>
 			<help-button
 				v-if="helpTopic"
@@ -25,12 +25,12 @@
 		<div
 			v-if="description"
 			class="pkpFormField__description"
-			v-html="description"
+			v-strip-unsafe-html="description"
 			:id="describedByDescriptionId"
 		/>
 		<div class="pkpFormField__control">
 			<span class="pkpFormField__description">
-				<span v-html="notice" />
+				<span v-strip-unsafe-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
@@ -19,7 +19,7 @@
 				v-if="isPrimaryLocale && tooltip"
 				class="-screenReader"
 				:id="describedByTooltipId"
-				v-html="tooltip"
+				v-strip-unsafe-html="tooltip"
 			/>
 			<help-button
 				v-if="isPrimaryLocale && helpTopic"
@@ -32,7 +32,7 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			class="pkpFormField__description"
-			v-html="description"
+			v-strip-unsafe-html="description"
 			:id="describedByDescriptionId"
 		/>
 		<div class="pkpFormField__control" :class="controlClasses">
@@ -53,7 +53,7 @@
 				<span
 					v-if="prefix"
 					class="pkpFormField__inputPrefix"
-					v-html="prefix"
+					v-strip-unsafe-html="prefix"
 					ref="prefix"
 					:style="prefixStyles"
 					@click="setFocus"

diff --git a/src/components/Form/fields/FieldTextarea.vue b/src/components/Form/fields/FieldTextarea.vue
@@ -19,7 +19,7 @@
 				v-if="isPrimaryLocale && tooltip"
 				class="-screenReader"
 				:id="describedByTooltipId"
-				v-html="tooltip"
+				v-strip-unsafe-html="tooltip"
 			/>
 			<help-button
 				v-if="isPrimaryLocale && helpTopic"
@@ -32,7 +32,7 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			class="pkpFormField__description"
-			v-html="description"
+			v-strip-unsafe-html="description"
 			:id="describedByDescriptionId"
 		/>
 		<div class="pkpFormField__control">

diff --git a/src/components/Form/fields/FieldUpload.vue b/src/components/Form/fields/FieldUpload.vue
@@ -14,7 +14,7 @@
 				v-if="tooltip"
 				class="-screenReader"
 				:id="describedByTooltipId"
-				v-html="tooltip"
+				v-strip-unsafe-html="tooltip"
 			/>
 			<help-button
 				v-if="helpTopic"
@@ -27,7 +27,7 @@
 		<div
 			v-if="isPrimaryLocale && description"
 			class="pkpFormField__description"
-			v-html="description"
+			v-strip-unsafe-html="description"
 			:id="describedByDescriptionId"
 		/>
 		<div