Adicionando Cabeçalho de Autorização em <img src> no Vue.js
Visão Geral Rápida
Para enviar um cabeçalho de autorização ao exibir uma imagem, utilize o processamento de proxy do lado do servidor. Usando Node.js e Express, a imagem é buscada com suas credenciais e encaminhada ao cliente:
app.get('/imagem', async (req, res) => {
const imgResponse = await fetch('URL_DA_IMAGEM', { headers: { 'Authorization': 'Bearer TOKEN' } });
res.type(imgResponse.headers.get('content-type'));
imgResponse.body.pipe(res);
});Em seu HTML, defina o atributo src do elemento <img> para apontar para o caminho do proxy:
<img src="/imagem" alt="Imagem Protegida" />Por favor, substitua 'URL_DA_IMAGEM' pela URL real da imagem e 'TOKEN' pelo seu token. O servidor atua como um mediador, entregando a imagem ao cliente sem divulgar dados sensíveis.
Usando JavaScript para Cumprir Sua Missão Secreta
Se você precisar de mais controle do lado do cliente e quiser evitar usar um proxy de servidor, considere as seguintes abordagens:
Fetch API: Seu Agente Secreto para Buscar Imagens
A Fetch API permite que você solicite imagens com cabeçalhos específicos:
fetch('URL_DA_IMAGEM', {
headers: {
'Authorization': 'Bearer TOKEN'
}
})
.then(response => response.blob())
.then(blob => {
const imageUrl = URL.createObjectURL(blob);
document.getElementById('imagem').src = imageUrl;
});Um Blob é um arquivo em formato binário que pode ser convertido em uma URL para exibição via uma tag <img>.
Service Worker: Interceptando Solicitações
Os Service Workers podem interceptar solicitações e inserir os cabeçalhos necessários:
self.addEventListener('fetch', event => {
if (event.request.url.endsWith('/imagem')) {
const newHeaders = new Headers(event.request.headers);
newHeaders.append('Authorization', 'Bearer TOKEN');
const modRequest = new Request(event.request, { headers: newHeaders });
event.respondWith(fetch(modRequest));
}
});Com um Service Worker, você pode gerenciar o carregamento de recursos.
Imagens Base64 via data URI
Imagens menores podem ser convertidas para codificação base64 e usadas como data URI:
fetch('URL_DA_IMAGEM', {
headers: {
'Authorization': 'Bearer TOKEN'
}
})
.then(response => response.arrayBuffer())
.then(buffer => {
const base64Flag = 'data:image/jpeg;base64,';
const imageStr = arrayBufferToBase64(buffer);
document.getElementById('imagem').src = base64Flag + imageStr;
});No entanto, imagens maiores nesse formato podem degradar o desempenho, então use esse método com cautela.
Tokens JWT (JSON Web Tokens)
Os JWTs contêm dados importantes e requerem gerenciamento cuidadoso:
// Lado do servidor: Gerando nonce
app.get('/gerar-nonce', (req, res) => {
const nonce = createNonce(req.user);
res.json({ nonce });
});
// Lado do cliente: Buscando imagem com nonce
fetch('/caminho-para-imagem?nonce=' + nonce).then(response => /* ... */);Validar o nonce com cada solicitação de imagem melhora a segurança.
Visualização
Imagine a tag <img> como uma boate com segurança rigorosa:
🚪
-----
img | 👁️ | src="link_da_boate.jpg" // Tentativa de entrada sem ingresso
-----
🚪O cabeçalho de autorização é como um ingresso para entrar na boate:
---------------------
| INGRESSO: "Bearer meuToken" |
---------------------
🚪
-----
img | 👁️ | src="link_da_boate_com_ingresso.jpg" // Entrada permitida com ingresso!
-----
🚪Outras Táticas Secretas que Valem a Pena Considerar
É importante ter um conjunto amplo de ferramentas para lidar com cabeçalhos de autorização no contexto da gestão de imagens.
Usando Axios em vez de Fetch
Axios é uma biblioteca para fazer requisições HTTP, oferecendo recursos convenientes e um tratamento de erros melhorado:
axios.get('URL_DA_IMAGEM', {
responseType: 'arraybuffer',
headers: {
'Authorization': `Bearer ${TOKEN}`
}
})
.then(response => {
const base64 = Buffer.from(response.data, 'binary').toString('base64');
document.getElementById('imagem').src = `data:image/jpg;base64,${base64}`;
});Axios oferece maior controle e é amigável ao usuário.
Middleware para Operações Ocultas
Middleware do lado do servidor pode transformar credenciais de cookies em cabeçalhos de autorização. Middleware do Express é usado para organizar ações do lado do servidor.
Expandindo o Conjunto de Ferramentas
Para desenvolvedores, é benéfico entender as complexidades da Fetch API, Service Workers, codificação Base64, bem como o uso seguro de JWTs e nonces.
Recursos Úteis
- Usando Cookies HTTP - HTTP | MDN — Aprenda sobre cookies para autenticação na web.
- Codificador de Imagens Base64 — Uma ferramenta para converter imagens em Base64.
- GitHub - JakeChampion/fetch: Polyfill para window.fetch JavaScript — Guia para incluir cabeçalhos em requisições Fetch.
- Imagem Habilitada para CORS - W3C Wiki — Introdução ao uso de imagens de várias fontes.
- URLs de Dados - HTTP | MDN — Usando URLs de Dados em HTTP.
- Autenticação HTTP Básica - Wikipedia — Fundamentos da autenticação HTTP básica.
- RFC 6749 - O Framework de Autorização OAuth 2.0 — A norma OAuth 2.0 para gerenciamento de autorizações web.