Добавление заголовка Authorization в <img src> в Vue.js

Пройдите тест, узнайте какой профессии подходите
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Чтобы передать заголовок авторизации при отображении изображения, используйте серверную прокси-обработку. С использованием Node.js и Express изображение загружается под вашими учётными данными и передаётся клиенту:

JS
Скопировать код
app.get('/image', async (req, res) => {
  const imgResponse = await fetch('IMAGE_URL', { headers: { 'Authorization': 'Bearer TOKEN' } });
  res.type(imgResponse.headers.get('content-type'));
  imgResponse.body.pipe(res);
});

В HTML атрибут src элемента <img> ссылается на прокси-путь:

HTML
Скопировать код
<img src="/image" alt="Защищённое изображение"/>

Следуйте указанию, заменив 'IMAGE_URL' на реальный URL изображения и 'TOKEN' на ваш токен. Сервер здесь выступает в роли посредника, обеспечивая передачу изображения клиенту, при этом не раскрывая конфиденциальные данные.

Пошаговый план для смены профессии

Использование JavaScript для осуществления вашей секретной миссии

Если вам нужно больше контроля на стороне клиента и вы хотите избежать использования серверного прокси, рассмотрите следующие подходы:

Fetch API: Ваш секретный агент для получения изображений

Fetch API позволяет запрашивать изображения с заданными заголовками:

JS
Скопировать код
fetch('IMAGE_URL', {
  headers: {
    'Authorization': 'Bearer TOKEN'
  }
})
.then(response => response.blob())
.then(blob => {
  const imageUrl = URL.createObjectURL(blob);
  document.getElementById('image').src = imageUrl;
});

Blob — это файл в бинарном формате, который можно преобразовать в URL для отображения через тег <img>.

Service Worker: Перехват запросов

Service Worker может перехватывать запросы и вставлять в них необходимые заголовки:

JS
Скопировать код
self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('/image')) {
    const newHeaders = new Headers(event.request.headers);
    newHeaders.append('Authorization', 'Bearer TOKEN');
    const modRequest = new Request(event.request, { headers: newHeaders });
    event.respondWith(fetch(modRequest));
  }
});

С помощью Service Worker можно управлять загрузкой ресурсов.

Изображения в формате base64 через data URI

Меньшие по размеру изображения можно преобразовать в base64-кодировку и использовать в виде data URI:

JS
Скопировать код
fetch('IMAGE_URL', {
  headers: {
    'Authorization': 'Bearer TOKEN'
  }
})
.then(response => response.arrayBuffer())
.then(buffer => {
  const base64Flag = 'data:image/jpeg;base64,';
  const imageStr = arrayBufferToBase64(buffer);
  document.getElementById('image').src = base64Flag + imageStr;
});

Однако большие изображения в этом формате могут ухудшить производительность, поэтому используйте данный метод вдумчиво.

JSON Web Tokens (JWT)

JWT хранят в себе важные данные и требуют особого внимания при управлении:

JS
Скопировать код
// Серверная сторона: генерация nonce
app.get('/generate-nonce', (req, res) => {
  const nonce = createNonce(req.user);
  res.json({ nonce });
});

// Клиентская сторона: получение изображения с nonce
fetch('/path-to-image?nonce=' + nonce).then(response => /* ... */);

Проверка nonce при каждом запросе изображения повышает безопасность.

Визуализация

Представьте, что тег <img> — это ночной клуб с жёсткой охраной:

Markdown
Скопировать код
       🚪  
     -----
img | 👁️  | src="club_link.jpg"   // Попытка пройти без пропуска
     -----
       🚪

Заголовок авторизации — это пропуск для входа в клуб:

Markdown
Скопировать код
    ---------------------
    | ПРОПУСК: "Bearer myToken" |
    ---------------------
       🚪  
     -----
img | 👁️  | src="club_link_with_pass.jpg"   // С пропуском вход разрешён!
     -----
       🚪

Другие секретные тактики, которые стоит рассмотреть

Важно владеть широким спектром инструментов для работы с заголовками авторизации в контексте управления изображениями.

Использование axios вместо fetch

Axios — это библиотека для HTTP-запросов, обеспечивающая удобные функции и продвинутую обработку ошибок:

JS
Скопировать код
axios.get('IMAGE_URL', {
    responseType: 'arraybuffer',
    headers: {
        'Authorization': `Bearer ${TOKEN}`
    }
})
.then(response => {
    const base64 = Buffer.from(response.data, 'binary').toString('base64');
    document.getElementById('image').src = `data:image/jpg;base64,${base64}`;
});

Axios даёт больший контроль и его удобно использовать.

Промежуточное ПО для скрытой работы

Промежуточное ПО на сервере может преобразовать учётные данные из кук в заголовок авторизации. Промежуточное ПО Express используется для организации серверных действий.

Расширение инструментария

Для разработчиков полезно понимать детали работы с fetch API, Service Workers, кодировкой Base64, а также безопасное использование JWT и nonce.

Полезные материалы

  1. Использование HTTP cookie – HTTP | MDN — ознакомьтесь с работой кук для веб-аутентификации.
  2. Base64 Image Encoder — инструмент для преобразования изображений в Base64.
  3. GitHub – JakeChampion/fetch: Полифил для window.fetch JavaScript. — руководство по включению заголовков в запросы fetch.
  4. CORS Enabled Image – W3C Wiki — введение в использование изображений с различных источников.
  5. Data URLs – HTTP | MDN — использование Data URLs в HTTP.
  6. Базовая HTTP-аутентификация – Wikipedia — основы базовой HTTP-аутентификации.
  7. RFC 6749 – Основы авторизации OAuth 2.0 — стандарт OAuth 2.0 для управления веб-авторизациями.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Как передать заголовок авторизации при загрузке изображения в Vue.js?
1 / 5