You are on page 1of 10

Personalizando o ndice Automtico de Arquivos do Apache - Devin

http://www.devin.com.br/apache-autoindex/

Palestras Curriculum Nostalgia Livro de Visitas Sobre a Devin Principal Tutoriais Dicas Tradues Programas The Linux Manual Blog Pessoal

Parceiros

BR-Linux.org

Meta
Login Posts RSS RSS dos comentrios WordPress.org

devin.com.br

Web

ltimos Comentrios
sra.bates em Trabalhando com PHP e MySQL: Uma Introduo Daniel em Trabalhando com PHP e MySQL: Uma Introduo Wudeyzhd em Como fazer calculadoras em JavaScript Douglas em Gerando relatrios do Squid com o SARG URLs Amigveis .htaccess Adriano Godoy em Tutorial Apache: htaccess

BR-Linux
Ubuntu: em entrevista, Shuttleworth fala sobre patentes, espao e a Canonical 11 de maio de 2012 Microsoft confirma: Skype para Linux no morreu ainda 11 de maio de 2012 O que aconteceu no Ubuntu Developer Summit 11 de maio de 2012 Do mesmo lado: Google e Mozilla acusam Microsoft de competio desleal 11 de maio de 2012

1 de 10

12/05/2012 22:07

Personalizando o ndice Automtico de Arquivos do Apache - Devin

http://www.devin.com.br/apache-autoindex/

Bom Doutor: Richard Stallman j saiu do hospital 11 de maio de 2012 Curso gratuito e online de Moodle 11 de maio de 2012 Como instalar o Ubuntu 12.04 e primeiros passos com vdeo 11 de maio de 2012 Stoq 1.3 Gesto Empresarial Open Source 11 de maio de 2012 BSDinfo: Blog com informaes e dicas para FreeBSD 11 de maio de 2012 Telecentros: Tucunar GNU/Linux no Software Pblico Brasileiro 11 de maio de 2012

Amigos
Hugo Dria Contos de Zumbi Licio Fernando Almerindo Rehem

ltimos Posts
Cpias remotas de arquivos Rotao de logs binrios no MySQL Shell Script: tratamento de argumentos e opes Um portal Web com Wordpress? Proxy para ambientes mistos

17 de out de 2008, em Linux, Tutoriais Tags: apache, autoindex, servidores, web Visualizado 24251 vezes, 2 s hoje Avaliao: (2 votos, mdia: 5,00 de 5) Por Hugo Cisneiros (Eitch)

Quando no h uma pgina principal dentro de um diretrio no Apache, ele geralmente (caso habilitado) mostra uma listagem de todos os arquivos e subdiretrios presentes. Este tutorial ensina como personalizar essa lista!

1. O ndice Automtico do Apache


Quando aprendemos sobre pginas Web, sabemos que quando criamos a pgina principal temos que colocar como nome index.html ou index.htm. Isto ocorre porque os servidores Web adotaram este padro, ento toda vez que especificamos um endereo que no contenha um arquivo na URL, ele vai procurar por um index.html ou index.htm. Por exemplo, quando digitamos: http://www.devin.com.br Na verdade ele vai procurar o index.html que est dentro do diretrio configurado para o domnio www.devin.com.br. Neste caso especfico, a configurao diz para procurar tambm por um index.php. Seria a mesma coisa que digitar: http://www.devin.com.br/index.php No Apache, quem controla essa procura por um arquivo de ndice o mod_dir. Dentro do arquivo de configurao do Apache (httpd.conf) tem uma diretriz chamada DirectoryIndex que configura quais arquivos ele deve procurar. Em uma instalao normal de Apache, vai estar assim:
DirectoryIndex index.html index.htm

Com essa configurao, o Apache primeiro procura por index.html, se no ach-lo, procura por index.htm. Poderia mudar para qualquer coisa, exemplo:

2 de 10

12/05/2012 22:07

Personalizando o ndice Automtico de Arquivos do Apache - Devin

http://www.devin.com.br/apache-autoindex/

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

Neste caso ele iria procurar por babaca.html primeiro, caso no encontrasse procurava por index.php e por a vai! Caso nenhum destes arquivos especificados no DirectoryIndex seja encontrado, ento o Apache executa o mdulo mod_autoindex. Esse mdulo gera uma pgina HTML com um ndice automtico de todos os arquivos e diretrios. O resultado algo parecido com isto:

ndice Automtico Padro Como podem ver, no existe nenhum HTML no diretrio e por isso ele lista todos os diretrios e arquivos que tinham no diretrio /teste, quando acessei http://localhost/teste/. A questo : Como personalizar essa sada para deixar mais bonitinho? :D

1.1. Habilitando o ndice Automtico


Para o mod_autoindex funcionar, necessrio que o diretrio do Apache contenha a opo Indexes. Na configurao padro 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 diretrio /var/www/html, a gerao automtica de ndice via mod_autoindex est habilitada (opo Indexes) e que os links simblicos sero utilizados (FollowSymLinks). Voc pode usar esta diretriz tanto no arquivo de configurao principal, como em um arquivo .htaccess.

2. Entendendo a configurao Padro


Pra comear a aprender como personalizar o mod_autoindex, nada melhor do que olhar a configurao que vem com todo Apache e que mostra a listagem como no screenshot anterior. Antes de mais nada, se voc no usar nenhuma configurao adicional e o Options Indexes estiver habilitado, a listagem ser assim:

ndice Automtico sem nenhuma configurao Agora vamos analisar todas as configuraes 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 configuraes estaro no arquivo principal (httpd.conf), j em sistemas Debian a configurao estar separada no arquivo mods-available/autoindex.conf. legal lembrar tambm que estas configuraes tambm podem ser includas em um arquivo .htaccess quando permitido. Vejamos:
IndexOptions FancyIndexing VersionSort HTMLTable NameWidth=* AddIconByEncoding (CMP,/icons/compressed.gif) x-compress x-gzip x-bzip2

3 de 10

12/05/2012 22:07

Personalizando o ndice Automtico de Arquivos do Apache - Devin

http://www.devin.com.br/apache-autoindex/

AddIconByType AddIconByType AddIconByType AddIconByType

(TXT,/icons/text.gif) text/* (IMG,/icons/image2.gif) image/* (SND,/icons/sound2.gif) audio/* (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 opes: IndexOptions: Aqui esto as opes principais de como a lista de diretrios vai ser gerada. O principal elemento que precisamos saber aqui o FancyIndexing, que adiciona cones aos arquivos, informaes como tamanho e data de criao/modificao. Basicamente o FancyIndexing quem deixa a listagem mais bonitinha :PAs outras opes so: VersionSort faz com que caso os arquivos tenham verses no nome (exemplo: 1.0, 1.01, 1.02, 1.1, etc), o Apache ordene da forma certa. O HTMLTable, na minha opinio bastante importante, gera uma tabela para a listagem, ao invs 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 nmero, ele vai cortar o resto do arquivo quando completar o nmero de caracteres. AddIcon*: Todas as diretrizes que comearem com AddIcon especificam que cone mostrar para o arquivo/diretrio. O AddIconByEncoding especifica o cone de acordo com o tipo de codificao do arquivo, o AddIconBytype especifica pelo tipo de arquivo e o AddIcon especifica por um sufixo contido no arquivo. Os prprios exemplos citados acima j do uma boa idia de como us-los. Para ver todos os cones disponveis no seu Apache, acesse o diretrio http://www.dominio.com.br/icons/. DefaultIcon: Simples, quando no souber qual cone usar (ou seja, no estiver configurado com AddIcon*), utilizar este cone. HeaderName: Que arquivo incluir acima da listagem. No exemplo padro, se o diretrio tiver um HEADER.html no diretrio, ele vai incluir antes da listagem comear na pgina. Esta a diretriz chave para a personalizao. ReadmeName: Funciona da mesma forma que o HeaderName, s que inclui um arquivo abaixo da listagem. No exemplo padro, se existir um arquivo README.html, ele ser includo depois da listagem terminar na pgina. IndexIgnore: Quais padres de arquivos devem ser ignorados na hora de listar. Em outras palavras, tudo que tiver definido nessa diretriz no vai ser mostrada na listagem. No exemplo padro ele vai omitir os arquivos ocultos, tudo que terminar com ~, tudo que comear com HEADER e README, e arquivos relacionados CVS/RCS. No to difcil entender n? Ento como deu pra perceber, os pontos-chave aqui so: 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 opo. Ento 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 no vai gerar um cabealho HTML padro antes do arquivo HeaderName e da listagem. Isso significa agora que o arquivo que voc definir no HeaderName ser o cabealho da sua pgina HTML e o ReadmeName servir como rodap! No cabealho 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 padres do Apache para cones do Oxygen Icons, depois fazer um cabealho e rodap utilizando alguns templates simples. Vamos considerar agora que nenhuma configurao do mod_autoindex foi feita. Vou incluir agora a seguinte configurao de IndexOptions:

4 de 10

12/05/2012 22:07

Personalizando o ndice Automtico de Arquivos do Apache - Devin

http://www.devin.com.br/apache-autoindex/

IndexOptions IndexOptions IndexOptions IndexOptions

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

Agora vou incluir tambm os arquivos de cabealho e rodap da pgina, que estaro dentro de um diretrio chamado /includes na raiz do domnio Web. O cabecalho.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="/includes/autoindex.css" type="text/css" media="screen" /> <title>Listagem Automtica do Apache</title> </head> <body> <div id="wrapper"> <div id="titulo"><h1>Listagem Automtica do Apache</h1></div> <!-- Exemplo de seleo tirado da documentao do Apache --> <form action="" method="get"> <p>Ordenar por: <select name="C"> <option value="N" selected="selected"> Nome</option> <option value="M"> Data de Modificao</option> <option value="S"> Tamanho</option> </select> <select name="O"> <option value="A" selected="selected"> Crescente</option> <option value="D"> Decrescente</option> </select> Padro: <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 cabealho:


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; }

5 de 10

12/05/2012 22:07

Personalizando o ndice Automtico de Arquivos do Apache - Devin

http://www.devin.com.br/apache-autoindex/

#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 configuraes no Apache:
HeaderName /includes/cabecalho.html ReadmeName /includes/rodape.html

Tambm mudei os cones, mas no 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 Automtica 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 padro, 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 no 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. Ento primeiramente verifique que voc tenha instalado a verso CGI do PHP, vendo se o arquivo /cgi-bin/php existe no servidor Web e seja executvel. Agora na configurao 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 configurao apenas recomendada para diretrios que utilizaro o mod_autoindex realmente. Agora voc j pode mudar o HeaderName:
HeaderName /includes/cabecalho.php

Isto bastante til para gerar templates dinmicos do seu site dentro do mod_autoindex. Pode ser usado tambm para melhorar a sada do exemplo anterior deste tutorial, mostrando o diretrio atual que o usurio se encontra, se um usurio est logado, entre muitas outras coisas que uma linguagem de programao 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

6 de 10

12/05/2012 22:07

Personalizando o ndice Automtico de Arquivos do Apache - Devin

http://www.devin.com.br/apache-autoindex/

Python, C, Perl e at quem sabe shell-script!

4.2. Internacionalizando os cabealhos da tabela


O que me deu um impulso para escrever este tutorial foi a pergunta de como traduzir o cabealho da tabela, ou seja, as palavras Name, Last Modified, Size, Description. Procurando uma soluo, no consegui achar uma muito robusta, pois na verdade o prprio mod_autoindex no permite fazer isso a no ser modificando seu cdigo-fonte. A soluo que eu achei (e at apliquei no exemplo do tutorial) foi colocar um CSS que esconde este cabealho, sendo assim possvel criar um outro cabealho! Infelizmente isso no iria funcionar em navegadores que no suportam CSS, como alguns navegadores em modo texto/terminal. De qualquer forma, o seguinte CSS foi responsvel por esconder o cabealho:
table tr th { display: none; }

Talvez haja uma soluo mais robusta, mas quem sabe?

5. Referncias
A principal referncia sobre o assunto a prpria documentao do mod_autoindex, onde podemos encontrar uma descrio de todas as diretrizes possveis: http://httpd.apache.org/docs/1.3/mod/mod_autoindex.html (Apache 1.3) http://httpd.apache.org/docs/2.0/mod/mod_autoindex.html (Apache 2.0) http://httpd.apache.org/docs/2.2/mod/mod_autoindex.html (Apache 2.2)

Gostou?
Imprimir esta pgina

Leia tambm:
1. 2. 3. 4. 5. Tutorial Apache: htaccess Apache: Como posso bloquear outros sites de fazer links diretos em meus arquivos? Dicas do Apache Montando estatsticas com o Webalizer Apache: Eu tenho muitos domnios virtuais, como posso fazer para gerar logs separados de cada um?

15 Comentrios em Personalizando o ndice Automtico de Arquivos do Apache


1. Personalizando o ndice automtico de arquivos do Apache
18 de out de 2008 em 3:55 pm

[...] geralmente (caso habilitado) mostra uma listagem de todos os arquivos e subdiretrios presentes. Este tutorial explica como isso funciona e mostra como personalizar esta listagem para ter a cara que [...] 2. Silveira Neto
18 de out de 2008 em 5:08 pm

Interessante. Vai pros meus favoritos. Posso prescisar um dia. 3. Adilson Bonanoviksy
18 de out de 2008 em 6:40 pm

Cara, valeu, era isso q eu tava procurandopois ja tinha feito 90% s faltavam algumas dessas dicas Valeu a, a comunidade agradece.

7 de 10

12/05/2012 22:07

Personalizando o ndice Automtico de Arquivos do Apache - Devin

http://www.devin.com.br/apache-autoindex/

4. Alexandre
20 de out de 2008 em 8:25 am

Bacana. Bem explicado, parabns! 5. Jder Marasca


20 de out de 2008 em 4:16 pm

Sugiro que verifiquem uma ferramenta chamada SNIF, disponvel aqui: http://www.bitfolge.de/snif e em uso no meu site: http://www.abandonemicrosoft.net/publico/ Bom proveito. Jder 6. Paulo
21 de out de 2009 em 3:54 pm

Parabns pelo artigo Hugo, consegui implementar rapidamente com as suas dicasagora aproveitando vou te fazer uma perguntaestou 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 segurana ou posso fazer isso numa boa??.Parabns pelo site. Paulo 7. Hugo Cisneiros (Eitch)
21 de out de 2009 em 3:59 pm

@Paulo: Que bom que foi de proveito pra ti! No vejo nenhum problema de segurana 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
19 de mar de 2010 em 12:24 pm

No consegui fazer o php funcionar como CGI. Alguma dica para ubuntu server 8.04 lts? 9. Sergio
05 de mai de 2010 em 7:01 pm

Pessoal tenho uma site encapsulado num .so do apache modules, como fao para por um icone neste site. exemplo . Criei o site e encapsulei num .so (site.so); . Coloquei o .so em: ..\Apache\module\site.so . Para acessar o site basta eu digitar no firefox http://www.maquinaquetemapache/site. mas quero colocar um icone antes da URL aps abrir o site, alguem sabe como fazer isso no meu caso ? Obrigado. Srgio Lopes 10. Diego
26 de ago de 2010 em 5:28 pm

8 de 10

12/05/2012 22:07

Personalizando o ndice Automtico de Arquivos do Apache - Devin

http://www.devin.com.br/apache-autoindex/

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 autenticao 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
09 de abr de 2011 em 11:06 am

No sei se este tpico est fechado, mas gostaria de dizer que: 1) Achei muito bom; 2) So no consegui gerar o mesmo para os sub-diretorios que esto dentro da public_htm, ou seja, so est funcionando para o puiblic_htm. Gostaria de saber se estou fazendo algo de errado. Abrao. 12. Eduardo Valente
05 de ago de 2011 em 6:30 pm

Eu havia usado essa configurao em um servidor Ubuntu 8.04 que montei em 2009, ms passado porm atualizei a maquina para um servidor de verdade com direito a RAID e outros itens de segurana. Migrei tambm para o Ubuntu Server 11.04 64 MAS no consigo ter a personalizao como mostra esse tutorial. O que mudou, algum poderia dizer? Grato! 13. Eduardo Valente
05 de ago de 2011 em 10:21 pm

Falha minha pessoal! Fui verificar passo a passo da configurao e notei as diferenas sutis nos meus arquivos. Era apenas um pequeno erro de codificao dos arquivos de configurao. Usando CTRL+C e CTRL+V causei um erro nos arquivos originais. A configurao roda perfeitamente no Ubuntu 11.04 64, obrigado! 14. Vincius
11 de fev de 2012 em 8:48 am

Excelente explicao, foi a nica que encontrei sobre o assunto, porm teve um pequeno detalhe que no ficou muito claro (pra mim): o diretrio includes fica exatamente onde? ou temos que cri-lo? No meu caso, eu simplesmente estou disponibilizando pastas compartilhadas no samba para usurios da rede, porm com acesso restrito, e queria s mudar o cabealho da pgina index of. 15.

9 de 10

12/05/2012 22:07

Personalizando o ndice Automtico de Arquivos do Apache - Devin

http://www.devin.com.br/apache-autoindex/

Fabyo
02 de abr de 2012 em 11:49 am

Para traduzir o cabealho usei jquery $(function(){ $(th)[1].innerHTML = Nome; $(th)[2].innerHTML = Data; $(th)[3].innerHTML = Tamanho; }); e apagar essas linhas para o cabealho voltar aparecer table tr th { display: none; }

Deixe uma Resposta


Nome (required) E-Mail (no ser publicado) (required) Website XHTML: V pode utilizar estas tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> oc <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

administrao

apache apt arquivos backup banco de dados bash certification comandos configurao css desenvolvimento devin distribuies dos
lpi mod_rewrite mysql pacotes parties

e-mail exam ftp htaccess html internet iptables kernel linha de comando servidores

php programao proxy rpm

shell shell-script ssh texto usurios vida web windows Wordpress x11

Devin - Tema modificado do StudioPress Theme RSS Completo - RSS dos Comentrios

10 de 10

12/05/2012 22:07