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

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

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

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> ссылается на прокси-путь:

<img src="/image" alt="Защищённое изображение"/>

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

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

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

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

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

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 может перехватывать запросы и вставлять в них необходимые заголовки:

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:

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 хранят в себе важные данные и требуют особого внимания при управлении:

// Серверная сторона: генерация 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> — это ночной клуб с жёсткой охраной:

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

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

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

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

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

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

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

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 для управления веб-авторизациями.