fix: restore sanitizeHTML for XSS protection and fix Tube2tunes loading state

Author: Suvam-paul145

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-yarn pre-commit
+npx lint-staged

src/common/Testimonial/TestimonialCard.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { format } from 'date-fns';
 import * as allLocales from 'date-fns/locale';
 import { email2Slug } from 'common/services/string';
+import sanitizeHTML from 'common/utils/sanitizeHTML';
 
 const TestimonialCard = ({ home, quote, name, avatarUrl, category, created_at, email }) => {
   const [formattedDate] = useState(() => {
@@ -59,7 +60,7 @@ const TestimonialCard = ({ home, quote, name, avatarUrl, category, created_at, e
         >
           <p
             className="leading-relaxed text-gray-700"
-            dangerouslySetInnerHTML={{ __html: replaceWithBr() }}
+            dangerouslySetInnerHTML={{ __html: sanitizeHTML(replaceWithBr()) }}
           />
         </blockquote>
       </div>

src/common/badges-dashboard/BadgeDetails.jsx

@@ -1,5 +1,6 @@
 import Badge from './Badge';
 import './badge.css';
+import sanitizeHTML from 'common/utils/sanitizeHTML';
 
 const BadgeDetails = ({ badge, onClose }) => {
   const makeClickableLinks = (badge) => {
@@ -9,7 +10,7 @@ const BadgeDetails = ({ badge, onClose }) => {
       return `<a href="${url}" target="_blank" rel="noopener noreferrer" class="text-blue-500 hover:underline">${name}</a>`;
     });
 
-    return <span dangerouslySetInnerHTML={{ __html: descriptionWithLinks }} />;
+    return <span dangerouslySetInnerHTML={{ __html: sanitizeHTML(descriptionWithLinks) }} />;
   };
 
   return (

src/common/utils/sanitizeHTML.js

@@ -0,0 +1,12 @@
+import DOMPurify from 'dompurify';
+
+/**
+ * Sanitizes an HTML string using DOMPurify to prevent XSS attacks.
+ * Use this utility whenever you need to render dynamic HTML via dangerouslySetInnerHTML.
+ *
+ * @param {string} html - The raw HTML string to sanitize.
+ * @returns {string} - A sanitized HTML string safe to use with dangerouslySetInnerHTML.
+ */
+const sanitizeHTML = (html) => DOMPurify.sanitize(html ?? '');
+
+export default sanitizeHTML;

src/plays/devblog/Pages/Article.jsx

@@ -2,6 +2,7 @@ import axios from 'axios';
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import Loading from '../components/Loading';
+import sanitizeHTML from 'common/utils/sanitizeHTML';
 
 const Article = () => {
   const [article, setArticle] = useState({});
@@ -50,7 +51,7 @@ const Article = () => {
 
           <div
             className="mt-10 devBlog-article"
-            dangerouslySetInnerHTML={{ __html: article.body_html }}
+            dangerouslySetInnerHTML={{ __html: sanitizeHTML(article.body_html) }}
           />
         </div>
       ) : (

src/plays/fun-quiz/EndScreen.jsx

@@ -1,6 +1,8 @@
 // vendors
 import { Fragment, useState } from 'react';
 
+import sanitizeHTML from 'common/utils/sanitizeHTML';
+
 // css
 import './FrontScreen.scss';
 
@@ -16,17 +18,17 @@ const EndScreen = ({ quizSummary, redirectHome }) => {
         <div className="question-number">Question: {currentQuestion?.qNo}</div>
         <li
           dangerouslySetInnerHTML={{
-            __html: `${currentQuestion?.question}`
+            __html: sanitizeHTML(`${currentQuestion?.question}`)
           }}
         />
         <span
           dangerouslySetInnerHTML={{
-            __html: `<br/><b>Ans</b>: ${currentQuestion?.correct_answer}<br/>`
+            __html: sanitizeHTML(`<br/><b>Ans</b>: ${currentQuestion?.correct_answer}<br/>`)
           }}
         />
         <span
           dangerouslySetInnerHTML={{
-            __html: `<b>Your Answer</b>: ${currentQuestion?.your_answer}`
+            __html: sanitizeHTML(`<b>Your Answer</b>: ${currentQuestion?.your_answer}`)
           }}
         />
       </div>

src/plays/fun-quiz/QuizScreen.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useState, useCallback, useRef } from 'react';
 
+import sanitizeHTML from 'common/utils/sanitizeHTML';
 import './QuizScreen.scss';
 
 // assets
@@ -149,15 +150,15 @@ function QuizScreen({ category, getQuizSummary }) {
           <div className={`timer ${timer <= 5 && 'caution'}`}>{timer}</div>
           <div className="question-info">Question: {questionNumber + 1}</div>
           <div className="question">
-            <h1 dangerouslySetInnerHTML={{ __html: currentQuestion?.question }} />
+            <h1 dangerouslySetInnerHTML={{ __html: sanitizeHTML(currentQuestion?.question) }} />
           </div>
           <div className="options">
             {currentQuestion?.options?.map((option, index) => {
               return (
                 <div className="single-opt" key={index}>
                   <div
                     className={itemClassDisplayController(option)}
-                    dangerouslySetInnerHTML={{ __html: option }}
+                    dangerouslySetInnerHTML={{ __html: sanitizeHTML(option) }}
                     onClick={handleAnswerClick(option)}
                   />
                 </div>

src/plays/text-to-speech/TextToSpeech.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { FaVolumeUp, FaStop } from 'react-icons/fa';
 import PlayHeader from 'common/playlists/PlayHeader';
+import sanitizeHTML from 'common/utils/sanitizeHTML';
 import './styles.css';
 
 function TextToSpeech(props) {
@@ -160,7 +161,7 @@ function TextToSpeech(props) {
                 <>
                   <p
                     className="tts-output-text"
-                    dangerouslySetInnerHTML={{ __html: convertedText }}
+                    dangerouslySetInnerHTML={{ __html: sanitizeHTML(convertedText) }}
                   />
 
                   <button className="tts-speaker-btn" onClick={handleSpeak}>

src/plays/tube2tunes/Tube2tunes.jsx

@@ -49,8 +49,10 @@ function Tube2tunes(props) {
       .then((res) => {
         if (res.data.status === 'processing') {
           setProcessingMsg(true);
+          setLoading(false);
         } else if (res.data.status === 'fail') {
           setFailedMsg(true);
+          setLoading(false);
         } else {
           setUrlResult(res.data.link);
           setTitle(res.data.title);