SEO e Segurança

Como Impedir Hotlink nas Imagens do seu Blog ou Site – via .htaccess

Anúncios Google

Hotlink é um problema arcaico; nos velhos tempos de hospedagens com tráfego super-restrito era ainda mais grave, mas tem gente hoje meio que não ligando em serem drenados.

Qual o problema se outro site criar um link direto para uma imagem do meu? Afinal, com hospedagens generosas que oferecem “transferência ilimitada”, não faz tanta diferença, não é mesmo?

Não, não é. Por mais que os serviços gostem do termo “ilimitado”, sabemos que a história não é bem assim. Abusar resulta em sites fora do ar, e em hospedagens compartilhadas, até num belo chute (exclusão de seus arquivos e cancelamento da conta). E uma imagem pode sim contribuir bastante no consumo de tráfego, especialmente se for publicada em lugares de grande movimento e não estiver bem otimizada.

“Mas tem como impedir a imagem de ser linkada fora do meu site?” A resposta é simples, e com uma edição pequena no arquivo .htaccess do seu servidor, qualquer larápio de banda terá uma surpresa ao fazer hotlink.

O que é hotlink?

Quando alguém visita seu blog, gosta de uma imagem (ou outro arquivo qualquer) e quer postar em outro lugar, ele clica com o botão direito sobre ela, seleciona “Copiar url”, e usa esse url para publicá-la. Isso é hotlink.

É como “gatonet”, em que o cara puxa uns fios para usar o serviço (hospedagem) pago por outra pessoa (você). Além de muito deselegante, é crime. Simples assim, furto.

Qual a surpresa?

Depende de você. Ao tentar repostar uma imagem do seu blog copiando seu url, o que aparecerá fora de seus domínios será uma outra à sua escolha. Você pode colocar uma coisa padrão, tipo uma advertência “não pratique hotlink“. Há os adeptos de um tratamento mais radical, indicando frases como “sou um ladrãozinho e roubei essa imagem do site tal“, imagens chocantes ou repulsivas, mas não curto muito, afinal tem quem faça na ingenuidade. Prefiro um anúncio.

Até porque quando notar que não pode linkar direto, o copiador fará o “mais certo” (dependendo do caso, claro): baixar a imagem e subir para outro servidor, e então postar onde quiser.

As soluções a seguir envolvem a edição do arquivo .htaccess no servidor, e se você usa planos simples de hospedagem compartilhada, não terá como fazer. Caso contrário, o arquivo fica na pasta raíz do site (o primeiro nível na hierarquia). No WordPress, o .htaccess fica no mesmo nível de arquivos como wp-admin.php, wp-config.php, etc.

O .htaccess mal configurado pode tornar seu site inacessível. Não mexa em nada lá se não souber o que está fazendo!

Redirecionar

Para redirecionar a tentativa de hotlink de uma imagem para outra, adicione o seguinte no .htaccess:

# hotlink aqui não
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+.)?seublog.com.br/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*.(jpe?g|gif|bmp|png)$ http://i.imgur.com/aVdudeF.png [L]
#fim hotlink

Decifrando o código:

Linha 1: um comentário (#) simpático que não faz parte do código, portanto é opcional. Qualquer linha iniciada com o sinal # não faz efeito.

Linha 2: indica ao servidor que deve usar o módulo mod_rewrite do Apache para reescrever um trecho do pedido (o que chama a imagem original). Se seu servidor está com o mod_rewrite off, precisa ativar (normalmente não precisa, mas se não funcionar de jeito nenhum, contate sua empresa de hospedagem).

Linha 3: determina quais endereços terão liberdade para acessar as imagens. No caso, coloque o endereço do seu site, usando uma barra inversa antes dos pontos. Se houver mais de um domínio na raíz do servidor (vários blogs), pode escrever regras similares com cada url liberado.

O NC é uma flag do rewrite que significa NoCase, assim não fará diferença se o url está em letras maiúsculas ou minúsculas – sem ele, um hotlink usando o url do seu site com maiúsculas funcionaria normalmente.

Linha 4: permite que visitas sem informação de cabeçalho (navegador, url, etc) fiquem de fora da regra. Se alguém navegar via proxy, por exemplo, conseguirá ver as imagens pois seu servidor “não sabe” se o pedido veio de alguém liberado ou não. É como um porteiro com a lista de convidados: esses caras não tem identificação, então ele não sabe se deve barrar, e deixa entrar. Se quiser bloqueá-los também, remova ou comente (colocando um # no início) a linha.

Linha 5: indica os tipos de arquivo bloqueados com acesso restrito. No final, mais uma flag, a L de last (para encerrar a regra caso ela entre em ação, evitando um loop).

Assim, qualquer tentativa de linkar suas imagens nos formatos jpg, jpeg, gif, bmp ou png, vai resultar nisso:

HOTLINK não

Se usa outros formatos de imagem como tif e svg, é só adicionar entre os parênteses da última linha, separando com a barra vertical |. Se quiser trocar a imagem, mude o endereço sugerido (http://i.imgur.com/aVdudeF.png). Atenção nesse caso: se a imagem substituta estiver no seu próprio servidor,  não vai adiantar, estão todas bloqueadas! Hospede-a em outro lugar como no imgur, ou use um tipo que não esteja bloqueado (tif, por exemplo, funcionaria).

Redirecionar em alguns sites

Se quiser que só alguns sites não possam fazer hotlink, tipo MySpace, etc. Não testei.

RewriteEngine On
RewriteCond %{HTTP_REFERER} ^http://(.+.)?myspace.com/ [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://(.+.)?blogspot.com/ [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://(.+.)?livejournal.com/ [NC]
RewriteRule .*.(jpe?g|gif|bmp|png)$ http://i.imgur.com/aVdudeF.png [L]

Fonte: Altlab

Bloquear

Se prefere simplesmente bloquear o acesso à imagem:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)?seusite.com.br/.*$ [NC]
RewriteRule .*.(jpe?g|gif|bmp|png)$ – [F]

Assim, vai aparecer aquele ícone de imagem não encontrada no lugar. Isso serve pra qualquer tipo de arquivo que queira bloquear, como swf, mp3, etc.

Liberar aos Buscadores

Com os métodos de redirecionar ou bloquear, até a busca por imagens do Google (e afins) será afetada. Você pode querer isso ou não. Se quiser exibir as imagens em buscadores, não esqueça de acrescentar mais liberações:

RewriteCond %{HTTP_REFERER} !search?q=cache [NC]
RewriteCond %{HTTP_REFERER} !google. [NC]
RewriteCond %{HTTP_REFERER} !yahoo. [NC]
RewriteCond %{HTTP_REFERER} !bing. [NC]

Bloquear Geral?

Você é muito cruel e quer bloquear todo tipo de acesso às suas imagens, menos no seu blog? Tipo impedir até que sigam o url dela na barra de endereço?

O código é esse:

Options -Indexes
Options +FollowSymlinks
deny from all

Nesse caso, não coloque no .htaccess do blog WordPress (que fica na raíz do site) mas num arquivo com o mesmo nome, dentro da pasta de imagens, geralmente no caminho wp-content/uploads. Vale para bloquear acesso externo a qualquer tipo de arquivo em uma pasta.

Isso pode não ser muito interessante, já que até ferramentas de busca não acharão suas imagens. Dependendo da configuração do seu template e dos scripts que usa, pode causar erro também em imagens internas. Use por sua conta e risco.

Marca d’água no hotlink

ATENÇÃO: é possível que em algum ponto de seus termos de uso o Google encontre uma brecha para punir quem adotar a prática descrita a seguir… ou não. Estou usando em um dos meus blogs menores, como teste. Fica a seu total critério e risco usar. Não me responsabilizo.

Leia a atualização no final.

No começo do ano o Google fez a graça de mudar seu sistema de busca por imagens, ferrando muita gente que recebia visitas daí. Isso porque o novo layout ofereceu um botão “Visualizar imagem original” para exibi-las no tamanho completo – direto do nosso servidor e sem ganharmos uma visita, ou seja, HOTLINK na maior cara de pau.

Surgiram várias ideias de como contornar a perda de visitas que alguns blogueiros tiveram, e a mais interessante, pra mim, é a adotada pelo site FansShare. Ao pesquisar imagens no Google (ou outras buscas por imagem), o usuário até encontra, mas com uma marca d’água pedindo para clicar na imagem e vê-la em tamanho real na página de origem.

Se não evita perda total das visitas, ao menos reduz o prejuízo. Esse método aqui (fonte), embora já antigo, é perfeito, veja como fazer:

1. Crie uma imagem que será a marca d’água. Prefira a proporção paisagem, e que seja razoavelmente grande. Ela deve ser semi-transparente, com uma mensagem opaca por cima.

Você pode fazer isso no Photoshop assim: crie um arquivo de 800 x 600 pixels, preencha a camada única de preto, reduza a opacidade para uns 50%. Crie então um texto bem no centro da imagem e salve-a no formato PNG (para manter a transparência).

2. Crie um arquivo de texto chamado “watermark” e mude sua extensão para .php. Cole isso no seu conteúdo:

<?php 
// diz ao servidor para tratar esse arquivo como se fosse uma imagem
header('Content-type: image/jpeg');
// caminho para o arquivo
$img = $_GET['src'];
// alinhamento padrão da marca d'água
$p = $_GET['p'];
if(!$p) $p = 'c';
/* pode ser alterada segundo as legendas:
tl = top left (topo esquerda)
tc = top center (topo central)
tr = top right (topo direita)
cl = center left (centro esquerda)
c = center of the image (centro da imagem)
cr = center right (centro direita)
bl = bottom left (base esquerda)
bc = bottom center (base central)
br = bottom right (base direita) */

// qualidade da marca d'água
$q = $_GET['q'];
// se a qualidade não for indicada ou não estiver na escala de 0 a 100, então será 90
if(!$q || $q100) $q = '90';

$filetype = substr($img,strlen($img)-4,4);
$filetype = strtolower($filetype);
if($filetype == ".gif") $image = @imagecreatefromgif($img);
if($filetype == ".jpg") $image = @imagecreatefromjpeg($img);
if($filetype == ".png") $image = @imagecreatefrompng($img);
if(!$image) die();

// pega o tamanho da imagem original
$img_w = imagesx($image);
$img_h = imagesy($image);

// se o nome do arquivo contiver "150x150", a marca d'água não é aplicada
if (eregi("150x150", $img)) {
imagejpeg($image, null, $q);
die();
}
else {
$watermark = @imagecreatefrompng('watermark.png');
}
/*
// se quiser a marca d'água só em imagens maiores, remova o comentário para ativar as condições abaixo (só excluir os sinais barra e asterisco acima e no final
if ($img_w < "150") { //se a imagem for menos larga que 150px
imagejpeg($image, null, $q);
die();
}
else {
$watermark = @imagecreatefrompng('watermark.png');
}
*/

// pega o tamanho da imagem de marca d'água
$w_w = imagesx($watermark);
$w_h = imagesy($watermark);

if($p == "tl") {
$dest_x = 0;
$dest_y = 0;
}
elseif ($p == "tc") {
$dest_x = ($img_w - $w_w)/2;
$dest_y = 0;
}
elseif ($p == "tr") {
$dest_x = $img_w - $w_w;
$dest_y = 0;
}
elseif ($p == "cl") {
$dest_x = 0;
$dest_y = ($img_h - $w_h)/2;
}
elseif ($p == "c") {
$dest_x = ($img_w - $w_w)/2;
$dest_y = ($img_h - $w_h)/2;
}
elseif ($p == "cr") {
$dest_x = $img_w - $w_w;
$dest_y = ($img_h - $w_h)/2;
}
elseif ($p == "bl") {
$dest_x = 0;
$dest_y = $img_h - $w_h;
}
elseif ($p == "bc") {
$dest_x = ($img_w - $w_w)/2;
$dest_y = $img_h - $w_h;
}
elseif ($p == "br") {
$dest_x = $img_w - $w_w;
$dest_y = $img_h - $w_h;
}

imagecopy($image, $watermark, $dest_x, $dest_y, 0, 0, $w_w, $w_h);
imagejpeg($image, null, $q);
imagedestroy($image);
imagedestroy($watermark); ?>

3. Mande esses dois arquivos (o php e a imagem png) para seu servidor, na raíz do blog ou site. Se usa o WordPress, é na mesma pasta onde ficam os arquivos wp-admin.php, a pasta wp-includes, etc.

4. Por fim, insira no seu arquivo .htaccess:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+.)?seusite.com.br/ [NC]
RewriteCond %{HTTP_USER_AGENT} !Googlebot [NC]
RewriteCond %{HTTP_USER_AGENT} !Googlebot-Image [NC]
RewriteCond %{HTTP_USER_AGENT} !Mediapartners-Google [NC]
RewriteCond %{HTTP_USER_AGENT} !Mediapartners [NC]
RewriteCond %{HTTP_USER_AGENT} !Googlebot-Mobile [NC]
RewriteCond %{HTTP_USER_AGENT} !Googlebot-Video [NC]
RewriteCond %{HTTP_USER_AGENT} !Googlebot-News [NC]
RewriteCond %{HTTP_USER_AGENT} !msnbot [NC]
RewriteCond %{HTTP_USER_AGENT} !slurp [NC]
RewriteCond %{HTTP_USER_AGENT} !Bingbot [NC]
RewriteRule (.*)wp-content/uploads/(.*) $1watermark.php?p=c&q=90&src=wp-content/uploads/$2

Com isso tudo, os bots continuam indexando a imagem, mas ao abrir na pesquisa, ela terá uma marca d’água. Também aparece se alguém fizer hotlink em qualquer outro lugar.

É bom lembrar que isso vai aumentar o trabalho do seu servidor, já que cada requisição da imagem vai fazer o watermark.php rodar. Ninguém relatou grande prejuízo (que eu tenha visto), mas se perceber lentidão ou site fora do ar, melhor não usar.

Como disse antes, alguns usuários estão preocupados com possíveis punições do Google aos seus sites, sob alegação de cloaking, uma técnica blackhat (trapaça) de oferecer um conteúdo diferente do esperado de um url. Isso porque as imagens indexadas não terão marca d’água, ao contrário da que for linkada em outro lugar.

Pessoalmente acho sacanagem se o Google punir isso, afinal a imagem original, onde foi postada, estará perfeitamente igual à indexada. Mas sabe-se lá como funcionam a fundo o sistema deles.

Atualização sobre as marcas d’água – 30/08/2013

Como havia dito antes, é de sua responsabilidade usar o método acima sob risco de perdas por outros fatores, como punições do Google. Segundo outro artigo do mesmo site em que vi o método original, após alguns meses de uso das marcas d’água foi possível notar que visitas vindas pelo Google Images caíram gradualmente, mesmo que as imagens continuassem sendo indexadas normalmente.

Isso leva a crer que atualizações recentes do algoritmo do Google passaram a entender que imagens com marca d’água eram menos relevantes como resultado, já que naturalmente devem receber menos cliques – quem pesquisa uma imagem tem menos tendência a clicar na imagem marcada do que numa limpa.

Assim, o mais aconselhável é mesmo deixar as imagens originais no Google e conformar-se com a situação. Antes perder algumas visitas que não chegarão até você porque já conseguiram a imagem usada pelo Google do que perder a maioria que tem aversão a marcas d’água.

Author

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

1 Comment

  1. opa opa. Testado e aprovado. Finalmente me livrei desses horlinks. Para preencher a imagem nos sites dos ladrões, coloquei uma imagem com o endereço para meu site. Pelo menos pra trazer tráfego, eles devem servir.

Write A Comment

Pin