76 xss input password field fe

package.json

@@ -27,6 +27,7 @@
     "@types/axios": "^0.14.0",
     "@types/lint-staged": "^13.3.0",
     "axios": "^1.6.8",
+    "dompurify": "^3.1.5",
     "framer-motion": "^11.0.25",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -38,6 +39,7 @@
     "yup": "^1.4.0"
   },
   "devDependencies": {
+    "@types/dompurify": "^3.0.5",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.5.0",

src/pages/ChangePassword.tsx

@@ -9,7 +9,7 @@ import { toast } from "react-toastify";
 // import { useNavigate } from "react-router-dom";
 import { FormDataChangePasswordApi } from "@services/users.api.ts";
 import usersService from "@services/users.service.ts";
-
+import DOMPurify from "dompurify";
 export interface FormDataChangePassword {
   oldPassword: string;
   confirmPassword: string;
@@ -22,8 +22,8 @@ const schema = yup.object().shape({
     .string()
     .required("Password is required")
     .matches(
-      /^(?=.*\d)(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z]).{8,}$/,
-      "Password must contain at least 8 characters, including at least one digit, one special character, one uppercase letter, and one lowercase letter",
+      /^(?=.*\d)(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])[^'\\]{8,}$/,
+      "Password must contain at least 8 characters, including at least one digit, one special character, one uppercase letter, NOT sensitive character and one lowercase letter,",
     ),
   confirmPassword: yup
     .string()
@@ -53,8 +53,8 @@ const ChangePassword = () => {
     dataPassChange,
   ) => {
     const updateData: FormDataChangePasswordApi = {
-      old_password: dataPassChange.oldPassword,
-      new_password: dataPassChange.password,
+      old_password: DOMPurify.sanitize(dataPassChange.oldPassword),
+      new_password: DOMPurify.sanitize(dataPassChange.password),
     };
 
     const { message, error } = await usersService.changePassword({
@@ -122,6 +122,7 @@ const ChangePassword = () => {
             label="Password"
             variant="bordered"
             placeholder="Enter your new password"
+            isInvalid={errors.password?.message ? true : false}
             color={errors.password ? "danger" : "success"}
             errorMessage={errors.password?.message}
             endContent={
@@ -146,6 +147,7 @@ const ChangePassword = () => {
             label="Confirm Password"
             variant="bordered"
             placeholder="Enter confirm new password"
+            isInvalid={errors.password?.message ? true : false}
             color={errors.confirmPassword ? "danger" : "success"}
             errorMessage={errors.confirmPassword?.message}
             endContent={

src/pages/CompareOtpPage.tsx

@@ -1,27 +1,26 @@
 import { Button, Link } from "@nextui-org/react";
 import usersService from "@services/users.service";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import OtpInput from "react-otp-input";
 import { useLocation, useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 
 const CompareOtpPage = () => {
-  const [accessToken, setAccessToken] = useState("");
+  // const [accessToken, setAccessToken] = useState("");
   const [isResendAvailable, setIsResendAvailable] = useState<boolean>(true);
   const location = useLocation();
   const [timeRemaining, setTimeRemaining] = useState<number>(30);
   const navigate = useNavigate();
   const [otp, setOtp] = useState("");
-  useEffect(() => {
-    const userObject = localStorage.getItem("user");
-    const access_token = JSON.parse(userObject!).access_token;
-    setAccessToken(access_token);
-  }, []);
+  // useEffect(() => {
+  //   const userObject = localStorage.getItem("user");
+  //   const access_token = JSON.parse(userObject!).access_token;
+  //   setAccessToken(access_token);
+  // }, []);
 
   const sendOtp = async () => {
     try {
       const data = await usersService.getOtp({
-        access_token: accessToken,
         _data: { email_phone: location.state.email_phone },
       });
       if (data) {
@@ -41,18 +40,16 @@ const CompareOtpPage = () => {
       toast.error("Error occurred while sending OTP. Please try again later.");
     }
   };
-
   const handleCompareOtp = async () => {
     // const dataIs = {
     //   email_phone: location.state.email_phone,
     //   forgot_password_otp: otp,
     // };
 
     const { message, error } = await usersService.compareOtp({
-      access_token: accessToken,
       _data: {
         email_phone: location.state.email_phone,
-        forgot_password_otp: otp.toString(),
+        otp: otp.toString(),
       },
     });
 

src/pages/Login.tsx

@@ -29,7 +29,7 @@ import { FcGoogle } from "react-icons/fc";
 import { Link, Button } from "@nextui-org/react";
 import { toast } from "react-toastify";
 import usersService from "@services/users.service";
-
+import DOMPurify from "dompurify";
 type LoginFieldSchema<T extends FieldValues> = {
   name: Path<T>;
   label: string;
@@ -49,11 +49,18 @@ const PasswordSchema: LoginFieldSchema<LoginFormData> = {
 };
 
 const schema = yup.object().shape({
-  email_phone: yup.string().required("Email or Phone is required"),
+  email_phone: yup
+    .string()
+    .required("Email or Phone is required")
+    .matches(
+      /^[^']*$/,
+      "Email or Phone cannot contain then sensitive character",
+    ),
   password: yup
     .string()
     .required("Password is required")
-    .min(8, "Password must be at least 8 characters"),
+    .min(8, "Password must be at least 8 characters")
+    .matches(/^[^']*$/, "Password cannot contain then sensitive character"),
 });
 
 const Login = () => {
@@ -71,7 +78,12 @@ const Login = () => {
 
   const { mutate } = useMutation({
     mutationFn: (body: LoginFormData) => {
-      return usersService.login(body);
+      const data: LoginFormData = {
+        email_phone: DOMPurify.sanitize(body.email_phone),
+        password: DOMPurify.sanitize(body.password),
+      };
+
+      return usersService.login(data);
     },
   });
 

src/pages/Password.tsx

@@ -9,7 +9,7 @@ import { passwordInterfaceApi } from "@services/users.api";
 import { toast } from "react-toastify";
 import { useNavigate } from "react-router-dom";
 import usersService from "@services/users.service.ts";
-
+import DOMPurify from "dompurify";
 export interface UserInfoForm {
   data: {
     email: string;
@@ -29,7 +29,10 @@ const Password = () => {
 
   const toggleVisibility = () => setIsVisible(!isVisible);
   const schema = yup.object().shape({
-    password: yup.string().required("Password is required"),
+    password: yup
+      .string()
+      .required("Password is required")
+      .matches(/^[^']*$/, "Password cannot contain then sensitive character"),
     confirmPassword: yup
       .string()
       .required("Confirm password is required")
@@ -52,8 +55,9 @@ const Password = () => {
     const { data: userInfo } = await usersService.getMe(access_token);
     const patchData: passwordInterfaceApi = {
       email: userInfo!.data.email,
-      password: dataForm.password,
+      password: DOMPurify.sanitize(dataForm.password),
     };
+
     const { message, error } = await usersService.updatePassword({
       access_token,
       _data: patchData,
@@ -91,11 +95,20 @@ const Password = () => {
         </div>
 
         <Input
+          onPaste={(e) => {
+            e.preventDefault();
+            return false;
+          }}
+          onCopy={(e) => {
+            e.preventDefault();
+            return false;
+          }}
           {...register("password")}
           isRequired
           label="Password"
           variant="bordered"
           placeholder="Enter your password"
+          isInvalid={errors.password?.message ? true : false}
           color={errors.password ? "danger" : "success"}
           errorMessage={errors.password?.message}
           endContent={
@@ -112,13 +125,22 @@ const Password = () => {
             </button>
           }
           type={isVisible ? "text" : "password"}
-          className="max-w-xs"
+          className="max-w-xs "
         />
         <Input
+          onPaste={(e) => {
+            e.preventDefault();
+            return false;
+          }}
+          onCopy={(e) => {
+            e.preventDefault();
+            return false;
+          }}
           {...register("confirmPassword")}
           isRequired
           label="Confirm Password"
           variant="bordered"
+          isInvalid={errors.password?.message ? true : false}
           placeholder="Enter your Confirm password"
           color={errors.confirmPassword ? "danger" : "success"}
           errorMessage={errors.confirmPassword?.message}
@@ -136,7 +158,7 @@ const Password = () => {
             </button>
           }
           type={isVisible ? "text" : "password"}
-          className="mt-4 max-w-xs"
+          className="mt-4 max-w-xs "
         />
         <Link
           className="t-0 mt-4"

src/pages/Recovery.tsx

@@ -10,7 +10,7 @@ import { useNavigate } from "react-router-dom";
 import { isAxiosUnprocessableEntityError } from "@utils/utils.ts";
 import { ResponseApi } from "@utils/utils.type.ts";
 import usersService from "@services/users.service";
-
+import DOMPurify from "dompurify";
 const Recovery = () => {
   const navigate = useNavigate();
   const [selectedKey, setSelectedKey] = React.useState("email");
@@ -23,7 +23,11 @@ const Recovery = () => {
   const schema = yup.object().shape({
     email_phone:
       selectedKey === "email"
-        ? yup.string().email("Invalid email").required("Email is required")
+        ? yup
+            .string()
+            .email("Invalid email")
+            .required("Email is required")
+            .matches(/^[^']*$/, "Email cannot contain then sensitive character")
         : yup
             .string()
             .matches(/^[0-9]+$/, "Invalid phone number")
@@ -37,7 +41,10 @@ const Recovery = () => {
 
   const { mutate } = useMutation({
     mutationFn: (body: RecoveryForm) => {
-      return usersService.recovery(body);
+      const data: RecoveryForm = {
+        email_phone: DOMPurify.sanitize(body.email_phone),
+      };
+      return usersService.recovery(data);
     },
   });
 

src/pages/Register.tsx

@@ -28,15 +28,18 @@ import {
 import usersService from "@services/users.service";
 import { FcGoogle } from "react-icons/fc";
 import { FaFacebook } from "react-icons/fa";
+import DOMPurify from "dompurify";
 
 const schema: yup.ObjectSchema<Omit<RegisterForm, "email" | "phone_number">> =
   yup.object().shape({
     first_name: yup
       .string()
-      .required(ValidationRules.firstnameRule.required.message),
+      .required(ValidationRules.firstnameRule.required.message)
+      .matches(/^[^']*$/, "First Name cannot contain then sensitive character"),
     last_name: yup
       .string()
-      .required(ValidationRules.lastnameRule.required.message),
+      .required(ValidationRules.lastnameRule.required.message)
+      .matches(/^[^']*$/, "Last Name cannot contain then sensitive character"),
     email_phone: yup
       .string()
       .required("This field is required")
@@ -53,6 +56,10 @@ const schema: yup.ObjectSchema<Omit<RegisterForm, "email" | "phone_number">> =
           ).test(value);
           return isEmail || isPhone;
         },
+      )
+      .matches(
+        /^[^']*$/,
+        "Email or Phone cannot contain then sensitive character",
       ),
     password: yup
       .string()
@@ -61,6 +68,7 @@ const schema: yup.ObjectSchema<Omit<RegisterForm, "email" | "phone_number">> =
         ValidationRules.passwordRule.minLength.value,
         ValidationRules.passwordRule.minLength.message,
       )
+      .matches(/^[^']*$/, "Password cannot contain then sensitive character")
       .matches(
         new RegExp(ValidationRules.passwordRule.pattern.value),
         ValidationRules.passwordRule.pattern.message,
@@ -85,7 +93,15 @@ const Register = () => {
 
   const { mutate, error } = useMutation({
     mutationFn: (_body: Omit<RegisterForm, "agreeToTerms">) => {
-      return usersService.register(_body);
+      const registerData: Omit<RegisterForm, "agreeToTerms"> = {
+        first_name: DOMPurify.sanitize(_body.first_name),
+        last_name: DOMPurify.sanitize(_body.last_name),
+        email_phone: DOMPurify.sanitize(_body.email_phone),
+        password: DOMPurify.sanitize(_body.password),
+        subcribe: _body.subcribe,
+      };
+
+      return usersService.register(registerData);
     },
   });
 
@@ -399,7 +415,7 @@ const Register = () => {
 
                 <Button
                   type="submit"
-                  className="mt-6 block h-unit-13 w-full justify-end bg-black px-8 text-lg font-bold text-white"
+                  className="h-unit-13 mt-6 block w-full justify-end bg-black px-8 text-lg font-bold text-white"
                   radius="full"
                   // isLoading={true}
                 >

src/services/users.api.ts

@@ -16,7 +16,7 @@ export interface sendOtp {
 }
 export interface compareOtpApi {
   email_phone: string;
-  forgot_password_otp: string;
+  otp: string;
 }
 
 export type TokenResponse = {
@@ -136,18 +136,11 @@ export const callSendVerifyAccountOTP = (_data: { email_phone: string }) =>
     method: "post",
   });
 
-export const getOtp = ({
-  access_token,
-  _data,
-}: {
-  access_token: string;
-  _data: sendOtp | undefined;
-}) =>
+export const getOtp = ({ _data }: { _data: sendOtp | undefined }) =>
   http<SendVerifyAccountOtpResponse, typeof _data>({
     url: "user/send-verify-account-otp",
     data: _data,
     method: "post",
-    token: access_token,
   });
 
 export const recovery = (_data: RecoveryForm) =>
@@ -174,18 +167,11 @@ export const updatePassword = ({
     token: access_token,
   });
 
-export const compareOtp = ({
-  access_token,
-  _data,
-}: {
-  access_token: string;
-  _data: compareOtpApi | undefined;
-}) =>
+export const compareOtp = ({ _data }: { _data: compareOtpApi | undefined }) =>
   http<CompareOTPResponse, typeof _data>({
     url: "user/verify-otp",
     data: _data,
     method: "post",
-    token: access_token,
   });
 
 export const changePassword = ({