JS метод Object.atob()

Загальний опис

Функція atob() є вбудованою глобальною функцією, що використовується для декодування даних, закодованих за допомогою методу Base64. Ця функція приймає один аргумент - рядок, закодований у форматі Base64, і повертає декодований рядок. Застосування atob() можна зустріти в сценаріях, де необхідно декодувати дані, отримані в форматі Base64, наприклад, при роботі з API, які повертають закодовані дані, або при обробці даних, які були закодовані для передачі через URL.

Виклик atob() виглядає досить просто. Наприклад, якщо потрібно декодувати рядок SGVsbG8gV29ybGQh, виклик функції буде наступним:

let decodedString = atob('SGVsbG8gV29ybGQh');
console.log(decodedString); // Виводить: Hello World!

Цей рядок був спочатку закодований в Base64, і atob() повертає його у вигляді звичайного тексту.

Однак, важливо розуміти, що atob() призначена лише для обробки рядків, закодованих у форматі Base64, і може викинути помилку, якщо вхідний рядок містить символи, які не відповідають цьому формату. Тому перед використанням atob() важливо переконатися, що рядок дійсно закодований у Base64.

У більш складних сценаріях atob() може використовуватися для декодування даних, отриманих у вигляді бінарних файлів або інших форматів, які були перетворені у рядок Base64. Наприклад, можна декодувати зображення, закодоване у Base64, і відображати його на веб-сторінці:

let base64Image = 'data:image/png;base64,iVBORw0KGgo...';
let image = new Image();
image.src = atob(base64Image.split(',')[1]);
document.body.appendChild(image);

У цьому прикладі base64Image містить зображення у форматі Base64, яке спочатку розділяється на частини (відокремлення метаданих про формат), а потім декодується і вставляється на сторінку як зображення.

Важливо пам'ятати, що atob() не є безпечною функцією з точки зору безпеки. Оскільки вона не здійснює жодної перевірки аутентичності або цілісності вхідних даних, її використання з даними, отриманими з ненадійних джерел, може становити ризик. Також варто враховувати, що Base64 не є механізмом шифрування і не повинен використовуватися для захисту конфіденційних даних.

Порада:	Переконайтеся, що вхідний рядок для методу `atob()` є коректно закодованим у форматі base-64. Якщо переданий рядок не відповідає цьому формату, виклик методу призведе до помилки. Наприклад, використання `atob("SGVsbG8gV29ybGQ=")` правильно декодує рядок "Hello World", але передача некоректного рядка спричинить помилку.
Порада:	Врахуйте, що вихідний рядок методу `atob()` завжди буде у форматі ASCII. Тому, якщо оригінальний закодований текст містив символи поза ASCII-діапазоном, вони будуть втрачені або неправильно інтерпретовані після декодування. Це важливо розуміти при роботі з міжнародними або багатомовними даними.
Порада:	Використовуйте метод `atob()` для декодування даних, які були закодовані у форматі base-64 на стороні сервера або іншого клієнта. Це може бути корисним, наприклад, при отриманні закодованих даних через API або при обробці даних, збережених у вигляді рядків у локальному сховищі.
Порада:	Зверніть увагу на безпеку при роботі з `atob()`. Оскільки цей метод використовується для декодування даних, важливо переконатися, що декодовані дані не містять шкідливого коду або не використовуються в уразливих контекстах. Завжди перевіряйте джерело даних та їхній вміст перед декодуванням.

Синтаксис

atob(encodedData)

Параметри

*encodedData: Рядок у форматі двійкового коду (тобто рядок, в якому кожен символ розглядається як байт двійкових даних) із закодованими даними у форматі base64.

Return

string: Повертає рядок ASCII, що містить розкодовані дані з encodedData.

Переглядачі

Переглядач
	4	1	3	10.5	12

Переглядач
	37	18	4	1

Переглядач
	16.0.0	1.0

Приклади

У цьому прикладі користувач може ввести закодований рядок Base64, натиснути кнопку "Декодувати", і результат декодування буде відображений під кнопкою. Якщо введено некоректний Base64 рядок, буде виведено повідомлення про помилку.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/LYqJGRg">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми беремо закодований рядок encodedText, використовуємо метод atob() для його декодування і отримуємо оригінальний текст "Hello World!".

// Закодований рядок у форматі Base64
const encodedText = "SGVsbG8gV29ybGQh"; // Це представляє "Hello World!" закодований в Base64

// Використання методу atob() для декодування тексту
const decodedText = atob(encodedText);

// Виведення результуючого рядка
console.log(decodedText); // Виведе: "Hello World!"

У цьому прикладі ми беремо закодоване зображення у форматі Base64, створюємо новий об'єкт <img> і встановлюємо закодоване зображення як джерело зображення для цього об'єкту. Потім ми додаємо <img> до DOM сторінки, щоб відобразити зображення на веб-сторінці.

// Закодоване зображення у форматі Base64
const encodedImage = "data:image/png;base64,iVBORw0KG..."; // Приклад закодованого зображення

// Створення нового об'єкту <img> для відображення зображення
const imgElement = document.createElement("img");

// Встановлення декодованого зображення як джерела зображення для <img>
imgElement.src = encodedImage;

// Додавання <img> до DOM для відображення зображення на сторінці
document.body.appendChild(imgElement);

JS довідник

JavaScript

Наповнення JS розділу