From a17c118d1740e83c5829605af2c2168b7a49911e Mon Sep 17 00:00:00 2001
From: Ranjeet2063 <ranjeet2063@users.noreply.github.com>
Date: Thu, 1 Oct 2026 13:10:04 +0545
Subject: [PATCH] fix(security): sanitize unescaped HTML interpolation in
 certificate download

---
 src/app/credentials/[credentialId]/page.tsx | 34 +++++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/app/credentials/[credentialId]/page.tsx b/src/app/credentials/[credentialId]/page.tsx
index f86c676..c9f9ccf 100644
--- a/src/app/credentials/[credentialId]/page.tsx
+++ b/src/app/credentials/[credentialId]/page.tsx
@@ -27,6 +27,20 @@ import {
 import { useState, useCallback } from "react";
 import { ShareButton } from "@/components/shared/share-button";
 
+/**
+ * Safely escapes HTML special characters to prevent cross-site scripting (XSS)
+ * when interpolating dynamic data into raw certificate HTML templates.
+ */
+export function htmlEscape(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  return String(value)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
 export default function CredentialDetailPage({
   params,
 }: {
@@ -67,8 +81,16 @@ export default function CredentialDetailPage({
 
   const handleDownload = useCallback(() => {
     if (!credential) return;
+    const escapedTitle = htmlEscape(credential.courseTitle);
+    const escapedIssued = htmlEscape(formatDate(credential.issuedAt));
+    const escapedId = htmlEscape(credential.id);
+    const escapedTokenId = htmlEscape(truncateAddress(credential.tokenId, 8));
+    const scoreHtml = credential.metadata?.score != null
+      ? `<p class="meta">Score: ${htmlEscape(credential.metadata.score)}%</p>`
+      : "";
+
     const html = `<!DOCTYPE html>
-<html><head><title>Certificate - ${credential.courseTitle}</title>
+<html><head><title>Certificate - ${escapedTitle}</title>
 <style>
   body{font-family:Georgia,serif;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;background:#f9fafb}
   .cert{background:white;border:2px solid #111;padding:48px;max-width:640px;text-align:center}
@@ -77,12 +99,12 @@ export default function CredentialDetailPage({
 </style></head><body>
 <div class="cert">
   <h1>Certificate of Completion</h1>
-  <h2>${credential.courseTitle}</h2>
+  <h2>${escapedTitle}</h2>
   <div class="line"></div>
-  <p class="meta">Issued: ${formatDate(credential.issuedAt)}</p>
-  <p class="meta">Credential ID: ${credential.id}</p>
-  <p class="meta">Token: ${truncateAddress(credential.tokenId, 8)}</p>
-  ${credential.metadata.score ? `<p class="meta">Score: ${credential.metadata.score}%</p>` : ""}
+  <p class="meta">Issued: ${escapedIssued}</p>
+  <p class="meta">Credential ID: ${escapedId}</p>
+  <p class="meta">Token: ${escapedTokenId}</p>
+  ${scoreHtml}
   <div class="line"></div>
   <p class="meta">Verified on Stellar blockchain</p>
 </div>