Vue.js

উপস্থিতি

এই পৃষ্ঠায়

Security ​

Reporting Vulnerabilities ​

যখন একটি দুর্বলতা রিপোর্ট করা হয়, এটি অবিলম্বে আমাদের শীর্ষ উদ্বেগের বিষয় হয়ে ওঠে, একজন পূর্ণ-সময়ের অবদানকারী এটিতে কাজ করার জন্য সবকিছু ফেলে দেন। একটি দুর্বলতা রিপোর্ট করতে, অনুগ্রহ করে ইমেল করুন security@vuejs.org।

যদিও নতুন দুর্বলতাগুলির আবিষ্কার বিরল, আমরা আপনার অ্যাপ্লিকেশন যতটা সম্ভব নিরাপদ থাকে তা নিশ্চিত করতে সর্বদা Vue এর সর্বশেষ সংস্করণ এবং এর অফিসিয়াল সহযোগী লাইব্রেরিগুলি ব্যবহার করার পরামর্শ দিই।

Rule No.1: Never Use Non-trusted Templates ​

Vue ব্যবহার করার সময় সবচেয়ে মৌলিক নিরাপত্তা নিয়ম হল আপনার component template হিসাবে অ-বিশ্বস্ত সামগ্রী ব্যবহার করবেন না। এটি করা আপনার অ্যাপ্লিকেশনে নির্বিচারে জাভাস্ক্রিপ্ট সম্পাদনের অনুমতি দেওয়ার সমতুল্য - এবং আরও খারাপ, সার্ভার-সাইড রেন্ডারিংয়ের সময় কোডটি কার্যকর করা হলে সার্ভার লঙ্ঘন হতে পারে। এই ধরনের ব্যবহারের একটি উদাহরণ:

js
Vue.createApp({
  template: `<div>` + userProvidedString + `</div>` // NEVER DO THIS
}).mount('#app')

Vue টেমপ্লেটগুলি জাভাস্ক্রিপ্টে কম্পাইল করা হয় এবং রেন্ডারিং প্রক্রিয়ার অংশ হিসাবে টেমপ্লেটগুলির ভিতরে এক্সপ্রেশনগুলি কার্যকর করা হবে৷ যদিও অভিব্যক্তিগুলিকে একটি নির্দিষ্ট রেন্ডারিং প্রসঙ্গে মূল্যায়ন করা হয়, সম্ভাব্য গ্লোবাল এক্সিকিউশন এনভায়রনমেন্টের জটিলতার কারণে, Vue-এর মতো একটি ফ্রেমওয়ার্কের জন্য অবাস্তব কর্মক্ষমতা ওভারহেড না করে সম্ভাব্য ক্ষতিকারক কোড এক্সিকিউশন থেকে সম্পূর্ণরূপে রক্ষা করা অবাস্তব। এই শ্রেণীর সমস্যাগুলি সম্পূর্ণভাবে এড়াতে সবচেয়ে সহজ উপায় হল আপনার Vue টেমপ্লেটগুলির বিষয়অবজেক্ট সর্বদা বিশ্বস্ত এবং সম্পূর্ণরূপে আপনার দ্বারা নিয়ন্ত্রিত হয় তা নিশ্চিত করা।

What Vue Does to Protect You ​

HTML content ​

টেমপ্লেট বা রেন্ডার ফাংশন ব্যবহার করা হোক না কেন, বিষয়অবজেক্ট স্বয়ংক্রিয়ভাবে অব্যাহতিপ্রাপ্ত হয়। এর মানে এই টেমপ্লেটে:

template
<h1>{{ userProvidedString }}</h1>

যদি userProvidedString থাকে:

js
'<script>alert("hi")</script>'

তারপর এটি নিম্নলিখিত এইচটিএমএল থেকে সরিয়ে দিবে:

template
&lt;script&gt;alert(&quot;hi&quot;)&lt;/script&gt;

এইভাবে স্ক্রিপ্ট ইনজেকশন প্রতিরোধ. এই এস্কেপিংটি নেটিভ ব্রাউজার এপিআই ব্যবহার করে করা হয়, যেমন textContent, তাই একটি দুর্বলতা তখনই থাকতে পারে যদি ব্রাউজার নিজেই দুর্বল হয়।

Attribute bindings ​

একইভাবে, ডায়নামিক অ্যাট্রিবিউট বাইন্ডিংগুলিও স্বয়ংক্রিয়ভাবে এড়িয়ে যায়। এর মানে এই টেমপ্লেটে:

template
<h1 :title="userProvidedString">
  hello
</h1>

যদি userProvidedString থাকে:

js
'" onclick="alert(\'hi\')'

তারপর এটি নিম্নলিখিত এইচটিএমএল থেকে সরিয়ে দিবে:

template
&quot; onclick=&quot;alert('hi')

এইভাবে নতুন, নির্বিচারে এইচটিএমএল ইনজেক্ট করার জন্য title অ্যাট্রিবিউটের বন্ধ হওয়া প্রতিরোধ করে। এই এস্কেপিংটি নেটিভ ব্রাউজার API ব্যবহার করে করা হয়, যেমন setAttribute, তাই একটি দুর্বলতা তখনই থাকতে পারে যদি ব্রাউজার নিজেই দুর্বল হয়।

Potential Dangers ​

যেকোন ওয়েব অ্যাপ্লিকেশনে, এইচটিএমএল, সিএসএস বা জাভাস্ক্রিপ্ট হিসাবে অস্বাস্থ্যকর, ব্যবহারকারী-প্রদত্ত বিষয়অবজেক্ট কার্যকর করার অনুমতি দেওয়া সম্ভাব্য বিপজ্জনক, তাই যেখানেই সম্ভব এটি এড়ানো উচিত। এমন সময় আছে যখন কিছু ঝুঁকি গ্রহণযোগ্য হতে পারে, যদিও।

উদাহরণস্বরূপ, CodePen এবং JSFiddle-এর মতো পরিষেবাগুলি ব্যবহারকারী-প্রদত্ত বিষয়অবজেক্ট কার্যকর করার অনুমতি দেয়, কিন্তু এটি এমন একটি প্রেক্ষাপটে যেখানে এটি প্রত্যাশিত এবং আইফ্রেমের ভিতরে কিছু পরিমাণে স্যান্ডবক্স করা হয়। যে ক্ষেত্রে একটি গুরুত্বপূর্ণ বৈশিষ্ট্যের অন্তর্নিহিতভাবে কিছু স্তরের দুর্বলতার প্রয়োজন হয়, এটি আপনার দলের উপর নির্ভর করে যে দুর্বলতা সক্ষম করে এমন সবচেয়ে খারাপ পরিস্থিতিগুলির বিরুদ্ধে বৈশিষ্ট্যটির গুরুত্ব বিবেচনা করা।

HTML Injection ​

যেমন আপনি আগে শিখেছেন, Vue স্বয়ংক্রিয়ভাবে HTML বিষয়অবজেক্ট এড়িয়ে যায়, আপনাকে ভুলবশত আপনার অ্যাপ্লিকেশনে এক্সিকিউটেবল HTML ইনজেকশন করা থেকে বাধা দেয়। যাইহোক, যে ক্ষেত্রে আপনি জানেন যে HTML নিরাপদ, আপনি স্পষ্টভাবে HTML সামগ্রী রেন্ডার করতে পারেন:

  • Using a template:

    template
    <div v-html="userProvidedHtml"></div>

  • Using a render function:

    js
    h('div', {
  innerHTML: this.userProvidedHtml
})

  • Using a render function with JSX:

    jsx
    <div innerHTML={this.userProvidedHtml}></div>

WARNING

ব্যবহারকারী-প্রদত্ত HTML কখনই ১০০% নিরাপদ বলে বিবেচিত হতে পারে না যদি না এটি একটি স্যান্ডবক্সড আইফ্রেমে বা অ্যাপের এমন একটি অংশে থাকে যেখানে শুধুমাত্র সেই ব্যবহারকারী যে HTML লিখেছেন তারাই এটির সংস্পর্শে আসতে পারেন৷ উপরন্তু, ব্যবহারকারীদের তাদের নিজস্ব Vue টেমপ্লেট লিখতে অনুমতি দেওয়া একই ধরনের বিপদ নিয়ে আসে।

URL Injection ​

এই মত একটি URL এ:

template
<a :href="userProvidedUrl">
  click me
</a>

যদি javascript: ব্যবহার করে JavaScript এক্সিকিউশন রোধ করতে URL "স্যানিটাইজড" না করা হয় তাহলে একটি সম্ভাব্য নিরাপত্তা সমস্যা আছে। এটিতে সাহায্য করার জন্য sanitize-url এর মতো লাইব্রেরি রয়েছে, তবে মনে রাখবেন: আপনি যদি কখনও ফ্রন্টএন্ডে ইউআরএল স্যানিটাইজেশন করছেন, আপনি ইতিমধ্যে একটি নিরাপত্তা সমস্যা আছে. ব্যবহারকারী-প্রদত্ত ইউআরএলগুলিকে একটি ডাটাবেসে সংরক্ষণ করার আগে সর্বদা আপনার ব্যাকএন্ড দ্বারা স্যানিটাইজ করা উচিত। তারপরে স্থানীয় মোবাইল অ্যাপ সহ আপনার API-এর সাথে সংযোগকারী প্রতিটি ক্লায়েন্টের জন্য সমস্যাটি এড়ানো হয়। এছাড়াও মনে রাখবেন যে স্যানিটাইজড ইউআরএলগুলির সাথেও, Vue আপনাকে নিশ্চিত করতে সাহায্য করতে পারে না যে তারা নিরাপদ গন্তব্যে নিয়ে যায়।

Style Injection ​

এই উদাহরণটি দেখছেন:

template
<a
  :href="sanitizedUrl"
  :style="userProvidedStyles"
>
  click me
</a>

আসুন ধরে নিই যে sanitizedUrl স্যানিটাইজ করা হয়েছে, যাতে এটি অবশ্যই একটি আসল URL এবং জাভাস্ক্রিপ্ট নয়। userProvidedStyles এর সাথে, দূষিত ব্যবহারকারীরা এখনও "ক্লিক জ্যাক" এর জন্য CSS প্রদান করতে পারে, যেমন "লগ ইন" বোতামের উপরে একটি স্বচ্ছ বাক্সে লিঙ্কটিকে স্টাইল করা। তারপর যদি https://user-controlled-website.com/ আপনার অ্যাপ্লিকেশানের লগইন পৃষ্ঠার মতো তৈরি করা হয়, তাহলে তারা হয়তো ব্যবহারকারীর আসল লগইন তথ্য ক্যাপচার করেছে।

একটি <style> কম্পোনেন্টের জন্য ব্যবহারকারী-প্রদত্ত বিষয়অবজেক্টকে কীভাবে অনুমতি দেওয়া হবে তা আপনি কল্পনা করতে সক্ষম হবেন, যাতে ব্যবহারকারীকে পুরো পৃষ্ঠাটি কীভাবে স্টাইল করা যায় তার উপর সম্পূর্ণ নিয়ন্ত্রণ দেয়। এই কারণেই Vue টেমপ্লেটের ভিতরে স্টাইল ট্যাগগুলির রেন্ডারিং প্রতিরোধ করে, যেমন:

template
<style>{{ userProvidedStyles }}</style>

আপনার ব্যবহারকারীদের ক্লিকজ্যাকিং থেকে সম্পূর্ণরূপে সুরক্ষিত রাখতে, আমরা শুধুমাত্র একটি স্যান্ডবক্সড আইফ্রেমের মধ্যে CSS-এর উপর সম্পূর্ণ নিয়ন্ত্রণের অনুমতি দেওয়ার সুপারিশ করি। বিকল্পভাবে, স্টাইল বাইন্ডিংয়ের মাধ্যমে ব্যবহারকারীর নিয়ন্ত্রণ প্রদান করার সময়, আমরা এটির অবজেক্ট সিনট্যাক্স ব্যবহার করার পরামর্শ দিই এবং শুধুমাত্র ব্যবহারকারীদের নির্দিষ্ট বৈশিষ্ট্যগুলির জন্য মান প্রদান করার অনুমতি দেয়। তাদের নিয়ন্ত্রণ করা নিরাপদ, যেমন:

template
<a
  :href="sanitizedUrl"
  :style="{
    color: userProvidedColor,
    background: userProvidedBackground
  }"
>
  click me
</a>

JavaScript Injection ​

Vue এর সাথে <script> কম্পোনেন্ট রেন্ডার করাকে আমরা দৃঢ়ভাবে নিরুৎসাহিত করি, যেহেতু টেমপ্লেট এবং রেন্ডার ফাংশনগুলির কখনই পার্শ্বপ্রতিক্রিয়া থাকা উচিত নয়। যাইহোক, রানটাইমে জাভাস্ক্রিপ্ট হিসাবে মূল্যায়ন করা হবে এমন স্ট্রিংগুলি অন্তর্ভুক্ত করার এটিই একমাত্র উপায় নয়।

প্রতিটি এইচটিএমএল কম্পোনেন্টের মান সহ বৈশিষ্ট্য রয়েছে যা জাভাস্ক্রিপ্টের স্ট্রিং গ্রহণ করে, যেমন onclick, onfocus এবং onmouseenter। ব্যবহারকারী-প্রদত্ত জাভাস্ক্রিপ্টকে এই ইভেন্ট অ্যাট্রিবিউটগুলির যেকোনো একটিতে আবদ্ধ করা একটি সম্ভাব্য নিরাপত্তা ঝুঁকি, তাই এটি এড়ানো উচিত।

WARNING

ব্যবহারকারী-প্রদত্ত জাভাস্ক্রিপ্ট কখনই ১০০% নিরাপদ বলে বিবেচিত হতে পারে না যদি না এটি একটি স্যান্ডবক্সড আইফ্রেমে বা অ্যাপের এমন একটি অংশে থাকে যেখানে শুধুমাত্র সেই ব্যবহারকারী যে JavaScript লিখেছেন তারাই এটির সংস্পর্শে আসতে পারে।

কখনও কখনও আমরা Vue টেমপ্লেটগুলিতে ক্রস-সাইট স্ক্রিপ্টিং (XSS) কীভাবে করা সম্ভব সে সম্পর্কে দুর্বলতার প্রতিবেদন পাই। সাধারণভাবে, আমরা এই ধরনের ঘটনাগুলিকে প্রকৃত দুর্বলতা হিসাবে বিবেচনা করি না কারণ XSS-এর অনুমতি দেয় এমন দুটি পরিস্থিতি থেকে ডেভেলপারদের রক্ষা করার কোনও ব্যবহারিক উপায় নেই:

  1. ডেভেলপমেন্টকারী স্পষ্টভাবে Vue-কে ব্যবহারকারী-প্রদত্ত, অস্বাস্থ্যকর সামগ্রীকে Vue টেমপ্লেট হিসাবে রেন্ডার করতে বলছে৷ এটি সহজাতভাবে অনিরাপদ, এবং Vue-এর উৎপত্তি জানার কোনো উপায় নেই।

  2. ডেভেলপমেন্টকারী একটি সম্পূর্ণ HTML পৃষ্ঠায় Vue মাউন্ট করছে যা সার্ভার-রেন্ডার করা এবং ব্যবহারকারী-প্রদত্ত সামগ্রী ধারণ করে। এটি মৌলিকভাবে #1 এর মতো একই সমস্যা, তবে কখনও কখনও devs এটি বুঝতে না পেরে এটি করতে পারে। এটি সম্ভাব্য দুর্বলতার দিকে নিয়ে যেতে পারে যেখানে আক্রমণকারী HTML প্রদান করে যা প্লেইন HTML হিসাবে নিরাপদ কিন্তু Vue টেমপ্লেট হিসাবে অনিরাপদ। সর্বোত্তম অনুশীলন হল কোনও নোডগুলিতে Vue মাউন্ট করবেন না যাতে সার্ভার-রেন্ডার করা এবং ব্যবহারকারী-প্রদত্ত সামগ্রী থাকতে পারে।

Best Practices ​

সাধারণ নিয়ম হল যে আপনি যদি অস্বাস্থ্যকর, ব্যবহারকারী-প্রদত্ত বিষয়অবজেক্ট (এইচটিএমএল, জাভাস্ক্রিপ্ট বা এমনকি সিএসএস হিসাবে) কার্যকর করার অনুমতি দেন তবে আপনি আক্রমণের জন্য নিজেকে উন্মুক্ত করতে পারেন। Vue, অন্য ফ্রেমওয়ার্ক বা এমনকি কোনো ফ্রেমওয়ার্ক ব্যবহার না করা হোক না কেন এই পরামর্শটি আসলেই সত্য।

সম্ভাব্য বিপদ এর জন্য উপরে দেওয়া সুপারিশের বাইরে, আমরা এই সংস্থানগুলির সাথে নিজেকে পরিচিত করার পরামর্শ দিই:

তারপরে সম্ভাব্য বিপজ্জনক নিদর্শনগুলির জন্য আপনার নির্ভরতার উত্স কোড পর্যালোচনা করতে আপনি যা শিখেন তা ব্যবহার করুন, যদি সেগুলির মধ্যে কোনওটি 3য়-পক্ষের কম্পোনেন্টগুলি অন্তর্ভুক্ত করে বা অন্যথায় DOM-এ যা রেন্ডার করা হয়েছে তা প্রভাবিত করে৷

Backend Coordination ​

HTTP নিরাপত্তা দুর্বলতা, যেমন ক্রস-সাইট রিকোয়েস্ট জালিয়াতি (CSRF/XSRF) এবং ক্রস-সাইট স্ক্রিপ্ট অন্তর্ভুক্তি (XSSI), প্রাথমিকভাবে ব্যাকএন্ডে সম্বোধন করা হয়, তাই সেগুলি Vue-এর উদ্বেগের বিষয় নয়। যাইহোক, আপনার ব্যাকএন্ড টিমের সাথে তাদের API-এর সাথে কীভাবে সর্বোত্তম ইন্টারঅ্যাক্ট করতে হয় তা শিখতে এখনও একটি ভাল ধারণা, যেমন, ফর্ম জমা দেওয়ার সাথে CSRF টোকেন জমা দিয়ে।

Server-Side Rendering (SSR) ​

SSR ব্যবহার করার সময় কিছু অতিরিক্ত নিরাপত্তা উদ্বেগ রয়েছে, তাই দুর্বলতা এড়াতে আমাদের SSR ডকুমেন্টেশন জুড়ে বর্ণিত সর্বোত্তম অনুশীলনগুলি অনুসরণ করা নিশ্চিত করুন।

GitHub-এ এই পৃষ্ঠাটি সম্পাদনা করুন