ইনপুট ভ্যালিডেশন এবং স্যানিটাইজেশন

ইনপুট ভ্যালিডেশন এবং স্যানিটাইজেশন হল ওয়েব অ্যাপ্লিকেশনে ইউজার ইনপুট যাচাই এবং নিরাপদ করা একটি গুরুত্বপূর্ণ প্রক্রিয়া। এই দুটি প্রক্রিয়া ইউজার দ্বারা প্রদান করা ডেটার মান্যতা নিশ্চিত করতে এবং সেই ডেটাকে নিরাপদে ব্যবহারের উপযোগী করতে সহায়তা করে। Vue.js এ ইনপুট ভ্যালিডেশন এবং স্যানিটাইজেশন সাধারণত দুইটি স্তরে করা হয়:

1. ইনপুট ভ্যালিডেশন: ইউজারের ইনপুট ডেটার সঠিকতা যাচাই করা।
2. ইনপুট স্যানিটাইজেশন: ইউজারের ইনপুট থেকে কোন ধরনের ক্ষতিকারক কনটেন্ট (যেমন স্ক্রিপ্ট) সরানো।

১. ইনপুট ভ্যালিডেশন

ইনপুট ভ্যালিডেশন ইউজারের ইনপুট নিশ্চিত করে যে, এটি নির্দিষ্ট কন্ডিশন বা নিয়ম অনুসারে আছে। Vue.js এ in-line validation করা সহজ এবং খুবই কার্যকরী। আপনি v-model ডিরেকটিভ এবং computed properties, methods, বা watchers ব্যবহার করে ইনপুট ভ্যালিডেশন করতে পারেন।

সাধারণ ইনপুট ভ্যালিডেশন উদাহরণ:

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input v-model="email" type="email" placeholder="Enter your email">
      <span v-if="!isValidEmail" style="color: red;">Invalid email format!</span>

      <button type="submit" :disabled="!isValidEmail">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
    };
  },
  computed: {
    isValidEmail() {
      const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
      return emailRegex.test(this.email);
    }
  },
  methods: {
    submitForm() {
      if (this.isValidEmail) {
        alert('Form submitted!');
      }
    }
  }
};
</script>

এখানে, email ইনপুট ফিল্ডের জন্য একটি সিম্পল ভ্যালিডেশন করা হয়েছে। এটি computed property isValidEmail এর মাধ্যমে ইনপুটের মান যাচাই করে, যদি তা একটি সঠিক ইমেইল ঠিকানা না হয় তবে একটি সতর্কতা বার্তা দেখায়।

• v-model: ইউজারের ইনপুট ডেটাকে Vue ডেটার সাথে বাইন্ড করে।
• v-if: ইনপুট ভুল হলে একটি ত্রুটির বার্তা প্রদর্শন করে।
• :disabled: সাবমিট বাটনটি ইনপুট ভ্যালিড না হলে নিষ্ক্রিয় করে দেয়।

২. ইনপুট স্যানিটাইজেশন

ইনপুট স্যানিটাইজেশন হল এমন একটি প্রক্রিয়া যার মাধ্যমে ইউজারের ইনপুট থেকে কোনো ক্ষতিকর কনটেন্ট (যেমন স্ক্রিপ্ট বা HTML ট্যাগ) সরানো হয়, যাতে অ্যাপ্লিকেশন বা সার্ভারের নিরাপত্তা নিশ্চিত করা যায়। এক্ষেত্রে, আপনি ইনপুট থেকে HTML বা স্ক্রিপ্ট ইঞ্জেকশন প্রতিরোধ করতে পারেন।

Vue.js এ ইনপুট স্যানিটাইজেশন করার জন্য সাধারণত third-party libraries যেমন DOMPurify ব্যবহার করা হয়, যা HTML থেকে সব ক্ষতিকর ট্যাগ এবং স্ক্রিপ্ট সরিয়ে ফেলে।

DOMPurify ব্যবহার করে স্যানিটাইজেশন উদাহরণ:

1. প্রথমে DOMPurify ইনস্টল করুন:

npm install dompurify

2. এরপর Vue.js কম্পোনেন্টে DOMPurify ব্যবহার করুন:

<template>
  <div>
    <form @submit.prevent="submitForm">
      <textarea v-model="inputText" placeholder="Enter your HTML input"></textarea>
      <span v-if="!isValidInput" style="color: red;">Invalid input detected!</span>
      <button type="submit" :disabled="!isValidInput">Submit</button>
    </form>
    <div v-html="sanitizedInput"></div>
  </div>
</template>

<script>
import DOMPurify from 'dompurify';

export default {
  data() {
    return {
      inputText: ''
    };
  },
  computed: {
    sanitizedInput() {
      return DOMPurify.sanitize(this.inputText); // Sanitize the input
    },
    isValidInput() {
      // You can add more validation logic here (e.g., check for dangerous words, etc.)
      return this.inputText.length > 0;
    }
  },
  methods: {
    submitForm() {
      alert('Form submitted with sanitized input!');
      console.log('Sanitized input:', this.sanitizedInput);
    }
  }
};
</script>

এখানে:

• DOMPurify.sanitize(): এটি ইউজারের ইনপুট থেকে সব HTML, স্ক্রিপ্ট এবং অন্যান্য ক্ষতিকর কনটেন্ট মুছে ফেলে নিরাপদ ইনপুট তৈরি করে।
• v-html: Vue.js ডিরেকটিভ যা স্যানিটাইজ করা ইনপুট HTML হিসাবে রেন্ডার করে।

৩. স্যানিটাইজেশন এবং ভ্যালিডেশন একত্রে ব্যবহৃত উদাহরণ:

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input v-model="inputText" placeholder="Enter your input" />
      <span v-if="!isValidInput" style="color: red;">Invalid input!</span>
      <button type="submit" :disabled="!isValidInput">Submit</button>
    </form>
    <p>Sanitized input: {{ sanitizedInput }}</p>
  </div>
</template>

<script>
import DOMPurify from 'dompurify';

export default {
  data() {
    return {
      inputText: '',
    };
  },
  computed: {
    isValidInput() {
      // You can validate the input here as well, such as checking if it's too short.
      return this.inputText.length > 3;
    },
    sanitizedInput() {
      // Sanitizing the input to avoid XSS attacks
      return DOMPurify.sanitize(this.inputText);
    }
  },
  methods: {
    submitForm() {
      alert('Form submitted with sanitized input!');
    }
  }
};
</script>

এখানে:

• ইনপুট ভ্যালিডেশন: isValidInput দিয়ে ইনপুট যাচাই করা হচ্ছে।
• ইনপুট স্যানিটাইজেশন: sanitizedInput দিয়ে ইনপুট স্যানিটাইজ করা হচ্ছে, যাতে স্ক্রিপ্ট বা HTML ইঞ্জেকশন প্রতিরোধ হয়।

সারাংশ

• ইনপুট ভ্যালিডেশন: Vue.js এ ইনপুট যাচাই করার জন্য v-model এবং computed properties অথবা methods ব্যবহার করা হয়। সাধারণত, এটি ইউজারের ইনপুট সঠিকতা পরীক্ষা করে।
• ইনপুট স্যানিটাইজেশন: Vue.js এ ইনপুট স্যানিটাইজেশন করতে DOMPurify বা অন্যান্য স্যানিটাইজেশন লাইব্রেরি ব্যবহার করা হয়, যা ইউজারের ইনপুট থেকে ক্ষতিকারক স্ক্রিপ্ট বা HTML মুছে দেয়।
• ইনপুট ভ্যালিডেশন এবং স্যানিটাইজেশন একত্রে নিরাপদ অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।