Добавление заголовка Authorization в <img src> в Vue.js
#Веб-разработка #Web API #VueБыстрый ответ
Чтобы передать заголовок авторизации при отображении изображения, используйте серверную прокси-обработку. С использованием 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" // Попытка пройти без пропуска
-----
🚪
Заголовок авторизации — это пропуск для входа в клуб:
```markdown
| ПРОПУСК: "Bearer myToken" |
🚪
img | 👁️ | src="club
🚪
## Другие секретные тактики, которые стоит рассмотреть
Важно владеть широким спектром инструментов для работы с заголовками авторизации в контексте управления изображениями.
### Использование axios вместо fetch
Axios — это библиотека для HTTP-запросов, обеспечивающая удобные функции и продвинутую обработку ошибок:
javascript 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](https://developer.mozilla.org/ru/docs/Web/HTTP/Cookies) — ознакомьтесь с работой кук для веб-аутентификации.
2. [Base64 Image Encoder](https://www.base64-image.de/) — инструмент для преобразования изображений в Base64.
3. [GitHub – JakeChampion/fetch: Полифил для window.fetch JavaScript.](https://github.com/JakeChampion/fetch#sending-cookies) — руководство по включению заголовков в запросы fetch.
4. [CORS Enabled Image – W3C Wiki](https://www.w3.org/wiki/CORS_Enabled_Image) — введение в использование изображений с различных источников.
5. [Data URLs – HTTP | MDN](https://developer.mozilla.org/ru/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) — использование Data URLs в HTTP.
6. [Базовая HTTP-аутентификация – Wikipedia](https://ru.wikipedia.org/wiki/HTTP-аутентификация) — основы базовой HTTP-аутентификации.
7. [RFC 6749 – Основы авторизации OAuth 2.0](https://datatracker.ietf.org/doc/html/rfc6749) — стандарт OAuth 2.0 для управления веб-авторизациями.
Владимир Лисицын
разработчик фронтенда