Add DOMPurify sanitization

README.md

@@ -34,3 +34,11 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+
+## HTML Sanitization
+
+This project displays HTML provided by the WordPress backend. Before inserting
+any HTML into the DOM with `dangerouslySetInnerHTML`, the markup is sanitized
+using [DOMPurify](https://github.com/cure53/DOMPurify). Sanitization is applied
+to post content, comment content and any other HTML strings to protect against
+XSS vulnerabilities.

components/Comment.js

@@ -1,5 +1,6 @@
 import React, {useEffect} from 'react';
 import { useRouter } from 'next/router';
+import DOMPurify from 'dompurify';
 
 
 const Comment = ({ comment, comments, addReply }) => {
@@ -39,7 +40,7 @@ const Comment = ({ comment, comments, addReply }) => {
 			<div data-comment-id={comment.id} className='flex justify-between items-start'>
 				<div className="comment-content flex flex-col items-start">
 					<strong className="capitalize">{comment.author_name}</strong>
-					<div dangerouslySetInnerHTML={{__html: comment.content.rendered}} />
+                                       <div dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(comment.content.rendered)}} />
 				</div>
 				<button
 					className="text-black text-sm mt-2 font-medium hover:text-slate-500"
@@ -56,7 +57,7 @@ const Comment = ({ comment, comments, addReply }) => {
 						}
 						if (replyMessageElement) {
 							replyMessageElement.classList.add('bg-slate-200', 'flex', 'gap-3', 'p-5', 'inline-block', 'w-full', 'rounded');
-							replyMessageElement.innerHTML = `<strong>Replying to comment:</strong> ${comment.content.rendered}`;
+                                                        replyMessageElement.innerHTML = `<strong>Replying to comment:</strong> ${DOMPurify.sanitize(comment.content.rendered)}`;
 						}
 
 						addReply(comment.id)

components/Login.js

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import axios from 'axios';
 import { useRouter } from 'next/router';
+import DOMPurify from 'dompurify';
 
 const Login = () => {
   const [username, setUsername] = useState('');
@@ -49,7 +50,7 @@ const Login = () => {
           required
         />
         <button type="submit" className='mt-5 px-5 py-2 border-2 border-black rounded-sm bg-black text-white hover:bg-slate-700 hover:border-black transition-all'>Login</button>
-        {error && <div className="error text-red-800" dangerouslySetInnerHTML={{__html: error}} />}
+        {error && <div className="error text-red-800" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(error)}} />}
 
       </form>
     </div>

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "autoprefixer": "^10.4.20",
+    "dompurify": "^3.2.6",
     "next": "15.1.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

pages/posts/[slug].js

@@ -4,6 +4,7 @@ import Link from 'next/link';
 import CommentsView from '../../components/Comment';
 import CommentForm from '../../components/CommentForm';
 import { useState } from 'react';
+import DOMPurify from 'dompurify';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
 
@@ -125,8 +126,8 @@ const PostPage = ({ post, relatedPosts, categories, tags, comments }) => {
 		{
 			featuredImage && <Image width={900} height={600} src={featuredImage} alt={post.title.rendered} className='mt-7 w-full h-auto mb-5 object-cover rounded-md' />
 		}
-		{/* Content */}
-		<div className='flex flex-col gap-5' dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
+                {/* Content */}
+                <div className='flex flex-col gap-5' dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(post.content.rendered) }} />
 		{/* Categories */}
 		<h2 className='text-2xl my-5 font-medium mt-10'>Categories</h2>
 		<ul className='flex flex-wrap gap-2'>