Lista el contenido de tus directorios, con estilo!
Septiembre 6, 2008
Esto solo funciona en servidores que corren Apache, ya que lo que haremos son configuraciones usadas por este servidor HTTP.
El listado de directorios, conocido en el bajo mundo como "index of", es producido cuando en una subcarpeta encontrada en la raíz del directorio de nuestro servidor web, o en la misma raíz del directorio, no se encuentra algún archivo servido por Apache si se hace la petición al directorio.
Por ejemplo, nuestro servidor raíz se encuentra en /www/s/sinfocol.org/httdocs/, la configuración del apache que se encuentra en el archivo httpd.conf, contiene las siguientes líneas de código:
DirectoryIndex index.php index.html index.htm
</IfModule>
Por lo tanto, si hacemos una petición a www.sinfocol.org, lo que en realidad hace el servidor es, ir al directorio raíz, y luego buscar los archivos especificados por medio del DirectoryIndex, así que primero buscaría el archivo
Si no es encontrado, procede con el siguiente archivo; hace esto sucesivamente hasta llegar al último archivo especificado en la directiva. Si no se encuentra ningunos de esos archivos, entonces el apache por defecto lista todo el contenido de dicha carpeta, menos los archivos especificados en la directiva "IndexIgnore", cuando busca archivos dados por expresiones regulares y niega su acceso.
IndexIgnore:
Archivos a los cuales niega el acceso
Order allow,deny
Deny from all
</FilesMatch>
La siguiente, es una imagen con el listado de directorio que por defecto realiza el Apache:
Para darle estilo a nuestro listado, primero debemos crear un archivo con nombre .htaccess dentro del directorio donde queremos listar los archivos. Estos .htaccess, son archivos utilizados para proveer una manera de crear configuraciones sin tener que modificar el archivo principal de configuración del Apache, las configuraciones solo tienen efecto en la carpeta y en el resto de subcarpetas donde es creado el .htaccess
Mas información sobre el .htaccess
Para personalizar nuestro listado, primero debemos crear dos archivos. El primero de ellos contiene la cabecera del listado, y el segundo contiene el pie del listado.
Cabecera del listado, al cual llamaré header.shtml
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Index of <!--#echo var="REQUEST_URI" --> | Seguridad Informática Colombiana</title>
<link rel="stylesheet" href="http://www.sinfocol.org/style.css" type="text/css" media="screen" />
</head>
<body>
<center>
<h1>Index of <!--#echo var="REQUEST_URI" --></h1>
La extensión .shtml, se debe a que el contenido es dinámico, entonces como no estamos haciendo una página para cada directorio, con el .shtml podemos generar el nombre en el cual estamos ubicados. Para esto se usó la función echo REQUEST_URI (Es la ruta que contiene el URL que el usuario observa en su navegador).
En la cabecera podemos cambiar la hoja de estilo, que contiene el estilo de nuestro listado.
El pie del listado, al cual llamaré footer.html (Nótese que esta extensión ya no es .shtml, porque no es necesario que se interprete nada desde el lado del servidor)
</body>
</html>
El listado se hará entre el </h1> que encierra la ruta a la cual se hace petición, y el </center> del footer.html
Cuando hacemos esto, lo único que hará el Apache, es centrar el listado y añadirle la hoja de estilo que indicamos en el header.shtml
Lo único que faltaría es agregar opciones que se encuentran en este link http://httpd.apache.org/docs/2.2/mod/mod_autoindex.html, y añadir los iconos para que todo tenga una mejor apariencia.
Así que primero añadimos las opciones al .htaccess
Options +Indexes
IndexOptions FancyIndexing SuppressHTMLPreamble IconsAreLinks FoldersFirst SuppressRules IconHeight=16 IconWidth=16
Lo que hará este contenido será:
* Desactivar las reglas de sobreescritura.
* Habilitar el listado del directorio.
* Habilitar el listado personalizado.
* Suprimir el inicio del HTML. Hace necesario incluir un archivo el cuál se leera como el HTML inicial. Si no se encuentra este archivo, se dispone el contenido como usualmente se hace.
* Los iconos dirigen al archivo/directorio al cual se quiere acceder.
* Primero se listan los directorios, y luego los demás archivos. Solo funciona cuando FancyIndexing está activado.
* Suprime los <hr>.
* Hace que el tamaño de los iconos sea de 16x16 pixeles.
Ahora lo único que nos falta es añadir los iconos para cada carpeta y hacer que el Apache lea el header.shtml y el footer.html
AddIcon /iconos/pdf.png .pdf
AddIcon /iconos/binary.win.png .exe
AddIcon /iconos/binhex.png .hqx
AddIcon /iconos/deb.png .deb
AddIcon /iconos/diskimg.info.png .iso .img .nrg
AddIcon /iconos/tar.png .tar
AddIcon /iconos/world.png .wrl .wrl.gz .vrml .vrm .iv
AddIcon /iconos/compressed.png .Z .z .tgz .gz .zip .rar
AddIcon /iconos/a.png .ps .ai .eps
AddIcon /iconos/layout.png .html .shtml .htm
AddIcon /iconos/text.png .txt
AddIcon /iconos/c.png .c
AddIcon /iconos/php.png .php .php3 .phps .phtml
AddIcon /iconos/p.png .pl .py
AddIcon /iconos/f.png .for
AddIcon /iconos/dvi.png .dvi
AddIcon /iconos/uuencoded.png .uu .uue .uud
AddIcon /iconos/script.png .conf .sh .shar .csh .ksh .tcl
AddIcon /iconos/tex.png .tex
AddIcon /iconos/bomb.png core
AddIcon /iconos/back.png ..
AddIcon /iconos/hand.right.png README
AddIcon /iconos/folder.png ^^DIRECTORY^^
AddIcon /iconos/blank.png ^^BLANKICON^^
AddIconByEncoding (CMP,/iconos/compressed.png) x-compress x-gzip
AddIconByType (TXT,/iconos/text.png) text/*
AddIconByType (IMG,/iconos/image.png) image/*
AddIconByType (SND,/iconos/sound.png) audio/*
AddIconByType (VID,/iconos/movie.png) video/*
DefaultIcon /iconos/unknown.png
HeaderName /header.shtml
ReadmeName /footer.html
El directorio que se muestra en esta configuración, no es la ruta absoluta del sistema, sino el directorio raíz de nuestro servidor HTTP, en este caso /www/s/sinfocol.org/httdocs/.
Los iconos estarán entonces en /www/s/sinfocol.org/httdocs/iconos/, el header y el footer en /www/s/sinfocol.org/httdocs/.
El paquete completo se puede descargar de acá
La clave del comprimido es
Hay iconos que no estan asociados a las extensiones, pero es para configuraciones extra.
Finalmente nuestro directorio quedará con este aspecto:
http://www.sinfocol.org/archivos/
Si al intentar usar la configuración que doy acá, el servidor responde con error 500 (Internal Server Error), se puede quitar la línea del RewriteEngine off, que es la línea que posiblemente este ocasionando el problema.
Al igual, si el archivo header.shtml no es bien incluido, se debe cambiar la extensión a .html o bien agregar la siguiente línea al archivo .htaccess
Archivado en: Programación |
Muchas gracias, me ha sido muy útil este articulo... me interesaba darle un aire distinto al indexing del apache y su articulo me ha orientado muchísimo
Gracias también por el pack de iconos
Te pasastes loco buen dato.!!!
Hola, excelente articulo. Tengo una pregunta haber si me podeis echar una mano. Al indexar el directorio principal de mi web tambien aparece la carpeta "iconos" junto con el resto de carpetas y archivos que hay dentro de él. Hay alguna manera evitar que se indexe sin que por ello dejen de funcionar los iconos?. Gracias de antemano y un saludo...
Hola Edu, disculpa la demora al responder.
Se puede evitar que se indexen los archivos o carpetas haciendo uso de la directiva "indexIgnore"
Así que editamos nuestro .htaccess y colocamos algo de este tipo
IndexIgnore archivo1.png archivo2.bmp archivo3.txt icono
Así se estaría evitando que el servidor indexe el archivo1, archivo2, archivo3 y la carpeta "icono"
Muchisimas gracias por responder. Por fin ha desaparecido la molesta carpeta de iconos, que la verdad no tenia nada que ver con el resto de archivos y carpetas del directorio.
Enhorabuena por la web y saludos desde España.
Pues no lo consigo, subo todo el paquete completo en mi directorio y no se ve nada
Me sale: Internal Server Error
Puedes ayudarme?
Hola, muy buenos datos, no siempre se encuentra un blog de programacion hecha por Colombianos, gracias!!!! Lo malo es que no he podido descomprimir el archivo que subieron uso MAC y por alguna razon no he podido, Sale un mensaje de Error.. me podria enviar un zip sin clave por favor(supongo que es eso), Saludos!!!
Hola Giovanny, ya actualicé el archivo, intenta borrar el caché del navegador y descargarlo de nuevo, me avisas como te fue!
Hola me parece muy útil este blog y en especial muy bueno el paso a paso de la instalación.
Tengo 2 preguntas: 1. Donde debo colocar el css para que tome este mismo tipo de letra. 2. Hay alguna forma para que no trunque los nombres largos? ejemplo: HAMI_LCD_PC_MoiotorsQuotation-dear_Omar_on_091102_.pdf
Lo trunca a HAMI_LCD_PC_Moiotors..>
Gracias
En el código que se encuentra en header.shtml, en esta parte:
<link rel="stylesheet" href="http://www.sinfocol.org/style.css" type="text/css" media="screen" />
Ahí tienes que cambiar el atributo href por la dirección donde se encuentra tu hoja de estilos.
Para la segunda pregunta, para recortar el nombre del archivo N letras, en el .htaccess, en la misma línea del IndexOptions debes agregar esta directiva:
NameWidth=N
Donde N es el número de letras que queres que se vean.
Quedaría algo así:
IndexOptions FancyIndexing SuppressHTMLPreamble IconsAreLinks FoldersFirst SuppressRules IconHeight=16 IconWidth=16 NameWidth=20
El anterior ejemplo recorta todos los nombres a 20 letras.
Muchas gracias, me sirvio un monton el ejemplo, Quisiera saber como tengo que hacer para que los documentos word o excel se me abran en una ventana y no en el mismo frame.
Gracias
Adrian: La única forma en la que puedes lograr lo que quieres es usando JavaScript, puedes incluir el siguiente código en el archivo header.shtml dentro de la etiqueta <head>
<script type="text/javascript"> function addLinks() { var tags = document.getElementsByTagName("a"); var nombre = ""; var len = 0; for (var i = 0; i < tags.length; i++) { nombre = tags[i].getAttribute("href").toLowerCase(); len = nombre.length; if (len != 0 && (nombre.substr(len - 3) == "xls" || nombre.substr(len - 3) == "doc" || nombre.substr(len - 4) == "xlsx" || nombre.substr(len - 4) == "docx")) tags[i].target = "_blank"; } } window.onload = addLinks; </script>Gracias Sysroot, pude solucionarlo gracias a tu ayuda.
Saludos
Hola.
Muy bueno el how to! me funciona a la perfeccion.
Excelente el artículo. Lo de <!--#echo var="REQUEST_URI" --> no me corre. No muestra la url.
¿Necesito algún módulo adicional?
Gracias.
El módulo principal para manejar ese código es el mod_include (http://httpd.apache.org/docs/1.3/howto/ssi.html)
Incluye el código "Options +Includes" en el .htaccess para habilitar la inclusión de código.
Si tienes algún otro problema lo podemos ver con gusto.
Faltaba el módulo.
Muchas gracias,
M
eso seria si se tuviera un servidor dedicado o acceso a la carpeta PHP pero si se tuviera un hosting y quieres agregarle estilos a una carpeta como se haria ?
Maxterx: La configuración .htaccess sirve para tanto servidores dedicados como para servidores compartidos. Al menos con buenas configuraciones debería funcionar ya que la mayoría permite sobreescribir variables de Apache.
Buenas tardes muchachos!!!
Muy bien el miércoles!! Merecían ganar!!!
Al margen de los comentarios futboleros...
Podría alguien ayudarme? Seguí todo el tutorial pero no logro que tome el header.shtml ni el footer.html, continúa generando el default.
Un dato... Si pongo en el .htaccess la directiva "RewriteEngine Off" no puedo acceder directamente al directorio.
Muchísimas gracias por su ayuda
Saludos desde Argentina.
Viendo un poco más en detalle...
* Los módulos mod_autoindex y mod_include están activados.
* El header.shtml y footer.html se encuentran en el raiz de DocumentRoot
* El .htaccess está en el directorio a listar, toma bien los png para cada tipo de archivo y el indexado. El único inconveniente es que sigue generando el código html default, es decir, sin aplicar el estilo. Como si no encontrara el header y footer.
Me está volviendo loco!
=) ANDUVOOO!!!!! http://pryment.com.ar/descargas
El tema ahora es que no me reconoce la directiva SSI var="REQUEST URI" =(
Jaja gracias Cesar por el comentario futbolero
Disculpa que haya contestado tarde, acabo de entrar a tu sitio de descargas y parece que todo va perfecto, el REQUEST_URI es para mostrar la ruta actual del sistema y pues en estos momentos tu sitio lo muestra como tal, así que no creo que tengas problemas, igual si tienes alguna otra duda me puedes preguntar de nuevo
Excelente la informacion pero para mi caso era diferente al contrario de mostrar de una forma mas cool los directorios yo deseaba no mostrarlo ya que como es una aplicacion para doctores y cada doctor puede subir las imagnes de sus pacientes pues no era bueno que se listara el contenido de las carpetas imagenes por que todos ivan a ver todo por lo tanto esta fue mi solucion la cual esta desarrollada en cake
en la carpeta APP/ el htaccess debe de contener lo siguiente:
RewriteEngine on
RewriteRule ^$ webroot/ [L]
RewriteRule (.*) webroot/$1 [L]
Options -Indexes
y listo ya si ponia la direccion img/ ya me mada un error 404 por lo tanto ya no se listan las imagenes que deben de ser privadas ya nomas es de personalizar dicho error, gracias por el aporte