# JavaScript Хөгжүүлэгчдэд Зориулсан: Үр Ашигтай Алдаа Засварлах Болон Аюулгүй Кодчилолын Практик Гарын Авлага\n\nJavaScript нь Web хөгжүүлэлтийн тулгуур бөгөөд front-end, back-end, mobile-д өргөн хэрэглэгддэг. Гэсэн хэдий ч JavaScript-ийн динамик шинж чанар болон ажиллах орчны нарийн төвөгтэй байдал нь алдаа болон аюулгүй байдлын эмзэг байдлыг үүсгэдэг. Энэхүү нийтлэл нь JavaScript-ийн талаарх X/Twitter дээрх хэлэлцүүлгийг нэгтгэн алдаа засварлах хэрэгсэл, аюулгүй кодчилол, гүйцэтгэлийг оновчтой болгох зэрэгт JavaScript хөгжүүлэгчдэд зориулсан хэрэгтэй зөвлөмж, шилдэг туршлагыг санал болгож, илүү бат бөх, аюулгүй код бичихэд тусална.\n\n## Нэг. Таамаглахаа Болих: JavaScript-ийн Үр Ашигтай Алдаа Засварлах Техник\n\nАлдаа засах нь хөгжүүлэлтийн салшгүй нэг хэсэг юм. Консол дээр `console.log` хийж төөрөлдөхөөс илүүтэйгээр илүү үр ашигтай алдаа засах хэрэгсэл, техникийг эзэмшсэн нь дээр.\n\n**1. Хөтчийн Хөгжүүлэгчийн Хэрэгслийг Ашиглах:**\n\nОрчин үеийн хөтчүүд нь алдаа засах, сүлжээний хяналт, гүйцэтгэлийн шинжилгээ зэрэг хүчирхэг хөгжүүлэгчийн хэрэгслүүдтэй.\n\n* **Зогсоох цэг (Breakpoint) Тохируулах:** Кодын гол хэсэгт зогсоох цэг тохируулснаар хөгжүүлэгчид хувьсагчийн утга болон програмын төлөвийг шалгах боломжийг олгож програмыг түр зогсооно. Хөтчийн хөгжүүлэгчийн хэрэгсэл нь эх кодын мөрийн дугаарыг дарж зогсоох цэг тохируулах боломжийг олгодог.\n\n* **Алхам Алхмаар Гүйцэтгэх:** Алхам алхмаар гүйцэтгэх (Step Over, Step Into, Step Out) функцийг ашиглан кодын гүйцэтгэлийн урсгалыг ажиглаж, мөр мөрөөр нь гүйцэтгэнэ.\n\n* **Дуудлагын Стэкийг Шалгах:** Дуудлагын стек нь функцүүдийн дуудах дарааллыг бүртгэдэг бөгөөд хөгжүүлэгчдэд асуудлын байршлыг хурдан олоход тусалдаг.\n\n* **Илэрхийллийг Хянах:** Хөгжүүлэгчийн хэрэгслийн **1. Үйлчлүүлэгчийн талд эмзэг мэдээллийг хадгалахаас зайлсхийх:**
API түлхүүр, хэрэглэгчийн нууц үг гэх мэт эмзэг мэдээллийг үйлчлүүлэгчийн талд хэзээ ч хадгалж болохгүй. Эдгээр мэдээллийг серверийн талд хадгалж, аюулгүй API интерфэйсээр дамжуулан хандах ёстой.
**2. Хэрэглэгчийн оруулсан мэдээллийг сайтар шалгаж, шүүх:**
Хэрэглэгчийн оруулсан мэдээлэлд хэзээ ч итгэж болохгүй. XSS (Cross-Site Scripting) болон SQL injection гэх мэт аюулгүй байдлын цоорхойгоос сэргийлэхийн тулд хэрэглэгчийн оруулсан бүх мэдээллийг сайтар шалгаж, шүүх хэрэгтэй.
**Жишээ нь:**
```javascript
// XSS халдлагаас сэргийлэхийн тулд хэрэглэгчийн оруулсан мэдээллийг HTML-ээр кодлох
function escapeHtml(text) {
var map = {
'&': '&',
'': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}
// Хэрэглэгчийн оруулсан мэдээллийг авах
let userInput = document.getElementById("userInput").value;
// Хэрэглэгчийн оруулсан мэдээллийг кодлох
let safeInput = escapeHtml(userInput);
// Аюулгүй хэрэглэгчийн оруулсан мэдээллийг хуудсан дээр харуулах
document.getElementById("displayArea").innerHTML = safeInput;
```
**3. CSP (Content Security Policy) ашиглах:**
CSP нь HTTP хариултын толгой бөгөөд хөтөчдөө ачаалах нөөцийн эх үүсвэрийг хязгаарлаж, хортой скрипт тарихаас сэргийлдэг.
**CSP тохируулах:**
Серверийн талд CSP хариултын толгойг тохируулах, жишээлбэл:
```
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:;
```
**4. Кодын эмзэг байдлыг тогтмол сканнердах:**
Snyk, OWASP ZAP гэх мэт мэргэжлийн аюулгүй байдлын сканнердах хэрэгслийг ашиглан кодын аюулгүй байдлын цоорхойг тогтмол сканнердаж, цаг тухайд нь засах.
**5. SecretFinder гэх мэт хэрэгслийг ашиглан эмзэг мэдээллийн алдагдлыг илрүүлэх:**
Twitter дээр @@chc_course-ийн дурдсанчлан SecretFinder нь JavaScript файлд API түлхүүр, хандалтын токен гэх мэт эмзэг мэдээллийн алдагдал байгаа эсэхийг илрүүлэхэд ашиглаж болох Python хэрэгсэл юм.
**Алхамууд:**
1. SecretFinder суулгах: `pip install secretfinder`
2. SecretFinder ашиглан JavaScript файлыг сканнердах: `python secretfinder.py -i your_javascript_file.js -o output.txt`
3. Эмзэг мэдээллийн алдагдал байгаа эсэхийг шалгахын тулд гаралтын файлыг шалгана уу.
**6. HTTPS протокол ашиглах:**
Вэбсайт нь HTTPS протокол ашиглаж байгаа эсэхийг шалгаж, дамжуулсан өгөгдлийг шифрлэж, завсрын халдлагаас сэргийлнэ.
## Гурав. Гүйцэтгэлийг оновчтой болгох: JavaScript кодын ажиллах үр ашгийг дээшлүүлэх
JavaScript кодын гүйцэтгэл нь хэрэглэгчийн туршлагад шууд нөлөөлдөг. JavaScript кодын гүйцэтгэлийг оновчтой болгосноор вэбсайтын ачаалах хурд болон хариу өгөх хурдыг нэмэгдүүлэх боломжтой.
**1. HTTP хүсэлтийг багасгах:**
Хуудсыг ачаалахад шаардлагатай HTTP хүсэлтийг аль болох багасгах, жишээлбэл CSS болон JavaScript файлуудыг нэгтгэх, CSS Sprites ашиглах гэх мэт.
**2. JavaScript кодыг шахах:**
UglifyJS, Terser гэх мэт хэрэгслийг ашиглан JavaScript кодыг шахаж, файлын хэмжээг багасгах.
**3. Чухал бус нөөцийг хойшлуулах:**
JavaScript кодын ачааллыг оновчтой болгох гарын авлага
Энэхүү гарын авлага нь JavaScript-н ачааллыг оновчтой болгох зарим зөвлөмжийг агуулна.
**4. CDN ашиглах:**
Статик нөөцийг (жишээ нь JavaScript файл, CSS, зураг гэх мэт) CDN (контент түгээх сүлжээ)-д байршуулж, нөөцийн ачааллын хурдыг нэмэгдүүлнэ.
**5. Санах ойн алдагдалаас зайлсхийх:**
Ашиглахаа больсон объект болон хувьсагчийг цаг тухайд нь суллаж, санах ойн алдагдалаас зайлсхийнэ.
**6. DOM үйлдлийг оновчтой болгох:**
DOM үйлдлийг аль болох багасгаж, DOM-ын байнга хийгдэх үйлдлээс үүдэлтэй хуудасны гацалтаас зайлсхийнэ. documentFragment-ийг ашиглан DOM-ыг бөөнөөр нь шинэчилж, гүйцэтгэлийг сайжруулна.
**7. Web Workers ашиглах:**
Нарийн төвөгтэй тооцооллын хувьд Web Workers-ийг ашиглан үндсэн урсгалыг хаахаас зайлсхийж, арын урсгалд гүйцэтгэж болно.
**8. Vanilla JavaScript ашиглах:**
Twitter дээр @@mannay-ийн дурдсанаар зарим энгийн тохиолдолд уугуул JavaScript (Vanilla JavaScript) ашиглах нь фрэймворк ашиглахаас илүү үр дүнтэй байж болно.
**9. Drag & Drop оновчлол**
Twitter дээр @@midudev-ийн дурдсанаар `@atlaskit/pragmatic-drag-and-drop` чирэх үйлдлийн хувьд хөнгөн жинтэй, өндөр хүчин чадалтай санг сонгох нь гүйцэтгэлийг оновчтой болгох чухал хэрэгсэл юм.
Дөрөв. Суралцаж байх: JavaScript-н ирээдүйг тэврэх
JavaScript хэл болон экосистем нь байнга хөгжиж байдаг. JavaScript хөгжүүлэгчийн хувьд өрсөлдөх чадвартай байхын тулд шинэ технологи, хэрэгслийг байнга суралцах шаардлагатай.
**1. Хамгийн сүүлийн үеийн технологийн чиг хандлагыг дагах:**
JavaScript нийгэмлэгийн хамгийн сүүлийн үеийн технологийн чиг хандлагыг дагах, жишээлбэл шинэ ECMAScript стандарт, шинэ фрэймворк болон сан гэх мэт.
**2. Нээлттэй эхийн төсөлд оролцох:**
Нээлттэй эхийн төсөлд оролцох нь бусад хөгжүүлэгчдийн туршлагаас суралцаж, програмчлалын ур чадвараа дээшлүүлэх боломжтой.
**3. Сайн кодыг унших:**
Сайн кодыг унших нь програмчлалын сайн хэв маяг, дизайны загвараас суралцах боломжтой.
**4. Дадлага:**
Twitter дээр олон хэрэглэгчийн хуваалцсан холбоосуудын дагуу төсөл дуусгах нь суралцах хамгийн сайн арга юм. Жижиг тоглоом эсвэл нарийн төвөгтэй вэб програм байсан ч дадлага нь JavaScript-н мэдлэг, ур чадварыг жинхэнэ утгаар нь ойлгож эзэмшихэд тусална.
Дүгнэлт
Энэхүү нийтлэл нь JavaScript хөгжүүлэгчдэд зориулсан хэрэгтэй зөвлөмжүүд болон шилдэг туршлагуудыг алдаа засах арга техник, аюулгүй кодчилол, гүйцэтгэлийг оновчтой болгох зэрэг асуудлуудаар дамжуулан хүргэж байна. Эдгээр зөвлөмжүүд нь илүү бат бөх, аюулгүй, үр ашигтай JavaScript код бичих, хөгжүүлэлтийн үр ашгийг дээшлүүлэх, хэрэглэгчийн туршлагыг сайжруулахад тусална гэж найдаж байна. JavaScript хөгжүүлэгчийн хувьд хурдацтай хөгжиж буй Web хөгжүүлэлтийн салбарт өрсөлдөх чадвартай байхын тулд байнга суралцаж, дадлага хийх шаардлагатай.
