From 2a1939640d7f41aca6cc9ef3b9fb71ffaec22b71 Mon Sep 17 00:00:00 2001
From: Iyehah Hacen <117352746+iyehah@users.noreply.github.com>
Date: Sun, 24 Nov 2024 02:21:02 +0000
Subject: [PATCH] Fix code scanning alert no. 1: DOM text reinterpreted as HTML
 (#23)

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
---
 package.json                    | 3 ++-
 src/components/LeetCodeCard.tsx | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 94d4e44..672f4e1 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
-    "svg-to-img": "^2.0.9"
+    "svg-to-img": "^2.0.9",
+    "he": "^1.2.0"
   },
   "devDependencies": {
     "@types/dom-to-image": "^2.6.7",
diff --git a/src/components/LeetCodeCard.tsx b/src/components/LeetCodeCard.tsx
index d819a30..eafc391 100644
--- a/src/components/LeetCodeCard.tsx
+++ b/src/components/LeetCodeCard.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { fetchLeetCodeData } from '../utils/leetcode';
+import he from 'he';
 
 type LeetCodeCardProps = {
   username: string;
@@ -33,7 +34,7 @@ const LeetCodeCard: React.FC<LeetCodeCardProps> = ({ username,type, theme, borde
   }
 
   // Construct the image URL using props
-  const imgUrl = `http://leetcode-status.vercel.app/api/${type}/${username}?theme=${theme}&border=${border}&hide_title=${hide_title}&custom_title=${custom_title}`;
+  const imgUrl = `http://leetcode-status.vercel.app/api/${he.encode(type)}/${he.encode(username)}?theme=${he.encode(theme)}&border=${border}&hide_title=${hide_title}&custom_title=${he.encode(custom_title)}`;
 
   return (
     <div className='flex items-center justify-center rounded'>