pkp/pkp-lib#1660 added js side html sanitizer to handle XXS issue

Author: touhidurabir

src/components/ListPanel/reviewerRecommendations/ReviewerRecommendationsListPanel.vue

@@ -24,9 +24,10 @@
 			<TableBody>
 				<TableRow v-for="item in items" :key="item.id">
 					<TableCell :is-row-header="true">
-						<span class="text-base-normal">
-							{{ localize(item.title) }}
-						</span>
+						<span
+							v-strip-unsafe-html="localize(item.title)"
+							class="text-lg-normal"
+						></span>
 					</TableCell>
 
 					<TableCell>
@@ -77,6 +78,7 @@ import ReviewerRecommendationsEditModal from './ReviewerRecommendationsEditModal
 
 import {useModal} from '@/composables/useModal';
 import {useLocalize} from '@/composables/useLocalize';
+import {sanitizeHtml} from '@/directives/stripUnsafeHtml';
 
 const {t} = useLocalize();
 
@@ -249,7 +251,7 @@ export default {
 						? this.confirmDeactivateMessage
 						: this.confirmActivateMessage,
 					{
-						title: this.localize(recommendation.title),
+						title: sanitizeHtml(this.localize(recommendation.title)),
 					},
 				),
 				actions: [
@@ -362,7 +364,7 @@ export default {
 				name: 'delete',
 				title: this.deleteRecommendationLabel,
 				message: this.replaceLocaleParams(this.confirmDeleteMessage, {
-					title: this.localize(recommendation.title),
+					title: sanitizeHtml(this.localize(recommendation.title)),
 				}),
 				actions: [
 					{

src/directives/stripUnsafeHtml.js

@@ -4,21 +4,25 @@ const sanitizeConfig = {
 	USE_PROFILES: {html: true},
 };
 
+export function sanitizeHtml(value) {
+	return DOMPurify.sanitize(value, sanitizeConfig);
+}
+
 export const stripUnsafeHtml = {
 	// Called only once, when the directive is first bound to the element.
 	// This is where you can do one-time setup work.
 	mounted(el, binding) {
 		// Handle null and undefined values by defaulting to an empty string
 		const value = binding.value == null ? '' : String(binding.value);
-		const cleanContent = DOMPurify.sanitize(value, sanitizeConfig);
+		const cleanContent = sanitizeHtml(value, sanitizeConfig);
 		el.innerHTML = cleanContent;
 	},
 	// Called whenever the bound value changes.
 	updated(el, binding) {
 		// Only re-sanitize and update if the value has changed, handling null and undefined
 		if (binding.value !== binding.oldValue) {
 			const value = binding.value == null ? '' : String(binding.value);
-			const cleanContent = DOMPurify.sanitize(value, sanitizeConfig);
+			const cleanContent = sanitizeHtml(value, sanitizeConfig);
 			el.innerHTML = cleanContent;
 		}
 	},