Chromium Web Browser Logo

Chromium extension tutorial

Download PDF

Por supuesto que no estamos hablando del elemento químico cromo («chromium» en inglés) sino del popular navegador web de código abierto para todos. Lo que desarrollaremos es una «extensión», una herramienta integrada al navegador y que tiene muy diferentes propósitos. Con fines didácticos haremos una extensión muy sencilla que nos redirige hacia una página web que nos devuelve simplemente nuestra propia dirección IPv4, ¡manos al teclado!

Continue reading

Download PDF

PHP Simple HTML DOM Parser

Download PDF

Para abrir el mes de junio seguimos el hilo en nuestros artículos que buscan difundir el conocimiento libre del Patrimonio Tecnológico de la Humanidad. En anterior oportunidad estudiamos PHP curl, una herramienta basada en cURL y por ende en libcurl (¡ea, esto último no lo mencionamos allá!). Como en ese caso obtuvimos un método para descargar páginas web enteras, incluso si hay que pasarle datos con el método POST y/o hay que introducir usuario y contraseña. Esta entrada busca extraer, analizar e incluso modificar dichos datos ¡vente con nosotros!

Continue reading

Download PDF

PHP tutorial

Download PDF

Un lenguaje importante y que hemos dejado de lado por años es el ya muy famoso lenguaje PHP. En desagravio publicamos esta entrada y le queremos dar características especiales: no insisteremos en ser detallistas al extremo, se trata de una introducción, un tutorial que lleve paso por paso a cualquier persona que desee aprender dicho lenguaje de programación. Por ello no publicaremos su historia, configuración del servidor, etcétera. Os recordamos que para aprender PHP sería bueno tener conocimientos mínimos de HTML, CSS y JavaScript.

Continue reading

Download PDF

¿Cómo funciona Mozilla Firefox? Motor Gecko y el Proyecto Quantum

Download PDF

Interesante es saber sobre cómo funciona el navegador web Mozilla Firefox (para nosotros, nuestro favorito) y vamos a diseccionar y explicar de manera sencilla, sin mayores pretensiones, sus diversos componentes. Para ello comenzaremos de atrás para adelante: el último Proyecto de Mozilla Firefox llamado «Quantum«, ¡Investiguemos juntos!

Continue reading

Download PDF
Python logo sin texto

Python http.server

Download PDF

La verdad es que revisando los temas publicados por nuestros colegas de GNULinuxBlog (por ahora quien publica el tema, el sr. Elías Rodríguez Martín y el sr. José Miguel, creador del blog) encontramos uno en particular muy útil y que nosotros habíamos enfocado de una manera un tanto complicada en comparación con la facilidad de lo que allí proponen. Cuando conseguimos que alguien es más listo que nosotros inmediatamente lo reconocemos y aprendemos de dichas personas, no tenemos rubor en admitirlo, por eso os pedimos que nos acompañéis en nuestro artículo de hoy: compartir ficheros de una manera rápida y sencilla con Python.

Python logo original
Python logo original

Continue reading

Download PDF

CSS Grid Layout specification

Download PDF

La Norma de Diseño de Cuadrícula que próximamente estará disponible en los navegadores web nos permite diseñar una serie de elementos por medio del Diseño de Hojas en Cascada (Cascade Style Sheets o mejor conocido por su acrónimo de tres letras CSS) con una rapidez asombrosa y pocas líneas de código. Por cierto, la imagen de introducción a este artículo fue creada por medio de código, no utilizamos el ratón ni una sola vez.

CSS Grid Layout
CSS Grid Layout

Continue reading

Download PDF
apache2 htacces

Mejorando la seguridad en Apache2 .htaccess

Download PDF

En una entrada anterior enseñamos como configurar mod_rewrite en nuestro .htaccess para poner a «punto de caramelo» nuestro Apache2 pero ahora es necesario preveniros de «haber abierto la caja de Pandora»: nuestro servidor web está expuesto a tácticas de intromisión y hasta toma de control por atacantes con malas intenciones. Sirva pues la presente para complementar y ayudaros a proteger vuestros equipos.

Apache mod_rewrite
Apache mod_rewrite

Continue reading

Download PDF
Apache mod_rewrite

Tutorial para configurar mod_rewrite en Apache sobre Ubuntu

Download PDF

Para los que «montamos» páginas web siempre es útil ocultar las extensiones de nuestros archivos a ser servidos y así despistar a posibles atacantes pero es mejor aún para que nuestros usuarios les sea más fácil recordar nuestras secciones e incluso promociones publicitarias, ¿ya tenemos vuestra atención?

Introducción.

En un mundo donde ya prácticamente todo el mundo introduce una búsqueda en Google o DuckDuckGo para llegar a nuestra página web -exponiéndose a redirecciones hacia páginas falsas por los buscadores web- pues nosotros nos empeñamos en utilizar la barra de direcciones de nuestro navegador web recomendado, Mozilla Firefox.

Es así entonces que podemos publicar alguna promoción en algún medio de comunicación como televisión o prensa y queremos que se pongan en contacto con nosotros por medio de una página web que a tal efecto hayamos programado para ello. Dicha dirección podría ser:

nuestrodominio.com/contacto

Como véis no incluimos «www» ni tampoco las dobles barras (de hecho Tim Berners-Lee se disculpó públicamente por haber hecho la redundancia y hacernos escribir billones de veces ese caracter adicional) ni «http:» -la mayoría de los navegadores web completan automáticamente la dirección- pero mejor aún hemos obviado la extensión del archivo .html, algo que consideramos podría confundir a cualquier usuario común (sí, que hasta los «nativos digitales» también se pueden equivocar).

La intención de este tutorial es CONFIGURAR nuestro servidor web para que acepte dicha dirección y redirija a nuestros posibles clientes de manera transparente y así, a futuro, trabajemos y aumentemos nuestros ingresos 😉 .

Prefacio.

Aunque no estamos escribiendo un libro, estas páginas web algún día las podríamos recopilar en un ejemplar, por eso el uso de la palabra «prefacio«. Lo que necesitaremos para nuestra práctica didáctica es un ordenador con Ubuntu 16 instalado (que también vale este tutorial para Ubuntu 14) al cual le instalaremos Apache2. Para nuestro caso nuestra máquina tiene una dirección IP fija en nuestra red área de local 192.168.1.47 CAMBIAD lo que veaís aquí por vuestra propia dirección IP local. Lo que acá escribimos es válido también para cuando queráis montar vuestro servidor de producción en la internet y solo está limitado por las restricciones que os imponga vuestro proveedor de hospedaje. Este tutorial es completo y el escenario sería o bien una máquina virtual o real que alquileís a un proveedor de alojamiento (es más costoso que alojamiento compartido) o vuestro ordenador con una dirección IP fija que os venda vuestro ISP y que os conécteis bien sea por «ADSL» o «frame relay«.

Instalando Apache Web Server:

Abrimos una ventana de comandos (si no sabéis cómo, leed nuestro tutorial) e introducimos el siguiente comando:

sudo apt-get update
sudo apt-get install apache2

La primera línea actualiza los paquetes disponibles para nuestra versión GNU/Linux que tengamos instalado (Ubuntu 16 en este ejemplo) y la segunda línea instala el servidor web Apache2, software que ha evolucionado mucho desde los años 90. Nótese que usamos «sudo» para tener derechos de administrador o «root» y deberemos colocar la contraseña respectiva (luego el sistema obvia esta solicitud si corremos varios comandos seguidos en corto período de tiempo). Podremos ver algo muy parecido a esto, si todo sale bien:

apt-get install apache2
apt-get install apache2

Para probar que tenemos nuestro servidor instalado podemos navegar hasta nuestra propia dirección IP o en su defecto podemos utilizar la palabra clave «localhost» y eso sí, en la barra de direcciones de nuestro navegador (los buscadores web NO mostrarán enlace hacia nuestro servidor).

Apache2 Ubuntu Default Page
Apache2 Ubuntu Default Page

Habilitando mod_rewrite.

Antes de meternos de lleno con mod_rewrite cumplimos con avisaros que también existe la función mod_alias que es muchísimo más sencilla para resolver rápidamente ciertas situaciones -e incluso cuenta con los comando más avanzados llamados «<Location>» y «<LocationMatch>«- .

Pero si queremos evolucionar y disponer de una herramienta poderosa (y compleja) estudiaremos mod_rewrite. Para activar mod_rewrite debemos ejecutar las siguiente líneas:

sudo a2enmod rewrite
sudo service apache2 restart

La segunda línea sirve para que el servicio o «daemon» reinicie con la configuración deseada. En el ambiente GNU/Linux son muy parcos y estoicos, si todo va bien simplemente veréis de nuevo el indicador de la línea de comando «prompt» -pero al finalizar el primer comando nos indica que falta alguna instrucción que sea importante para finalizar el comando-. ES DECIR no espéreis a cada rato mensaje de confirmación de comando ejecutado -otra cosa, en raras y contadas ocasiones deberemos hacer un reinicio completo de nuestro ordenador, con reiniciar los servicios respectivos tiene para seguir funcionando luego de nuestros cambios-.

Como ya sabéis los comandos en GNU/Linux diferencian letras mayúsculas de minúsculas y por supuesto debemos escribir muy bien los comandos, no como nosotros que nos equivocamos pero luego correjimos, mirad:

sudo a2enmod rewrite
sudo a2enmod rewrite

Configurando .htaccess

Ahora debemos crear un archivo (oculto, mirad el puntito que precede el nombre del fichero) muy importante en el funcionamiento de Apache. Si lo tenemos ubicado en el directorio raíz de nuestro servidor web se aplicará a todas las subcarpetas que tengamos pero cada subcarpeta podrá tener su propio «.htaccess» que regirá para la carpeta donde esté ubicado (y a su vez las subcarpetas que contenga) obviando las instrucciones que hayamos colocado en nuestro «.htacces raíz».

Pero antes, por razones de seguridad, debemos tener acceso (desde Apache) para crear y escribir dicho fichero, usamos nano -o vuestro editor de texto favorito- para modificar el siguiente archivo:

sudo nano /etc/apache2/sites-enabled/000-default.conf

Tras dentro del cual debemos insertar lo siguiente (notad los comentarios que insertamos en castellano en la imagen más abajo:)

  <Directory /var/www/html>
     Options Indexes FollowSymLinks MultiViews
     AllowOverride All
     Order allow,deny
     allow from all
  </Directory>
000-default.conf
000-default.conf

Es sumamente importante indentar las líneas (en nano lo podéis hacer rápidamente pulsando la tecla TAB para cada sangría) y respetar mayúsculas y minúsculas. Luego debemos reiniciar el servicio web Apache con el consabido comando:

sudo service apache2 restart

Como información adicional os contamos que el archivo «000-default.conf» es el archivo por defecto del primer dominio que sea servido por nuestro ordenador, es decir, podremos a futuro alojar varios dominios en una sola máquina. De este modo el segundo dominio utilizará el archivo «001-default.conf» y así sucesivamente, pero ¿cómo reconoce nuestro servidor web cual dominio entregar? Estad atentos más adelante en este tutorial os daremos noción de ello -y a futuro publicaremos una entrada totalmente dedicada a configurar un servidor Apache con varios dominios virtuales-.

Creando .htaccess

Ya que tenemos configurado a Apache para que acepte nuestro .htaccess procedemos a crearlo. Para ello debemos utilizar nuestro editor de archivos de texto favorito (usaremos nano en este caso) y escribiremos lo siguiente:

sudo nano /var/www/html/.htaccess

Y le agregamos una sola línea:

RewriteEngine on
RewriteEngine on
RewriteEngine on

Guardamos y luego debemos garantizar su acceso para los demás usuarios, nosotros o cualquiera otro usuario que edite nuestra página web (recordad que lo creamos con la credencial de administrador o «root»):

sudo chmod 644 /var/www/html/.htaccess

¡Y listo! Ya tenemos configurado nuestro .htaccess pero como decía Santo Tomás «hasta no ver, no creer» así que vamos a probar si es verdad que funciona.

Creando nuestra pequeña página web.

Como dijimos al principio haremos una página de contacto sin mayores pretensiones, en este ejemplo indicando nuestro correo electrónico de manera tal que no sea capturada por los robots que esparcen «spam» a diestra y siniestra (para una explicación más a fondo visitad nuestro tutorial sobre HTML5):

<html>
        <head>
                <title>Contacto.</title>
        </head>
        <body>
                <h1>Correo electr&oacutenico:</h1>
                <p> contacto EN 192.168.1.47 </p>
        </body>
</html>
contacto.html
contacto.html

Y al navegar desde nuestra barra de dirección de nuestro navegador web observamos que tranquilamente podemos obviar la extensión del archivo y nuestro Apache dará por bien servida a nuestros propósitos sin mayor configuración, pero…

contacto
contacto

… si escribimos «Contacto» (o cualquiera de sus variaciones en mayúsculas o minúsculas) veremos algo que se asemeja a esto:

Contacto
Contacto

Para solucionar esto hemos de echar mano en el archivo .htaccess y hacer uso de las expresiones regulares.

Usando expresiones regulares o racionales.

De antemano: Apache utiliza los conceptos de expresiones regulares o racionales desde el punto de vista del lenguaje Perl 5, ciertas diferencias hay que tenerlas muy en cuenta si usamos otros lenguajes que soportan o tienen librerías que permiten el uso de expresiones regulares (a saber hoy en día, sin que sea tajante la lista: AWK, C++, Java, JavaScript, PCRE, PHP, Python y .NET framework ).

sudo nano /var/www/html/.htaccess

Volvemos a modificar nuestro archivo .htaccess y agregamos la siguiente línea:

RewriteRule ^contacto.html$ contacto.html [NC]

Guardamos en inmediatamente la regla es puesta en funcionamiento, lo podemos comprobar al buscar nuestra página (recordad poner vuestra propia direción IP o dominio web) /Contacto.html y todas sus variantes, probad y volved.


Explicamos entonces la expresión regular -o racional- utilizada, el significado de cada metacaracter:

  • «contacto.html»: es el nombre del fichero al cual queremos «redirigir» de manera «transparente» al usuario, es decir, mostrará la página a pesar de como escriba el visitante el enlace web (mayúsculas o minúsculas).
  • «^»: representa todo el enlace a la izquierda de nuestra palabra clave (en nuestro caso el nombre de un fichero pero esto no es necesariamente así todo el tiempo, ya veremos más adelante).
  • «$»: representa todo el enlace a la derecha de nuestra palabra clave, éste y el anterior metacaracter actúan a modo de delimitadores, lo podemos ver de esa manera para simplificar su uso.
  • «[NC]»: es una bandera o banderín que indica que use indistintamente minúsculas y/o mayúsculas en nuestra palabra clave.

En conclusión que nuestros usuarios podrán escribir «contacto» con o sin extensión, en mayúsculas y/o minúsculas (todas sus combinaciones) -probad- más sin embargo las siguientes expresiones devolverán una respuesta 404 «página no encontrada»:

  1. 192.168.1.47/contacto.html/
  2. 192.168.1.47/contacto.htm
  3. 192.168.1.47/contact

En el primero se trata de abrir un subdirectorio, en el segundo y el tercer caso se trata de abrir un archivo totalmente diferente (casos que al final también analizaremos y trataremos).

Actualizado el sábado 5 de agosto de 2017.

Que este tema de las expresiones regulares da para una entrada completa en nuestro blog, por la red social Twitter econtramos una excelente imagen que lo explica muy rápidamente y a continuación leímos las opiniones de varios programadores al respecto. Os debemos ese tutorial y en cuanto hallemos tiempo libre de nuestro trabajo de ganarnos el pan de cada día lo haremos.

 

Reglas de «Rewrite».

De las expresiones regulares o racionales, ese tema solo, solito él, da para una entrada completa, sin embargo ya tenéis la práctica (si algo no tenéis claro subid y practicad de nuevo) y es por ello que acá estudiaremos unas cuantas reglas más avanzadas del comando «RewriteRule» -valga la redundancia multilingüe, si es que eso existe- utilizando las expresiones regulares o racionales para usos más avanzados, ¡vamos!

RewriteRule patrón sustitución bandera
  • Cada regla ha de colocarse en cada archivo .htaccess al principio de la línea con la palabra clave «RewriteRule«.
  • A continuación escribiremos el patrón a buscar en el enlace recibido por nuestro servidor web (ya comentamos de entrada mera que los navegadores web modernos agregan «http://www», colocan todo el dominio en minúsculas -NO los subdominios y archivos- y hasta completan «.com» si se escribe dominio y se presiona CTRL+INTRO).
  • Sustitución, osea, lo que queremos enviar a nuestro servidor web y que se comporte como si el mismo usuario lo hubiera escrito tal cual (si queréis, pensad en este proceso como un corrector ortográfico automático a toda petición web que llegue).
  • Opcional: bandera o banderín para modificar la regla.

Ejemplo sencillo: imaginad que ahora en nuestra cuenta Twitter, nuestro perfil, colocamos un enlace web para que los interesados sepan nuestro correo electrónico pero queremos reutilizar la paginita web «contacto.html» para ello, pues lo que debemos hacer es anteceder en nuestras reglas lo siguiente:

RewriteRule ^correoe$ contacto.html [NC]
RewriteRule ^contacto.html$ contacto.html [NC]

Como podeís observar en la primera línea, simplemente si un visitante escribe:

http://www.nuestrodominio.com/correoe

pues simplemente nuestro servidor web recibirá la orden de mostrar nuestro archivo «contacto.html» y listo, sin mayor trabajo hemos solucionado otro «problema» pero la cosa va más allá, vamos a preguntarnos ¿Qué tal si escribimos «Contacto.Html» en vez de «contacto.html»? Como bien sabéis en GNU/Linux (y los servidores web e internet en general) las mayúsculas se distinguen de las minúsculas, no son lo mismo a pesar que nuestro cerebro las siga tratando como iguales, ¿qué sucedería?

RewriteRule ^correoe$ Contacto.htmL
RewriteRule ^contacto.html$ contacto.html [NC]

Advertencia imagen pequeña

No, no estaís equivocados, en efecto, el archivo «Contacto.htmL» NO existe en nuestro servidor web pero igual nos «devuelve» el contenido de «contacto.hmtl», resulta y acontece que cada regla se ejecuta una a una y la siguiente regla corrige lo que entrega la regla anterior -muchas otras personas lo ven como si se «sobreescribe» la una a la otra, pero en realidad nosotros lo vemos de manera muy similar al comando tubería «|» que utiliza el shell de GNU/Linux.

Anda, probad a gusto tu archivo .htaccess, quitad la segunda línea y ensayad, luego volved y seguiremos practicando otras cosillas.


Utilizando patrones alternos.

En este punto continuaremos con el ejemplo anterior: ¿qué tal si queremos escribir ambas reglas en una sola línea?

Para ello haremos uso del los paréntesis normales «()» y el metacaracter «|» que en este caso viene a significar «o» («or» en idioma inglés) -no confundir con el comando grep que mencionamos párrafos arriba, son contextos diferentes debido a que están encerrados entre paréntesis-:

RewriteRule ^(contacto.html|correoe.html)$ contacto.html [NC]

Ya sabemos como funciona la regla, aquí lo nuevo es como expresamos el patrón y le estamos indicando que ya sea que recibamos «contacto.html» o «correoe.html» -en mayúsculas y/o minúsculas mirad la bandera– siempre «devolverá» la cadena de texto «contacto.html», precisamente el nombre del fichero que mostrará nuestro servidor web. Incluso podemos ir más allá y quitar las extensiones «.html» del patrón e igual funcionará, probad esto:

RewriteRule ^(contacto|correoe)$ contacto.html [NC]

Utilizando el pase de parámetros.

De nuevo seguimos el hilo con el ejemplo anterior, ¿qué tal si quisiéramos saber cómo llegó nuestro usuario hasta nuestro servidor -preguntando por «correoe.html» o «contacto.html»?

Esto lo podemos lograr insertandole un poco de lenguaje PHP, pero vayamos por partes y configuremos nuestro ordenador:


En nuestro servidor web Apache debemos instalar las librerías que soportan PHP versión 7 (en Ubuntu 16):

apt-get install libapache2-mod-php
sudo a2enmod php7.0
sudo service apache2 restart
  1. En la primera línea instalamos las librerías php.
  2. En la segunda línea activamos php 7 para Apache.
  3. En la tercera línea reiniciamos el servicio Aapache.

Si todo va bien podremos examinar la configuración PHP con un archivo que podemos crear nosotros mismos con una línea: «<? phpinfo() ?>» y lo guardamos con el nombre que más nos guste. Al «llamarlo» por el navegador web nos mostrará algo parecido a lo siguiente:

PHP 7 en Apache 2 sobre Ubuntu 16
PHP 7 en Apache 2 sobre Ubuntu 16

NOTA: en un servidor «en producción» por razones de seguridad NUNCA debemos dejar un archivo con la función «phpinfo()» : haría que cualquier atacante conozca nuestro «entorno» y le sea más fácil utilizar herramientas específicas contra las versiones de software que tengamos instalado en nuestro ordenador configurado para trabajo público.


Ha llegado la hora, pues, de modificar nuestro .htaccess para que trabaje con lenguaje PHP:

AddType application/x-httpd-php .html .htm
RewriteRule ^(contacto|contacto.html|correoe)$ contacto.html?origen=$1 [NC,QSA]
  • En nuestro archivo .htaccess la primera línea indica a nuestro servidor Apache que trate los archivos .html y .htm como .php .
  • En la segunda línea añadimos la bandera «QSA» («Query String Append») la cual permite pasar de manera intacta la palabra clave recibida, tal cual fue escrita, por medio de un método GET al «interior» del archivo HTML («?origen=$1»).
  • Por último el comodín $1 indica por cual de las opciones «entra» la consulta (si tuviéramos otro paréntesis con opciones «|» recuperaríamos dicha coincidencia o elección con $2 y así sucesivamente).
RewriteRule y variables seleccionadas
RewriteRule y variables seleccionadas

En nuestro archivo «contacto.html» modificamos para que reconozca las palabras claves «contacto» y «correoe»: con la primera escribiremos «Gracias por conocer nuestra promoción en TELEVISION» y a la segunda «Gracias por conocer nuestra promoción en PERIÓDICO».

  • «contacto» -> «TELEVISION».
  • «correoe» -> «PRENSA».
<html>
  <head><title>Contacto.</title></head>
  <body>
    <?php
      $parametro = strtolower($_GET['origen']);
      $contacto = strpos($parametro,'contacto');
      if ($contacto !== false) {
        echo(' ¡Gracias por conocer nuestra promoción en TELEVISION!');
      }else{
        echo(' ¡Gracias por conocer nuestra promoción en PRENSA!');
      }
    ?>
    <h1>Correo electr&oacutenico:</h1>
    <p> contacto EN 192.168.1.47 </p>
  </body>
</html>

Como veís con el lenguaje PHP buscamos la palabra clave «contacto» para notificar que el cliente vio la promoción por televisión, el otro único valor posible es «correoe» ya que la regla mod_rewrite filtra lo que escribe el usuario.

  • Con el comando $_GET[‘origen’] obtenemos la cadena $1 del comando RewriteRule.
  • Con el comando strtolower() lo convertimos todo a minúsculas.
  • Con el comando strpos() obtenemos FALSO si no se haya la palabra clave, de lo contrario devuelve un valor mayor o igual a cero.
  • Teniendo en cuenta lo anterior se debe utilizar la comparación ($contacto !== false) por negación para obtener el resultado correcto.

Hasta acá hemos considerado que el usuario o visitante escriba ya sea «correoe» o «contacto» -con todas sus variantes, con o sin extensión (.html o .htm) pero ¿Qué ocurriría si, dado el caso, el navegante escribiera «correo», es decir, obviara la última letra? En este caso nuestro servidor simplemente devolvería un mensaje de error 404 como este:

Ejemplo de página no encontrada.
Ejemplo de página no encontrada.

Podemos, con propósitos didácticos, ampliar nuestro estudio de Rewrite con un comando adicional: RewriteCond.

Reglas de «RewriteCond».

El comando «RewriteCond» nos permite evaluar una condición y de ser cierta ejecutará la siguiente e inmediata línea «Rewrite» de lo contrario la saltará y seguira evaluando el resto de las líneas de nuestro fichero .htaccess (si es que hubieran más líneas). Otro punto a tener en cuenta es que se pueden tener varias líneas RewriteCond contínuas una después de la otra y si alguna se cumple se ejecutará la siguiente e inmediata línea «Rewrite».

Veamos la sintaxis de RewriteCond:

RewriteCond cadena condicion banderas
  • RewriteCond: el comando en sí mismo que debe ser sucedido en la siguiente línea con un comando «RewriteRule».
  • Cadena: lo que vamos a comprobar, la entrada de datos.
  • Condicion: lo que le vamos a aplicar a la cadena, con la que vamos a comparar y que nos devolverá un valor verdadero o falso.
  • Banderas: modifican el comportamiento de la condicion y va entre corchetes y separadas por comas, si son varias y tal como lo vimos con el comando «RewriteRule».

Como vemos ya tenemos la teoría, ahora vayamos a la práctica. Seguiremos con nuestro ejemplo anterior: ¿qué sucede si el visitante de nuestra página web escribiera mal la dirección web (URI) y obtuviera un mensaje con error 404?

Podríamos «redirigir» la dirección solicitada hacia la página principal de nuestro servidor web de manera transparente con nuestro archivo .htaccess pero primero una advertencia:


Advertencia imagen pequeña

Esta NO es la manera correcta de tratar una visita a nuestra servidor web que no contenga, por alguna razón (página borrada, error del usuario, etc) una URI solicitada. Lo «legal» es manejar el error 404 con una página web personalizada (de hecho la que vemos es la que trae Apache por defecto) y recomendamos que transcurrido un tiempo necesario para su lectura sea redirigida automáticamente hacia nuestra página web principal (esto escapa a este tutorial pero podéis hacerlo con JavaScript o incluso PHP).

Para configurar nuestra propia página web personalizada para el error 404 podemos hacerla a nuestro gusto/diseño y nombrarla, por ejemplo, «404_personalizado.html» y ubicarla en el directorio raíz para luego agregar a nuestro archivo .htaccess la siguiente línea:

ErrorDocument 404 /404_personalizado.html

Retomando nuestro ejemplo podemos agregar a nuestro .htaccess las siguientes líneas que evaluarán y tratarán la entrada de la URL recibida y la ubicaremos al final del fichero para que sea ejecutada en último lugar (si la colocamos antes al llegar una consulta por «/correoe» automáticamente será redirigida a la página principal):

AddType application/x-httpd-php .html .htm
RewriteEngine on
RewriteRule ^(contacto|contacto.html|correoe)$ contacto.html?origen=$1 [NC,QSA]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ %1

Las 3 primeras líneas ya las hemos explicado y aprendido ahora expliquemos las dos líneas agregadas:

  • «RewriteCond»: El comando que nos permite evaluar una condición.
  • «%{REQUEST_FILENAME}»: El archivo solicitado, luego de haber recibido la URI (con confundir con {REQUEST_URI} ).
  • «!»: es un operador lógico que invierte un valor, por ejemplo de falso a verdadero.
  • «-f»: Le indica a nuestro servidor que compruebe si es un archivo es «regular», esto es, que esté bien escrito y que exista en nuestro ordenador -y devuelve verdadero si esto se cumple-.
  • Si no se cumple el punto anterior y devuelve falso con el operador «!» lo convertimos en verdadero y tenga la respuesta positiva para ejecutar la siguiente línea «RewriteRule».
  • «RewriteRule»: con la respuesta positiva recibida comienza a trabajar comparando con el patrón siguiente.
  • «^(.*)$»: los metacaracteres «^» y «$» ya los conocemos, los nuevos son «.» y «*» que indican que compare -y acepte- cualquier caracter y cualquier cantidad de los mismos, es decir, acepte toda entrada posible (el punto indica que puede ser cualquier caracter y el asterisco indica que dicho caracter se puede repetir cualquier cantidad de veces). Como cumple con el patrón procede a aplicar la regla.
  • ¿Recuerdan la variable «$1» que nos permitía elegir que opción de un patrón recibíamos? Ahora con la variable «%1» nos permite pasar intacta la referencia recibida de la «RewriteCond» (la parte que corresponde a nuestro dominio) que desencadenó la ejecución de la «RewriteRule».

En este punto consideramos prudente mostrar de forma un tanto gráfica la nomenclatura de

Un último ejemplo de «RewriteCond».

Para finalizar este tutorial vamos a proponernos el bloquear el acceso a una dirección IP4 en particular. Para nuestros propósitos didácticos tenemos una red de área local con nuestro servidor web en 192.168.1.47 (la misma a lo largo de toda esta entrada) y una máquina virtual con la dirección IP4 192.168.1.78 la cual queremos bloquear y para ello agregaremos lo siguiente:

RewriteCond %{REMOTE_ADDR} ^(192\.168\.1\.78)$
RewriteRule (.*) - [F,L]

Pasamos a explicar línea por línea y comando por comando:

  • «RewriteCond»: comando para evaluar una condición.
  • «%{REMOTE_ADDR}»: una variable que contiene la dirección IP del visitante.
  • «^» y «$»: delimitadores izquierdo y derecho de la dirección IP recibida.
  • «(» y «)»: cadena a evaluar con expresion regular.
  • «\»: la barra invertida sirve para indicarle a nuestro servidor web que el punto a la derecha lo considere como símbolo y NO como metacaracter (ver ejemplo anterior de error 404).
  • Los números pues son la dirección IP a bloquear.
  • «RewriteRule»: es la línea que sirve a la(s) última(s) «RewriteCond».
  • «(.*)»: indica que acepte cualquier cadena de texto -ver ejemplo arriba-.
  • «-«: un guión para que NO sustituya nada ya que la bandera hará el trabajo por nosotros -ver siguiente punto-.
  • «[F,L]»: son dos banderas con dos instrucciones diferentes, la letra «F» le indica que envie el «mensaje» de prohibido (en realidad devuelve un «error 403» el cual también podemos personalizar con un fichero .html a nuestro gusto y conveniencia tal y como lo hicimos con el «No encontrado 404»). La letra «L» es muy importante e indica que es la última («last») regla a aplicar y que no revise las siguientes (si las hubiere) líneas en .htaccess . Esto es así porque si de plano le prohibimos el acceso ¿para qué vamos a revisar reglas adicionales?

La probamos y veremos algo muy similar a esto:

403 Forbidden
403 Forbidden

Si por el contrario queremos que solamente esa dirección IP tenga acceso al servidor web (por ejemplo queremos»administrar» nuestro servidor desde esa única y exclusiva dirección IP, sin que nadie nos moleste) simplemente antecedemos el caracter lógico «!» que inverte la respuesta de la comparación.

Fuentes consultadas:

En idioma castellano:

En idioma inglés:

Enlaces hacia expresiones regulares:

En idioma japonés:

 

Download PDF

Let’s Encrypt @LetsEncrypt.

Download PDF

«Let’s Encrypt» es un proyecto de la «Electronic Frontier Foundation» en colaboración con la «Linux Foundation» para promover uso del protocolo HTTPS.

For english speakers: this is a merely translation into castilian language of an article year ago published by «Electronic Frontier Foundation» (also known as EFF acronym) where it announces the starting project «Let’s Encrypt».

Continue reading

Download PDF