jueves, 25 de julio de 2013

6. Asegure su Tema de WordPress

(El artículo original y en inglés, fue publicado el 30 de octubre de 2012)

ThemeShaper es el sitio del Equipo de Temas de Automattic, que, en junio de 2009, publicaron una muy popular serie de 11 artículos de Ian Stewart, bajo el título: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial (Como crear un Tema de WordPress: el tutorial definitivo).
El año pasado, reflotaron y actualizaron ese tutorial. Esta vez con 16 artículos a cargo de Michelle LangstonThe ThemeShaper WordPress Theme Tutorial: 2nd Edition (Tutorial de Temas de WordPress de ThemeShaper. Segunda edición).
Me propongo traducir libremente esas 16 entradas (además de la introducción) e ir publicándolas a medida que las tenga listas.
Al final de cada entrada va el listado con todas las entradas de este tutorial.

Ya estamos casi listos para empezar a construir los archivos de plantilla de nuestro Tema. Sin embargo, antes de hacerlo, es el momento para una rápida sesión informativa sobre la validación y saneamiento de datos, un procedimiento importante que tomaremos para asegurar que nuestro Tema siga las mejores prácticas de seguridad.

¿Por qué es importante la seguridad de un Tema?

La siguiente línea, tomada de la página de Codex de WordPress sobre Validación de datos, lo resume perfectamente:
Los datos no confiables puede provenir de muchas fuentes (usuarios, sitios de terceros, ¡su propia base de datos!,...) Y todo ello necesita ser validado, tanto en la entrada como en la salida.

Tenemos que asumir que todos los datos que entran y salen de su base de datos de WordPress son inseguros, y validarlos y sanearlos dependiendo de la naturaleza de los datos y del contexto en el que son usados. Esto ayuda a prevenirse de código y etiquetado que tome "vida" cuando trata de mostrarlo en sus sitio. Por ejemplo, no queremos que, código html ingresado en un campo de texto en una página de configuración, se ejecute como html real dentro de los archivos del Tema, porque podría romper el diseño del sitio.

O aún peor, si es que ese código que toma "vida" es JavaScript o una consulta SQL, porque entonces su sitio podría estar en riesgo de un ataque Cross-Site Scripting (XSS) o de una inyección SQL.
WordPress brinda varias funciones que podemos usar para hacer seguros nuestros datos. Estas funciones ayudan mediante:
  1. la conversión de los caracteres especiales, como las comillas dobles y simples, los ampersands, y los signos de mayor que y menor que en sus entidades html equivalentes (", <, >, etc) para que no puedan ser interpretadas como código. Esto se conoce como saneamiento de salida o escape.
  2. asegurándose que la información que está por entrar en su base de datos es del tipo que se espera (por ejemplo, revisando que un campo de texto realmente contiene texto seguro libre de etiquetas html). Esto se conoce normalmente como verificación de entrada.
De los puntos precedentes, durante este tutorial, nos centraremos principalmente en el punto 1, saneamiento o escape de datos.
El segundo escenario se vuelve importante para los Temas que reciben datos de los usuarios, como en una página de opciones de un Tema. Sin embargo, las páginas de opciones de los temas están fuera del objetivo de este tutorial.

Saneamiento/Escape de salida

A lo largo de este tutorial, nuestras principales armas de elección para el saneamiento de datos serán esc_attr(), y esc_attr_e(). A veces usaremos otras, y me referiré a ellas cuando llegue el momento.

Estas dos funciones eliminan caracteres -como comillas, signos de mayor que y menor que y ampersands- que al ubicarlos dentro de atributos html pueden ser malinterpretados como código. esc_attr() es para escapar código para usar con php, mientras que esc_attr_e() se usa cuando queremos hacer echo (mostrar en la pantalla) del código que estamos escapando.
Aquí va un ejemplo verdadero, usando código con el que trabajaremos en nuestra lección sobre la plantilla index.

<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'shape' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>

Este código muestra los títulos de las entradas. Aunque no entienda todo lo que hace, ¿nota como usamos esc_attr() para envolver todo lo que va dentro del atributo title= en la etiqueta? Damos por inseguros toda la información dentro de los atributos html. Es así que: <?php echo esc_attr( sprintf( __( 'Permalink to %s', 'book' ), the_title_attribute( 'echo=0' ) ) ); ?> puede contener cualquier cosa, inclusive caracteres potencialmente peligrosos para la seguridad.
esc_attr() agrega una capa de protección al convertir los caracteres inseguros a su entidad html equivalente.
Veremos más ejemplos como este mientras avancemos con las lecciones.
Para una lectura en profundidad sobre saneamiento y verificación de datos, vea nuesto Data Validation and Sanitization With WordPress de Stephen Harris.
¡Ya está en camino a convertirse en un desarrollador con conciencia en seguridad!

Sumario de entradas

  1. Introducción.
  2. El desarrollo de su "sentido temático".
  3. Herramientas para el desarrollo de Temas de WordPress.
  4. Creación de una estructura html para su Tema de Wordpress.
  5. Plantillas y estructura de directorios de un Tema de WordPress.
  6. Configuración de las funciones de su Tema.
  7. Asegure su Tema de WordPress.
  8. La plantilla cabecera del Tema de WordPress: header.php.
  9. La plantilla Index de su Tema de WordPress.
  10. Las plantillas Entrada Individual, Entrada de Adjuntos y error 404 del Tema de WordPress .
  11. La plantilla de comentarios de un Tema de WordPress.
  12. La plantilla de búsqueda (search) y la plantilla página (page) del Tema de WordPress.
  13. La plantilla Archivo .
  14. Las plantillas "sidebar" (barra lateral) y "footer" (pie de página) del Tema de WordPress.
  15. Como resetear y reconstruir los CSS de su Tema de WordPress y definir su diseño.
  16. Fondo y cabecera personalizados.
  17. Distribuir su Tema de WordPress.

No hay comentarios:

Publicar un comentario

Lo que escriba a continuación será revisado antes de publicarse.
Gracias por tus comentarios.