JS Engine Internals & Web Security

"Speed & Safety: The Senior Developer's Shield"

একজন জুনিয়র ডেভেলপার কোড লেখে কাজ করানোর জন্য। একজন সিনিয়র ডেভেলপার কোড লেখে যাতে সেটা দ্রুত চলে এবং হ্যাক না হয়। এই অধ্যায়ে আমরা ইঞ্জিনের ভেতরে ঢুকব এবং হ্যাকারদের আটকানোর টেকনিক শিখব।

🏎️ SECTION A: JavaScript Engine (V8) Optimization

জাভাস্ক্রিপ্ট কিভাবে ব্রাউজারে রান করে? Google Chrome-এর V8 Engine

⭐ ১. JIT Compiler (Just-In-Time)

জাভাস্ক্রিপ্ট একটি Interpreted Language, কিন্তু V8 একে ফাস্ট করার জন্য JIT ব্যবহার করে।

প্রসেস:

  • Parser: কোডকে ছোট ছোট টুকরো (Tokens) করে AST (Abstract Syntax Tree) বানায়
  • Ignition (Interpreter): কোড লাইন-বাই-লাইন রান করে (Bytecode)
  • TurboFan (Compiler): বারবার রান হওয়া ফাংশনকে (Hot Function) অপটিমাইজড মেশিন কোডে কনভার্ট করে

⭐ ২. Hidden Classes (Secret Blueprints) 🕵️‍♂️

V8 ডাইনামিক অবজেক্টকে ফাস্ট করতে Hidden Classes তৈরি করে।

function Point(x, y) {
    this.x = x;
    this.y = y;
}
const p1 = new Point(1, 2);
const p2 = new Point(3, 4);
// p1 এবং p2 একই Hidden Class শেয়ার করছে!

⚠️ De-optimization Trap:

p1.z = 5; // p1 এর শেপ বদলে গেল!
// V8 কে এখন নতুন Hidden Class বানাতে হবে → Performance Drop!

Optimization Tip: অবজেক্টের সব প্রপার্টি কনস্ট্রাক্টরের ভেতরেই ডিফাইন করো।

⭐ ৩. Inline Caching (Smart Memory)

V8 মনে রাখে তুমি অবজেক্টের কোন প্রপার্টি কোথায় খুঁজে পেয়েছিলে।

function getUserName(user) {
    return user.name;
}
// বারবার কল করলে V8 সরাসরি মেমোরি অ্যাড্রেস মনে রাখবে

Senior Tip: delete কিওয়ার্ড এড়িয়ে চলো। অবজেক্ট থেকে প্রপার্টি ডিলিট না করে null বা undefined সেট করা ভালো।

🛡️ SECTION B: Web Security (Hack-Proofing)

সিকিউরিটি কোনো ফিচার নয়, এটা প্রয়োজনীয়তা

⭐ ৪. XSS — Cross-Site Scripting (সবচেয়ে কমন অ্যাটাক)

হ্যাকার তোমার ওয়েবসাইটে ক্ষতিকর জাভাস্ক্রিপ্ট ইনজেক্ট করে দেয়।

প্রকারভেদ:

  • Reflected XSS: URL এর মাধ্যমে স্ক্রিপ্ট পাঠানো হয়
  • Stored XSS (Dangerous): কমেন্ট বক্সে স্ক্রিপ্ট লিখে ডাটাবেসে সেভ করা
  • DOM-based XSS: innerHTML এর মাধ্যমে স্ক্রিপ্ট রান হয়

🛡️ Prevention (প্রতিরোধ):

// ❌ Dangerous
div.innerHTML = userComment; 

// ✅ Safe
div.textContent = userComment;

React Safety: React অটোমেটিক XSS আটকায়। তবে dangerouslySetInnerHTML ব্যবহার করলে সাবধান!

⭐ ৫. CSRF — Cross-Site Request Forgery

হ্যাকার ইউজারের ব্রাউজার সেশন ব্যবহার করে ইউজারের অজান্তেই রিকোয়েস্ট পাঠায়।

🛡️ Prevention:

  • CSRF Token: সার্ভার প্রতিটা ফর্মের সাথে গোপন টোকেন পাঠাবে
  • SameSite Cookies: কুকি সেট করার সময় SameSite=Strict ব্যবহার করো

⭐ ৬. Clickjacking (UI Redressing)

হ্যাকার তোমার ওয়েবসাইটকে iframe এর মধ্যে লোড করে এবং তার উপরে অদৃশ্য বাটন রাখে।

🛡️ Prevention:

X-Frame-Options: সার্ভার হেডারে X-Frame-Options: DENY সেট করো।

⭐ ৭. JWT Security (JSON Web Token) 🔑

❌ LocalStorage (Not Safe)

জাভাস্ক্রিপ্ট দিয়ে এক্সেস করা যায়। XSS অ্যাটাক হলে হ্যাকার টোকেন চুরি করতে পারে।

✅ HTTP-Only Cookie (Best Practice)

  • জাভাস্ক্রিপ্ট দিয়ে এক্সেস করা যায় না
  • XSS প্রুফ
  • সার্ভার থেকে অটোমেটিক পাঠানো হয়
Set-Cookie: token=xyz; HttpOnly; Secure; SameSite=Strict;

🧠 ৮. Secure Coding Checklist (Senior Developer)

SQL Injection:

❌ db.query("SELECT * FROM users WHERE id = " + id)
✅ db.query("SELECT * FROM users WHERE id = $1", [id])

Rate Limiting:

API তে লিমিট সেট করো (যেমন: ১ মিনিটে ১০০ রিকোয়েস্ট)

Helmet (Node.js):

এক্সপ্রেস অ্যাপে helmet প্যাকেজ ব্যবহার করো

Never Expose Secrets:

ফ্রন্টএন্ড কোডে কখনো API Key বা Secret রাখবে না। .env ব্যবহার করো

🧠 ৯. Senior Interview Questions

Q1: innerHTML এবং textContent এর মধ্যে সিকিউরিটি পার্থক্য কী?

উত্তর: innerHTML HTML পার্স করে → XSS রিস্ক। textContent প্লেইন টেক্সট → নিরাপদ।

Q2: JWT কেন LocalStorage এ রাখা উচিত নয়?

উত্তর: LocalStorage জাভাস্ক্রিপ্ট দিয়ে এক্সেসিবল। XSS হলে হ্যাকার টোকেন চুরি করতে পারে।

Q3: Hidden Class কী এবং কেন গুরুত্বপূর্ণ?

উত্তর: V8 অবজেক্টের স্ট্রাকচার মনে রাখার জন্য Hidden Class তৈরি করে। শেপ বদলালে অপটিমাইজেশন ভেঙে যায়।

🚀 অধ্যায় ২৩ সারাংশ (Checklist)

  • ✓Engine: V8 এর JIT, Hidden Class এবং Inline Caching
  • ✓Performance: অবজেক্টের শেপ চেঞ্জ না করা এবং delete এড়িয়ে চলা
  • ✓XSS: ইউজারের ইনপুট স্যানিটাইজ করা এবং innerHTML এড়ান
  • ✓CSRF: টোকেন এবং SameSite কুকি ব্যবহার করা
  • ✓Auth: JWT টোকেন HTTP-Only Cookie তে রাখা

Next Step: সিকিউরিটি শেষ। এখন আমরা ফ্রন্টএন্ডের অ্যাডভান্সড টপিক—"Worker Threads & PWA (Progressive Web Apps)" দেখব।

🔒 কপিরাইট সুরক্ষিত কন্টেন্ট 🔒

কপি, স্ক্রিনশট, প্রিন্ট করা সম্পূর্ণ নিষিদ্ধ।