পারফরম্যান্স ও নিরাপত্তা FAQ: ধীর, আটকানো ও অবিশ্বস্ত ডেটা

মূল কথা: আগে লক্ষণ দেখে নির্ণয় করুন — পার্সিং, রেন্ডারিং নাকি মেমরি — তারপর সমাধানের ক্রম হেঁটে আসুন: ডেটার আয়তন কমান, গভীর ক্লোন বন্ধ করুন, পার্সিং Worker-এ সরান ও ভার্চুয়াল স্ক্রলিং যোগ করুন, আর ৫০ MB-এর উপরে সবকিছু স্ট্রিম করুন। অবিশ্বস্ত ইনপুটে __proto__, constructor ও prototype ফিল্টার করার আগে আকার ও নেস্টিং গভীরতা সীমিত করুন।

"JSON ধীর" দশবারের নয়বারই ভুল; আসলে যা ধীর তা সাধারণত রেন্ডারিং, গভীর ক্লোন, বা ভুল অপারেশন-ক্রম।

১. কেন ধীর

বড় JSON ফাইল পার্স করা ধীর। কীভাবে অপ্টিমাইজ করব?

আগে bottleneck লোকেট করুন, তারপর অপ্টিমাইজেশনের কথা বলুন। ধাপগুলো কয়েক মাত্রার ক্রমে আলাদা:

তাই অপ্টিমাইজেশনের ক্রম হওয়া উচিত:

1. ডেটার আয়তন কমান: API পেজিনেট করুক, কেবল দরকারি ফিল্ড ফেরত দিক, gzip/brotli চালু করুন;
2. গভীর ক্লোন এড়ান: পরের অংশ দেখুন; এটাই সবচেয়ে সাধারণ লুকানো খরচ;
3. লেজি রেন্ডারিং: ট্রি ভিউতে একবারে কয়েক হাজার DOM নোড না বানিয়ে কেবল এক্সপ্যান্ড করা স্তর রেন্ডার করুন;
4. স্ট্রিমিং: ডেটা ১০ MB ছাড়ালে সব একবারে পার্স করবেন না।

Bottleneck সত্যিই JSON.parse হলে মানে ডেটা ইতিমধ্যে কয়েক ডজন MB বা বেশি, আর সঠিক পদক্ষেপ স্ট্রিমিং পার্সার:

复制import { parser } from 'stream-json';
import { streamArray } from 'stream-json/streamers/StreamArray';

// Handle array elements one by one; memory usage is independent of the total size
const pipeline = fs.createReadStream('big.json')
  .pipe(parser())
  .pipe(streamArray());

pipeline.on('data', ({ value }) => {
  processItem(value);
});

কয়েক ডজন MB JSON খোলার সঙ্গে সঙ্গে ব্রাউজার ক্র্যাশ করে। এখন কী?

আগে নিশ্চিত করুন এটি "ক্র্যাশ" নাকি "জমে যাওয়া"। দুটোর ব্যবস্থাপনা সম্পূর্ণ আলাদা:

• জমে যাওয়া: ট্যাব "Page unresponsive" দেখায় আর কয়েক ডজন সেকেন্ড পরে হয়তো সেরে যায়। কারণ মেইন থ্রেড পূর্ণ করা লং টাস্ক;
• ক্র্যাশ: ট্যাব "Aw, Snap" হয়ে যায়, সাধারণত মেমরি নিঃশেষ (OOM)।

যেভাবেই হোক, মেইন থ্রেডে প্রসেস করবেন না। পার্সিং Web Worker-এ সরান:

复制// worker.js
self.onmessage = (event) => {
  const parsed = JSON.parse(event.data);
  self.postMessage(parsed);
};

Worker "UI জমে না" সমাধান করে, মেমরি সিলিং নয়। একটি ব্রাউজার ট্যাবে সাধারণত ১–৪ GB পাওয়া যায়; ২০০ MB JSON অবজেক্টে পার্স করলে ১ GB বা বেশি নিতে পারে (প্রতিটি কি-ভ্যালু জোড়া অবজেক্ট ওভারহেড বহন করে), আর উপরে রেন্ডারিং যোগ করলে সহজেই সীমায় ঠেকে।

আসল সমাধান কখনো পুরোটা লোড না করা:

JSON.parse(JSON.stringify(obj)) কি গভীর ক্লোন?

এটি গভীর ক্লোন, কিন্তু কয়েক জায়গায় "নীরবে ডেটা বদলায়", তাই সাধারণ ক্লোনিং টুল হিসেবে উপযুক্ত নয়।

复制const source = {
  date: new Date(),
  fn: () => {},
  undef: undefined,
  nan: NaN,
  map: new Map(),
  nested: { a: 1 },
};
JSON.parse(JSON.stringify(source));
// {
//   date: "2026-10-30T03:00:00.000Z",  // Date becomes a string
//   nan: null,                          // NaN becomes null
//   nested: { a: 1 }                    // only this level is correct
// }
// fn and undef disappear, map becomes {}

সমস্যার তালিকা:

আধুনিক ব্রাউজারে structuredClone আছে, যা Date, Map, Set ও সার্কুলার রেফারেন্স সমর্থন করে, ফাংশন নয়:

复制const copy = structuredClone(source);

কেবল অগভীর কনফিগ মার্জ হলে spread অপারেটর সবচেয়ে সস্তা: { ...config, timeout: 3000 }।

ট্রি ভিউ এক্সপ্যান্ড করা এত আটকে যায় কেন?

কারণ প্রতিটি নোড একটি DOM এলিমেন্ট, আর নোড-সংখ্যা কয়েক হাজারে পৌঁছালে ব্রাউজারের লেআউট খরচ বিস্ফোরিত হয়।

১০ MB JSON-এ ৫০k–১০০k লিফ নোড থাকতে পারে। কেবল দৃশ্যমান এলাকা রেন্ডার করলেও একবার DOM গড়তে শত মিলিসেকেন্ড থেকে সেকেন্ড লাগে, আর পরের প্রতিটি স্ক্রলে রিফ্লো ট্রিগার হয়।

সঠিক পথ:

1. ভার্চুয়াল স্ক্রলিং: কেবল ভিউপোর্টের কয়েক ডজন সারি রেন্ডার করুন আর স্ক্রলে DOM নোড পুনরায় ব্যবহার করুন;
2. ডিফল্টে কোলাপ্স: কেবল প্রথম দুই স্তর এক্সপ্যান্ড করুন ও গভীর স্তর চাহিদামাফিক রেন্ডার করুন;
3. রেন্ডার স্কেল সীমিত করুন: ১০k নোডের উপরে "ডেটা খুব বড়, লোকেট করতে সার্চ ব্যবহার করুন" দেখান, জোর করে রেন্ডার নয়।

এই সাইটের এডিটর বড় ফাইলে graceful degrade করে এজন্যই — প্রযুক্তিগতভাবে রেন্ডার করতে পারে না বলে নয়, বরং রেন্ডার করলে ব্যবহারযোগ্য হতো না বলে।

২. কেন আক্রমণের শিকার হয়

__proto__ ইনজেকশন কীভাবে কাজ করে?

প্রোটোটাইপ দূষণ। আক্রমণকারী __proto__ কি-যুক্ত JSON বানায়; আপনার কোড ফিল্টার না করে অবজেক্টে মার্জ করলে এটি Object.prototype ওভাররাইট করে আর রানটাইমের প্রতিটি অবজেক্টকে প্রভাবিত করে।

复制const payload = JSON.parse('{"__proto__": {"isAdmin": true}}');

// Dangerous code: recursive merge without checking key names
function merge(target, source) {
  for (const key in source) {
    if (typeof source[key] === 'object') {
      target[key] = target[key] || {};
      merge(target[key], source[key]);
    } else {
      target[key] = source[key];
    }
  }
  return target;
}

merge({}, payload);
({}).isAdmin;  // true — every object has been polluted

মূল তথ্য: JSON.parse নিজে প্রোটোটাইপ দূষিত করে না; {"__proto__": ...} সাধারণ নিজস্ব প্রপার্টি হিসেবে পার্স হয়। বিপজ্জনক হলো পার্সের পরের মার্জ, অ্যাসাইনমেন্ট, Object.assign, lodash.merge ইত্যাদি।

তিন প্রতিরক্ষা:

1. কি-নাম ফিল্টার: মার্জের সময় __proto__, constructor ও prototype এড়িয়ে যান;
2. Object.create(null) কন্টেইনার হিসেবে ব্যবহার করুন যাতে দূষণের প্রোটোটাইপ চেইন না থাকে;
3. Map দিয়ে অবিশ্বস্ত কি-ভ্যালু জোড়া রাখুন।

复制function safeMerge(target, source) {
  for (const key of Object.keys(source)) {
    if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
      continue;
    }
    const value = source[key];
    if (value && typeof value === 'object' && !Array.isArray(value)) {
      target[key] = safeMerge(target[key] ?? {}, value);
    } else {
      target[key] = value;
    }
  }
  return target;
}

এছাড়া for...in উত্তরাধিকারসূত্রে পাওয়া প্রপার্টি হাঁটে; Object.keys() নিরাপদ।

অবিশ্বস্ত JSON পার্স করার সময় কী খেয়াল করব?

এই ক্রমে করুন — কম খরচ, বেশি লাভ:

1. আকার ক্যাপ করুন: থ্রেশহোল্ডের উপরে কিছুই সঙ্গে সঙ্গে প্রত্যাখ্যান করুন, আগে মেমরিতে পড়বেন না;
2. গভীরতা ক্যাপ করুন: কয়েকশো স্তর গভীর JSON রিকার্সিভ পার্সারের স্ট্যাক ওভারফ্লো করতে পারে;
3. কি-সংখ্যা ক্যাপ করুন: হ্যাশ কলিশন আক্রমণ ও মেমরি amplification ঠেকায়;
4. বিপজ্জনক কি ফিল্টার করুন: __proto__, constructor, prototype;
5. কাঠামো যাচাই করুন: Schema-এর মধ্য দিয়ে চালিয়ে টাইপ ও বাধ্যতামূলক ফিল্ড নিশ্চিত করুন;
6. Content-Type বিশ্বাস করবেন না: ঘোষিত টাইপ ও প্রকৃত কন্টেন্ট আলাদা হতে পারে।

গভীরতা চেক সস্তা; পার্সের আগে মোটামুটি রেগুলার ফিল্টার ব্যবহার করতে পারেন, বা পার্সের পর ট্রাভার্স করতে পারেন:

复制function measureDepth(value, depth = 0) {
  if (value === null || typeof value !== 'object') {
    return depth;
  }
  let maxDepth = depth;
  for (const key of Object.keys(value)) {
    maxDepth = Math.max(maxDepth, measureDepth(value[key], depth + 1));
  }
  return maxDepth;
}

কিন্তু এই কোড নিজেই রিকার্সিভ আর দূষিতভাবে গভীর ডেটায় তবু স্ট্যাক ওভারফ্লো করতে পারে। নিরাপদ পথ হলো পার্সিংয়ের সময়েই সীমা বলবৎ করা, গভীরতা অপশন সমর্থনকারী পার্সার দিয়ে (কিছু লাইব্রেরি maxDepth প্যারামিটার দেয়)।

JSON দিয়ে XSS কীভাবে হয়?

JSON নিজে HTML নয়, চলে না। XSS ঘটে যেখানে "একটি JSON মান HTML-এ জোড়া লাগানো হয়"।

তিন সাধারণ পথ:

তৃতীয়টি সবচেয়ে সূক্ষ্ম। JSON.stringify < এস্কেপ করে না, তাই </script><script>alert(1)</script> ধারণকারী ডেটা স্ক্রিপ্ট ট্যাগ আগেই বন্ধ করতে পারে:

复制const data = { name: '</script><script>alert(1)</script>' };
// Output: <script>var d = {"name":"</script><script>alert(1)</script>"}</script>

সমাধান হলো বিপজ্জনক অক্ষরকে ইউনিকোড এস্কেপে বদলানো:

复制function safeJsonForHtml(data) {
  return JSON.stringify(data)
    .replace(/</g, '\\u003c')
    .replace(/>/g, '\\u003e')
    .replace(/&/g, '\\u0026')
    .replace(/\u2028/g, '\\u2028')
    .replace(/\u2029/g, '\\u2029');
}

নেস্টিং গভীরতা সীমিত করা উচিত?

হ্যাঁ। এটি সেরা খরচ-লাভ অনুপাতের প্রতিরক্ষার একটি।

সীমিত না করার পরিণতি: রিকার্সিভ ফাংশন স্ট্যাক ওভারফ্লো করে, গভীরতা বেশি হলে কিছু বাস্তবায়নে JSON.parse ক্র্যাশ করে, আর সিরিয়ালাইজেশনও একইভাবে স্ট্যাক উড়িয়ে দেয়। ১ KB [[[[...]]]] অরক্ষিত পার্সার নামাতে যথেষ্ট।

যুক্তিসঙ্গত থ্রেশহোল্ড ব্যবসার উপর নির্ভর করে:

JSON হাইজ্যাকিং কী?

একটি ঐতিহাসিক দুর্বলতা: প্রাথমিক ব্রাউজার ক্রস-অরিজিন <script src>-কে JSON লোড ও চালাতে দিত, আর আক্রমণকারীরা Array কনস্ট্রাক্টর বা Object.prototype.__defineSetter__ পুনরায় সংজ্ঞায়িত করে ডেটা চুরি করত।

আধুনিক প্রতিরক্ষা বেশ সম্পূর্ণ:

• ব্রাউজার আর __defineSetter__ দিয়ে অ্যারে লিটেরাল হাইজ্যাক করতে দেয় না;
• সঠিক Content-Type: application/json স্ক্রিপ্ট এক্সিকিউশন ঠেকায়;
• X-Content-Type-Options: nosniff MIME sniffing ঠেকায়।

পুরোনো সিস্টেমে তবু অবশিষ্ট ঝুঁকি থাকে। ব্যবহারিক পরামর্শ: টপ লেভেলে খালি অ্যারে নয়, অবজেক্ট ব্যবহার করুন। {"data": [...]}-এর মতো মোড়ক রেসপন্সকে বৈধ JavaScript স্টেটমেন্ট হওয়া থেকে রাখে ({ কোড ব্লক হিসেবে ধরা হয়), সিনট্যাক্স স্তরেই হাইজ্যাকিং আটকায়।

JSON লগ করার ঝুঁকি কী?

তিনটি:

1. সংবেদনশীল তথ্য ডিস্কে লেখা: ফোন নম্বর, পরিচয়পত্র নম্বর, টোকেন ও প্লেইনটেক্সট পাসওয়ার্ড লগিং সিস্টেমে পড়ে, যার সাধারণত শিথিল অনুমতি ও দীর্ঘ ধারণকাল;
2. লগ ইনজেকশন: নিউলাইন ও জাল লগ প্রিফিক্সযুক্ত JSON মান একটি রেকর্ডকে কয়েকটিতে ভাগ করে অডিট ট্রেইল দূষিত করে;
3. আকার বিস্ফোরণ: পুরো ১০ MB রেসপন্স লগে লিখলে লগিং সিস্টেম দ্রুত ভরে যায়।

পদ্ধতি:

复制// Redact and truncate before logging
function safeLog(data) {
  const cloned = structuredClone(data);
  for (const key of ['password', 'token', 'idCard', 'phone']) {
    if (key in cloned) cloned[key] = '***';
  }
  const text = JSON.stringify(cloned);
  return text.length > 2000 ? text.slice(0, 2000) + '...(truncated)' : text;
}

স্ট্রাকচার্ড লগিং সিস্টেম (যেমন pino) নিজেই নিউলাইন এস্কেপ করে, কিন্তু redaction ও truncation তবু আপনার কাজ।

৩. দ্রুত রেফারেন্স