Часті питання про продуктивність і безпеку: повільно, гальмує й недовірені дані

Коротко: спершу діагностуйте за симптомом — розбір, відображення чи памʼять — потім проходьте порядок виправлень: скоротіть обсяг даних, припиніть глибоке клонування, перенесіть розбір у Worker із віртуальною прокруткою й потоково обробляйте все понад 50 МБ. Для недовіреного вводу обмежте розмір і глибину вкладеності, перш ніж фільтрувати __proto__, constructor і prototype.

«JSON повільний» неточно в девʼяти випадках із десяти; насправді повільним зазвичай є відображення, глибоке клонування або неправильний порядок операцій.

1. Чому повільно

Розбір великого файлу JSON повільний. Як його оптимізувати?

Спершу локалізуйте вузьке місце, потім говоріть про оптимізацію. Етапи різняться на кілька порядків:

Тож порядок оптимізації має бути таким:

1. Скоротіть обсяг даних: нехай API пагінує, повертає лише потрібні поля й увімкніть gzip/brotli;
2. Уникайте глибокого клонування: дивіться наступний розділ; це найпоширеніша прихована ціна;
3. Ліниве відображення: у деревному вигляді відображайте лише розгорнуті рівні, замість генерувати десятки тисяч DOM-вузлів одразу;
4. Потокова обробка: не розбирайте все одразу, коли дані перевищують 10 МБ.

Якщо вузьке місце справді JSON.parse, це означає, що дані вже десятки МБ чи більше, і правильний хід — потоковий парсер:

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

// Обробляйте елементи масиву один за одним; використання памʼяті не залежить від загального розміру
const pipeline = fs.createReadStream('big.json')
  .pipe(parser())
  .pipe(streamArray());

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

JSON на десятки МБ валить браузер у момент відкриття. Що тепер?

Спершу підтвердьте, чи він «валить», чи «замерзає». Ці два потребують цілком різного поводження:

• Замерзає: вкладка показує «Page unresponsive» і може відновитися за десятки секунд. Причина — довгі задачі, що насичують головний потік;
• Валить: вкладка перетворюється на «Aw, Snap», зазвичай вичерпання памʼяті (OOM).

Так чи інакше не обробляйте це на головному потоці. Перенесіть розбір у Web Worker:

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

Worker розвʼязує «UI не замерзає», а не стелю памʼяті. Вкладка браузера зазвичай має доступні 1–4 ГБ; JSON на 200 МБ, розібраний у обʼєкти, може зайняти 1 ГБ чи більше (кожна пара ключ-значення несе накладні витрати обʼєкта), а з відображенням згори легко сягає ліміту.

Справжнє рішення — ніколи не завантажувати все:

Чи є 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 стає рядком
//   nan: null,                          // NaN стає null
//   nested: { a: 1 }                    // лише цей рівень правильний
// }
// fn і undef зникають, map стає {}

Список проблем:

Сучасні браузери мають structuredClone, що підтримує Date, Map, Set і циклічні посилання, але не функції:

复制const copy = structuredClone(source);

Якщо це лише поверхневе злиття конфігурації, оператор розширення — найдешевший варіант: { ...config, timeout: 3000 }.

Чому розгортання деревного вигляду так гальмує?

Бо кожен вузол — DOM-елемент, і щойно кількість вузлів сягає десятків тисяч, ціна компонування браузера вибухає.

JSON на 10 МБ може містити 50 тис.–100 тис. листових вузлів. Навіть якщо ви відображаєте лише видиму область, побудова DOM один раз займає сотні мілісекунд до секунд, а кожна наступна прокрутка спричиняє перекомпонування.

Правильний підхід:

1. Віртуальна прокрутка: відображайте лише кілька десятків рядків усередині вікна перегляду й повторно використовуйте DOM-вузли під час прокрутки;
2. Згортання за замовчуванням: розгортайте лише перші два рівні й відображайте глибші рівні на вимогу;
3. Обмежте масштаб відображення: понад 10 тис. вузлів покажіть «Дані завеликі, скористайтеся пошуком для локалізації» замість примусового відображення.

Саме тому редактор на цьому сайті коректно деградує для великих файлів — не тому, що технічно не може їх відобразити, а тому, що відображення було б непридатним.

2. Чому його атакують

Як працює інʼєкція __proto__?

Забруднення прототипу. Атакувальник конструює JSON із ключем __proto__; якщо ваш код зливає його в обʼєкт без фільтрації, він перезаписує Object.prototype і впливає на кожен обʼєкт у середовищі виконання.

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

// Небезпечний код: рекурсивне злиття без перевірки назв ключів
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 — кожен обʼєкт забруднено

Ключовий факт: сам 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. Обмежте кількість ключів: запобігає атакам колізій хешу й підсиленню памʼяті;
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).

Як трапляється XSS через JSON?

Сам JSON не є HTML і не виконується. XSS трапляється в точці, де «значення JSON склеюється в HTML».

Три поширені шляхи:

Третій найтонший. JSON.stringify не екранує <, тож дані, що містять </script><script>alert(1)</script>, можуть передчасно закрити тег script:

复制const data = { name: '</script><script>alert(1)</script>' };
// Вивід: <script>var d = {"name":"</script><script>alert(1)</script>"}</script>

Виправлення — перетворити небезпечні символи на Unicode-escape:

复制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 валиться в деяких реалізаціях, коли глибина завелика, а серіалізація так само зриває стек. [[[[...]]]] розміром 1 КБ достатньо, щоб покласти незахищений парсер.

Розумний поріг залежить від бізнесу:

Що таке викрадення JSON?

Історична вразливість: ранні браузери дозволяли міжсайтовому <script src> завантажувати й виконувати JSON, і атакувальники крали дані, перевизначивши конструктор Array або Object.prototype.__defineSetter__.

Сучасні захисти досить повні:

• Браузери більше не дозволяють викрадати масивні літерали через __defineSetter__;
• Правильний Content-Type: application/json запобігає виконанню скрипта;
• X-Content-Type-Options: nosniff запобігає визначанню MIME.

Старіші системи все ще несуть залишковий ризик. Практична порада: використовуйте обʼєкт на верхньому рівні, а не голий масив. Обгортка на кшталт {"data": [...]} не дає відповіді бути валідним твердженням JavaScript ({ трактується як блок коду), блокуючи викрадення на синтаксичному рівні.

Які ризики логування JSON?

Три:

1. Чутлива інформація, записана на диск: номери телефонів, номери ID, токени й паролі в чистому вигляді потрапляють у систему логування, що зазвичай має слабші дозволи й довше зберігання;
2. Інʼєкція в лог: значення JSON, що містить переведення рядків і підроблені префікси логу, розбиває один запис на кілька й забруднює слід аудиту;
3. Вибух розміру: запис усієї 10-мегабайтної відповіді в лог швидко заповнює систему логування.

Підхід:

复制// Редагуйте й обрізайте перед логуванням
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) самі екранують переведення рядків, але редагування й обрізання все ще ваша робота.

3. Стислий довідник