Português do Brasil English
Devin no Facebook  Devin no Twitter  RSS do Site 
Servidores    

Personalizando o Índice Automático de Arquivos do Apache


Comentários  24
Visualizações  
114.151

Quando não há uma página principal dentro de um diretório no Apache, ele geralmente (caso habilitado) mostra uma listagem de todos os arquivos e subdiretórios presentes. Este tutorial ensina como personalizar essa lista!

1. O Índice Automático do Apache…

Quando aprendemos sobre páginas Web, sabemos que quando criamos a página principal temos que colocar como nome index.html ou index.htm. Isto ocorre porque os servidores Web adotaram este padrão, então toda vez que especificamos um endereço que não contenha um arquivo na URL, ele vai procurar por um index.html ou index.htm.

Por exemplo, quando digitamos:

https://www.devin.com.br

Na verdade ele vai procurar o index.html que está dentro do diretório configurado para o domínio www.devin.com.br. Neste caso específico, a configuração diz para procurar também por um index.php. Seria a mesma coisa que digitar:

https://www.devin.com.br/index.php

No Apache, quem controla essa procura por um arquivo de índice é o mod_dir. Dentro do arquivo de configuração do Apache (httpd.conf) tem uma diretriz chamada DirectoryIndex que configura quais arquivos ele deve procurar. Em uma instalação normal de Apache, vai estar assim:

DirectoryIndex index.html index.htm

Com essa configuração, o Apache primeiro procura por index.html, se não achá-lo, procura por index.htm. Poderia mudar para qualquer coisa, exemplo:

Directory babaca.html index.php index.html assinatura.html index.htm

Neste caso ele iria procurar por babaca.html primeiro, caso não encontrasse procurava por index.php e por aí vai!

Caso nenhum destes arquivos especificados no DirectoryIndex seja encontrado, então o Apache executa o módulo mod_autoindex. Esse módulo gera uma página HTML com um índice automático de todos os arquivos e diretórios. O resultado é algo parecido com isto:

Índice Automático Padrão

Índice Automático Padrão

Como podem ver, não existe nenhum HTML no diretório e por isso ele lista todos os diretórios e arquivos que tinham no diretório /teste, quando acessei http://localhost/teste/.

A questão é: Como personalizar essa saída para deixar mais bonitinho? :D

1.1. Habilitando o Índice Automático

Para o mod_autoindex funcionar, é necessário que o diretório do Apache contenha a opção Indexes. Na configuração padrão do Apache você vai encontrar as linhas parecidas com estas:

<Directory /var/www/html>
Options Indexes FollowSymLinks
[...corte...]

Ou seja, acima estou dizendo que dentro do diretório /var/www/html, a geração automática de índice via mod_autoindex está habilitada (opção Indexes) e que os links simbólicos serão utilizados (FollowSymLinks).

Você pode usar esta diretriz tanto no arquivo de configuração principal, como em um arquivo .htaccess.

2. Entendendo a configuração Padrão

Pra começar a aprender como personalizar o mod_autoindex, nada melhor do que olhar a configuração que vem com todo Apache e que mostra a listagem como no screenshot anterior. Antes de mais nada, se você não usar nenhuma configuração adicional e o Options Indexes estiver habilitado, a listagem será assim:

Índice Automático sem nenhuma configuração

Índice Automático sem nenhuma configuração

Agora vamos analisar todas as configurações do Apache que tornam essa listagem mais bonita e útil, como mostrado na primeira imagem mostrada neste tutorial. Em sistemas como Red Hat ou Fedora, estas configurações estarão no arquivo principal (httpd.conf), já em sistemas Debian a configuração estará separada no arquivo mods-available/autoindex.conf.

É legal lembrar também que estas configurações também podem ser incluídas em um arquivo .htaccess quando permitido.

Vejamos:

IndexOptions FancyIndexing VersionSort HTMLTable NameWidth=*

AddIconByEncoding (CMP,/icons/compressed.gif) x-compress x-gzip x-bzip2

AddIconByType (TXT,/icons/text.gif) text/*
AddIconByType (IMG,/icons/image2.gif) image/*
AddIconByType (SND,/icons/sound2.gif) audio/*
AddIconByType (VID,/icons/movie.gif) video/*

AddIcon /icons/binary.gif .bin .exe
AddIcon /icons/binhex.gif .hqx
AddIcon /icons/tar.gif .tar
AddIcon /icons/world2.gif .wrl .wrl.gz .vrml .vrm .iv
AddIcon /icons/compressed.gif .Z .z .tgz .gz .zip
AddIcon /icons/a.gif .ps .ai .eps
[...corte...]
AddIcon /icons/back.gif ..
AddIcon /icons/hand.right.gif README
AddIcon /icons/folder.gif ^^DIRECTORY^^
AddIcon /icons/blank.gif ^^BLANKICON^^
DefaultIcon /icons/unknown.gif

HeaderName HEADER.html
ReadmeName README.html
IndexIgnore .??* *~ *# HEADER* README* RCS CVS *,v *,t

E agora explicando as opções:

  • IndexOptions: Aqui estão as opções principais de como a lista de diretórios vai ser gerada. O principal elemento que precisamos saber aqui é o FancyIndexing, que adiciona ícones aos arquivos, informações como tamanho e data de criação/modificação. Basicamente o FancyIndexing é quem deixa a listagem mais bonitinha :PAs outras opções são: VersionSort faz com que caso os arquivos tenham versões no nome (exemplo: 1.0, 1.01, 1.02, 1.1, etc), o Apache ordene da forma certa. O HTMLTable, na minha opinião bastante importante, gera uma tabela para a listagem, ao invés do texto solto, o que é útil para personalizar o visual depois. Por último, o NameWidth=* faz com que a coluna do nome se extenda o quanto for preciso, pois se especificar um número, ele vai cortar o resto do arquivo quando completar o número de caracteres.
  • AddIcon*: Todas as diretrizes que começarem com AddIcon especificam que ícone mostrar para o arquivo/diretório. O AddIconByEncoding especifica o ícone de acordo com o tipo de codificação do arquivo, o AddIconBytype especifica pelo tipo de arquivo e o AddIcon especifica por um sufixo contido no arquivo. Os próprios exemplos citados acima já dão uma boa idéia de como usá-los. Para ver todos os ícones disponíveis no seu Apache, acesse o diretório http://www.dominio.com.br/icons/.
  • DefaultIcon: Simples, quando não souber qual ícone usar (ou seja, não estiver configurado com AddIcon*), utilizar este ícone.
  • HeaderName: Que arquivo incluir acima da listagem. No exemplo padrão, se o diretório tiver um HEADER.html no diretório, ele vai incluir antes da listagem começar na página. Esta é a diretriz chave para a personalização.
  • ReadmeName: Funciona da mesma forma que o HeaderName, só que inclui um arquivo abaixo da listagem. No exemplo padrão, se existir um arquivo README.html, ele será incluído depois da listagem terminar na página.
  • IndexIgnore: Quais padrões de arquivos devem ser ignorados na hora de listar. Em outras palavras, tudo que tiver definido nessa diretriz não vai ser mostrada na listagem. No exemplo padrão ele vai omitir os arquivos ocultos, tudo que terminar com ~, tudo que começar com HEADER e README, e arquivos relacionados à CVS/RCS.

Não é tão difícil entender né?

Então como deu pra perceber, os pontos-chave aqui são: IndexOptions FancyIndexing, HeaderName e ReadmeName.

3. Personalizando a listagem!

Agora que entendemos como funciona o mod_autoindex, está na hora de personalizá-los! Para fazer isso, precisamos modificar o IndexOptions com uma nova opção. Então o exemplo anterior ficará assim:

IndexOptions FancyIndexing VersionSort HTMLTable NameWidth=* SuppressHTMLPreamble

O SupressHTMLPreamble faz com que na hora de gerar a listagem, caso seja encontrado um HeaderName, o Apache não vai gerar um cabeçalho HTML padrão antes do arquivo HeaderName e da listagem.

Isso significa agora que o arquivo que você definir no HeaderName será o cabeçalho da sua página HTML e o ReadmeName servirá como rodapé! No cabeçalho você poderá agora incluir estilos CSS e outras coisas mais que desejar.

Vamos montar um exemplo bonito aqui. Eu vou substituir primeiro todos os ícones padrões do Apache para ícones do Oxygen Icons, depois fazer um cabeçalho e rodapé utilizando alguns templates simples.

Vamos considerar agora que nenhuma configuração do mod_autoindex foi feita. Vou incluir agora a seguinte configuração de IndexOptions:

IndexOptions FancyIndexing VersionSort HTMLTable NameWidth=* SuppressHTMLPreamble
IndexOptions FoldersFirst IconWidth=22 IconHeight=22 Charset=UTF-8 XHTML
IndexOptions SuppressDescription SuppressColumnSorting IgnoreCase IconsAreLinks
IndexOptions SuppressRules

Agora vou incluir também os arquivos de cabeçalho e rodapé da página, que estarão dentro de um diretório chamado /includes na raiz do domínio Web.

O cabecalho.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <link rel="stylesheet" href="/includes/autoindex.css" type="text/css" media="screen" />
        <title>Listagem Automática do Apache</title>
</head>
<body>

<div id="wrapper">

<div id="titulo"><h1>Listagem Automática do Apache</h1></div>

<!-- Exemplo de seleção tirado da documentação do Apache -->
<form action="" method="get">
<p>Ordenar por:
<select name="C">
        <option value="N" selected="selected"> Nome</option>
        <option value="M"> Data de Modificação</option>
        <option value="S"> Tamanho</option>
</select>
<select name="O">
<option value="A" selected="selected"> Crescente</option>
<option value="D"> Decrescente</option>
</select>
Padrão: <input type="text" name="P" value="*" />
<input type="submit" name="X" value="Ir" /></p>
</form>

<div id="listagem">

Agora o rodape.html:

</div>

<div id="disclaimer">
<p>Este é um exemplo e este é o rodapé do exemplo!</p>
</div>

</body>
</html>

Agora o autoindex.css que incluí no cabeçalho:

body {
        background-color: #2949ff;
        font-size: 13px;
}

img {
        border: 0;
}

#wrapper {
        background-color: #ffffff;
        width: 95%;
        margin: 20px auto 20px auto;
        padding: 10px;
        text-align: center;
}

#titulo {
        text-align: center;
}

#listagem table {
        width: 90%;
        margin: 10px auto 10px auto;
        border: 1px dotted #000000;
        text-align: left;
}

#listagem table tr th {
        display: none;
}

#disclaimer {
        width: 75%;
        margin: 0 auto 0 auto;
        background-color: #e0e0ff;
        border: 1px solid #000000;
        text-align: center;
}

Pronto! Com esses 3 arquivos dentro do /includes, vamos adicionar as seguintes configurações no Apache:

HeaderName /includes/cabecalho.html
ReadmeName /includes/rodape.html

Também mudei os ícones, mas não vou colocar todas as linhas aqui, exemplos:

AddIconByType (TXT,/icons/oxygen/text-plain.png) text/*
AddIcon /icons/oxygen/tar.png .Z .z .tgz .gz .zip
AddIcon /icons/oxygen/go-previous.png ..
AddIcon /icons/oxygen/stock_folder.png ^^DIRECTORY^^
AddIcon /icons/oxygen/openofficeorg-20-presentation.png .odp
AddIcon /icons/oxygen/application-x-rpm.png .rpm

Agora é só reiniciar/recarregar o Apache e testar nossa nova listagem. Olha só como ficou:

Listagem Automática modificada!

Listagem Automática modificada!

4. Outras Dicas

4.1. Utilizando o PHP junto ao mod_autoindex

A diretriz HeaderName do mod_autoindex só aceita arquivos que tem o tipo text/html e por padrão, para o PHP funcionar ele deixa os tipos de arquivos como application/x-httpd-php. Isso quer dizer que se você colocar no HeaderName, por exemplo, cabecalho.php, ele não vai aceitar.

Para resolver isso, temos que executar o PHP como CGI, assim podemos especificar que o arquivo é do tipo text/html, mas é executado como se fosse um CGI pelo Apache. Então primeiramente verifique que você tenha instalado a versão CGI do PHP, vendo se o arquivo /cgi-bin/php existe no servidor Web e seja executável.

Agora na configuração do Apache (dentro do <Directory> ou em um .htaccess), coloque as seguintes linhas:

AddType text/html .php
AddHandler php-script .php
Action php-script /cgi-bin/php

Depois recarregue o Apache. Lembre-se que esta configuração é apenas recomendada para diretórios que utilizarão o mod_autoindex realmente.

Agora você já pode mudar o HeaderName:

HeaderName /includes/cabecalho.php

Isto é bastante útil para gerar templates dinâmicos do seu site dentro do mod_autoindex. Pode ser usado também para melhorar a saída do exemplo anterior deste tutorial, mostrando o diretório atual que o usuário se encontra, se um usuário está logado, entre muitas outras coisas que uma linguagem de programação como o PHP proporciona.

E apesar de eu citar o PHP, isto serve para qualquer outro tipo de linguagem, já que na verdade a interface é CGI. Pode ser Python, C, Perl e até quem sabe shell-script!

4.2. Internacionalizando os cabeçalhos da tabela

O que me deu um impulso para escrever este tutorial foi a pergunta de como traduzir o cabeçalho da tabela, ou seja, as palavras Name, Last Modified, Size, Description. Procurando uma solução, não consegui achar uma muito robusta, pois na verdade o próprio mod_autoindex não permite fazer isso a não ser modificando seu código-fonte.

A solução que eu achei (e até apliquei no exemplo do tutorial) foi colocar um CSS que esconde este cabeçalho, sendo assim possível criar um outro cabeçalho! Infelizmente isso não iria funcionar em navegadores que não suportam CSS, como alguns navegadores em modo texto/terminal.

De qualquer forma, o seguinte CSS foi responsável por esconder o cabeçalho:

table tr th {
        display: none;
}

Talvez haja uma solução mais robusta, mas quem sabe?

5. Referências

A principal referência sobre o assunto é a própria documentação do mod_autoindex, onde podemos encontrar uma descrição de todas as diretrizes possíveis:

114.151

Comentários  24
Visualizações  
114.151


TagsLeia também

Apaixonado por Linux e administração de sistemas. Viciado em Internet, servidores, e em passar conhecimento. Idealizador do Devin, tem como meta aprender e ensinar muito Linux, o que ele vem fazendo desde 1997 :-)


Leia também



Comentários

24 respostas para “Personalizando o Índice Automático de Arquivos do Apache”

  1. Silveira Neto disse:

    Interessante. Vai pros meus favoritos. Posso prescisar um dia.

  2. Adilson Bonanoviksy disse:

    Cara, valeu, era isso q eu tava procurando…pois ja tinha feito 90% só faltavam algumas dessas dicas…

    Valeu aí, a comunidade agradece….

  3. […] geralmente (caso habilitado) mostra uma listagem de todos os arquivos e subdiretórios presentes. Este tutorial explica como isso funciona e mostra como personalizar esta listagem para ter a cara que […]

  4. Alexandre disse:

    Bacana. Bem explicado, parabéns!

  5. Sugiro que verifiquem uma ferramenta chamada SNIF, disponível aqui: http://www.bitfolge.de/snif e em uso no meu site: http://www.abandonemicrosoft.net/publico/

    Bom proveito.

    Jáder

  6. Paulo disse:

    Parabéns pelo artigo Hugo, consegui implementar rapidamente com as suas dicas…agora aproveitando vou te fazer uma pergunta…estou pensando em desabilitar meu servidor FTP e configurar uma pasta no apache como servidor de arquivos usando o htaccess com senha….vc ve algum problema de segurança ou posso fazer isso numa boa??….Parabéns pelo site….

    Paulo

  7. @Paulo:

    Que bom que foi de proveito pra ti!

    Não vejo nenhum problema de segurança em você fazer isso, inclusive se você colocar uma camada de criptografia (SSL), fica mais seguro que o FTP comum. A única coisa que você vai perder, se for fazer dessa forma aqui, é a capacidade de upload de arquivos do cliente para o servidor.

  8. Heitor Souza disse:

    Não consegui fazer o php funcionar como CGI. Alguma dica para ubuntu server 8.04 lts?

  9. Sergio disse:

    Pessoal tenho uma site encapsulado num .so do apache modules, como faço para por um icone neste site. exemplo…

    . Criei o site e encapsulei num .so (site.so);

    . Coloquei o .so em: ..Apachemodulesite.so

    . Para acessar o site basta eu digitar no firefox http://www.maquinaquetemapache/site.

    mas quero colocar um icone antes da URL após abrir o site, alguem sabe como fazer isso no meu caso ?

    Obrigado.

    Sérgio Lopes

  10. Diego disse:

    Olá, ótimo artigo, porem, estou tendo problemas para funcionar..

    Habilitei o mod no meu apache: LoadModule autoindex_module modules/mod_autoindex.so

    dentro do httpd.conf, tenho o seguinte:

    AllowOverride None

    Options Indexes FollowSymLinks

    Order allow,deny

    Allow from all

    AuthType Basic

    AuthName "Cuidado – Area Restrita"

    AuthUserFile "/var/www/site/arquivos/.htpasswd"

    Require valid-user

    como veem, uso autenticação para entrar neste diretorio.. isso funciona perfeitamente, mas para fazer download de algo la dentro, preciso colocar o nome do arquivo atras… nao consegui fazer funcionar para mostrar a listagem de arquivos dentro do diretorio..

    o que serah q falta?

    Obrigado

    Diego

  11. Jucemar disse:

    Não sei se este tópico está fechado, mas gostaria de dizer que:

    1) Achei muito bom;

    2) So não consegui gerar o mesmo para os sub-diretorios que estão dentro da public_htm, ou seja, so está funcionando para o puiblic_htm. Gostaria de saber se estou fazendo algo de errado.

    Abraço.

  12. Eduardo Valente disse:

    Eu havia usado essa configuração em um servidor Ubuntu 8.04 que montei em 2009, mês passado porém atualizei a maquina para um servidor de verdade com direito a RAID e outros itens de segurança. Migrei também para o Ubuntu Server 11.04 64 MAS não consigo ter a personalização como mostra esse tutorial. O que mudou, alguém poderia dizer? Grato!

  13. Eduardo Valente disse:

    Falha minha pessoal! Fui verificar passo a passo da configuração e notei as diferenças sutis nos meus arquivos. Era apenas um pequeno erro de codificação dos arquivos de configuração. Usando CTRL+C e CTRL+V causei um erro nos arquivos originais. A configuração roda perfeitamente no Ubuntu 11.04 64, obrigado!

  14. Vinícius disse:

    Excelente explicação, foi a única que encontrei sobre o assunto, porém teve um pequeno detalhe que não ficou muito claro (pra mim): o diretório includes fica exatamente onde? ou temos que criá-lo? No meu caso, eu simplesmente estou disponibilizando pastas compartilhadas no samba para usuários da rede, porém com acesso restrito, e queria só mudar o cabeçalho da página index of.

  15. Fabyo disse:

    Para traduzir o cabeçalho usei jquery

    $(function(){

    $("th")[1].innerHTML = 'Nome';

    $("th")[2].innerHTML = 'Data';

    $("th")[3].innerHTML = 'Tamanho';

    });

    e apagar essas linhas para o cabeçalho voltar aparecer

    table tr th {

    display: none;

    }

  16. Evertton de Lima disse:

    Amigo é possível carregar um arquivo do sistema ao invés de um arquivo no diretório de sites do apache?

  17. Reynaldo disse:

    Desculpe minha falta de conhecimento no assunto.

    Utilizo o servidor apache no Linux, mas ainda não entendi uma coisa… todas essas configurações são aplicadas onde exatamente ?

  18. Reynaldo disse:

    Ha ja consegui aqui… foi falta de atenção na minha leitura… obrigado ficou show de bola…

  19. Ederson disse:

    Pois então amigo, excelente tutorial, só que os icones não apareceram =/

    • Ederson,

      Se você usou o meu exemplo dos ícones, eu descompactei um pacote de ícones chamado oxygen. Nas diretrizes "AddIconByType" e "AddIcon" você tem os caminhos do servidor web para os ícones. Eles têm que existirem no sistema de arquivos e servidor web. Pode testá-los digitando no navegador mesmo, do tipo:

      http://servidor/icons/tar.png

      Ou seja, o diretório /icons/ tem que existir para os ícones aparecerem. Em instalações padrão de Apache, o /icons/ já vem mapeado (via diretriz "Alias /icons/ /var/www/icons" por exemplo).

      Verifique isso e os ícones com certeza devem aparecer :-)

  20. JNeto disse:

    Ótimo, muito obrigado pela dica, usei no Apache do WAMP SERVER alterei icones, fonte e etc. Ficou show.

  21. Davidson Silva disse:

    Fino esse post.
    Já está favoritado!

  22. Artur Filipe disse:

    Se possível, manda-me um arquivo deste já editado, quero deixar um apache habilitado apenas para hospedar arquivos, este que você criou já é perfeito pra mim. Queria apenas jogar na pasta e ver a mágica acontecer… Se for possível… Desde já agradeço! :D

  23. Paulo César Souza disse:

    O autor deste post, o senhor HUGO CISNEIROS (EITCH) não respondeu a ninguém, mas vou tentar:
    Esta foi a única coisa citada no post que eu encontrei em httpd.conf: –> Options Indexes FollowSymLinks Includes ExecCGI
    Você não cita onde entraremos com as suas opções: –> em qual arquivo? Em qual linha?
    Quando eu adicionei isso (abaixo):
    IndexOptions FancyIndexing VersionSort HTMLTable NameWidth=* SuppressHTMLPreamble
    IndexOptions FoldersFirst IconWidth=22 IconHeight=22 Charset=UTF-8 XHTML
    IndexOptions SuppressDescription SuppressColumnSorting IgnoreCase IconsAreLinks
    IndexOptions SuppressRules

    HeaderName /includes/cabecalho.html
    ReadmeName /includes/rodape.html

    O INDEX OF, retorna isso: –> Acesso Proibido!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *