¿Qué son las cabeceras de seguridad?

Cuando accedemos a un sitio web, el servidor contesta, además de con el contenido de la web, con una serie de cabeceras que son interpretadas por el navegador. Estas cabeceras son utilizadas por el servidor y por el navegador para el envío de información.

Esta información es de gran valor para un atacante, ya que estos mensajes de bienvenida del servidor web son la pista principal para conocer qué servicio es el que se ofrece, qué tecnología se está utilizando y ver los posibles errores al manipular peticiones. Podemos decir que sería una de las principales actividades que realizaría un atacante durante la fase de reconocimiento.

Algunas de las cabeceras que podemos habilitar en nuestro sitio son:

X-Frame-Options
El objetivo de establecer esta cabecera es proteger contra los ataques de clickjacking. Sirve para prevenir que la página pueda ser abierta en un iframe.

Los valores que puede tomar esta cabecera son:

  • DENY: prohíbe cualquier intento
  • SAMEORIGIN: permite usar el contenido sólo desde el propio dominio
  • ALLOW FROM: permite usar el contenido en las URLs indicadas

X-Content-Type-Options
El objetivo de establecer esta cabecera es evitar que se cargue un archivo JS ó CSS con un MIME-Type diferente al declarado. Es decir, si declaramos esa cabecera y establecemos el valor nosniff no se cargará por ejemplo un archivo CSS a menos que su MIME coincida con “text/css”.

Lo mismo para los archivos JS, se bloqueará la carga de estos archivos a menos que el MIME-Type coincida con:

  • «application/ecmascript»
  • «application/javascript»
  • «application/x-javascript»
  • «text/ecmascript»
  • «text/javascript»
  • «text/jscript»
  • «text/x-javascript»
  • «text/vbs»
  • «text/vbscript»

Esto es muy útil ya que permite bloquear archivos enmascarados que puedan ejecutar código malicioso en nuestro sitio.

X-XSS-Protection
El objetivo es habilitar o no el filtro anti XSS de los navegadores. Se trata de una capa adicional que bloquea ataques XSS a través del navegador y que ya implementan IE y Chrome.

Los valores que podemos establecer son:

X-XSS-Protection: 1; mode=block Activado
X-XSS-Protection: 0; mode=block Desactivado

Strict-Transport-Security
HTTP Strict Transport Security (HSTS) es un mecanismo de política de seguridad web según la cual un servidor web declara a los navegadores compatibles que deben interactuar con ellos solamente mediante conexiones HTTP seguras (TLS/SSL).

La vulnerabilidad más importante que la cabecera de seguridad HSTS puede prevenir es la extracción de SSL en ataques man-in-the-middle (ataque en el que se adquiere la capacidad de leer, insertar y modificar a voluntad, los mensajes entre dos partes sin que ninguna de ellas conozca que el enlace entre ellos ha sido violado).

Un ataque de extracción SSL convierte una conexión segura HTTPS en una conexión normal HTTP.

Content-Security-Policy
Content Security Policy (CSP) es un estándar de seguridad informático introducido para evitar cross-site scripting (XSS), clickjacking y otros ataques de inyección de código resultantes de la ejecución de contenido malicioso en el contexto de la página web.

Tiene un poco de miga ya que puedes definir el bloqueo a la carga de scripts, CSS e imágenes de dominios externos. Si utilizas un cdn debes tenerlo en cuenta y personalizar esta cabecera en función de tus necesidades. Incluso si cargas fuentes o maps de google, analíticas, banners o publicidad de terceros, etc…

Es decir, hay que crear listas blancas donde definir la fuente o el origen que permitimos para los scripts, estilos, imágenes, fuentes, frames, objetos (, o ), conexiones AJAX, elementos media (, ), formularios… En el ejemplo más abajo he puesto la cabecera por defecto para permitir estos elementos sólo de tu propio dominio. Aquí tienes un generador online para crear esta cabecera de seguridad de forma personalizada. Es soportada por la amplia mayoría de los navegadores web modernos.

Public-Key-Pins
HTTP Public Key Pins (HPKP) es un mecanismo de seguridad que permite a los sitios web con certificado HTTPS resistir la suplantación de certificados fraudulentos por parte de un atacante. Cuando se visita una web bajo SSL se produce una cadena de certificación que comprueba que el certificado de seguridad está asociado a ese dominio, que es válido, que está aprobado, etc. Un atacante podría alterar esa cadena con certificados fraudulentos. La cabecera de seguridad HPKP requiere una configuración avanzada.

¿Cómo añadir las cabeceras de seguridad HTTP a nuestro WordPress?

A pesar de que tan sólo añadiendo unas líneas a nuestro functions.php o .htaccess podemos incrementar la seguridad de nuestro sitio, es una opción que al parecer no se ocupa mucho.

Antes de implementar puedes comprobar si tu sitio usa este tipo de cabeceras a través de esta herramienta online: https://securityheaders.io/.

Añadir cabeceras de seguridad a través de functions.php

Simplemente añadimos estas líneas en nuestro functions.php:

function add_security_headers() {
    header( 'X-Content-Type-Options: nosniff' );
    header( 'X-Frame-Options: SAMEORIGIN' );
    header( 'X-XSS-Protection: 1;mode=block' );
    header( 'Strict-Transport-Security: max-age=10886400' );
    header( 'Content-Security-Policy: default-src self' );
}
add_action( 'send_headers', 'add_security_headers' );

Añadir cabeceras de seguridad a través de .htaccess

Simplemente añadimos estas líneas en nuestro .htaccess:

Header always append X-Frame-Options SAMEORIGIN
Header set X-Content-Type-Options nosniff
Header set X-XSS-Protection "1; mode=block"
Header set Strict-Transport-Security "max-age=10886400; includeSubDomains; preload"
Header set Content-Security-Policy "default-src 'self'"
Cómo cambiar el añadir al carrito

Cuando hablamos de una tener una tienda y sobre todo personalizable, sin duda alguna se nos viene a la mente WooCommerce.

Platicar sobre personalización en nuestra tienda es todo un mundo, es por ello que en este post comenzaremos con un ajuste sumamente básico que te ayudará a darle un plus a tu sitio y hará que luzca mucho mejor; como lo es cambiar la leyenda «Añadir al carrito» en los botones de nuestra tienda.

Al ser un ajuste básico, les compartiré una serie de códigos listos para que ustedes lo puedan modificar y colocar directamente en su archivo functions.php de su tema (preferentemente que sea en su Child theme)

Cambiar el botón «Añadir al Carrito» en la Página de Producto

add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text' );    // 2.1 +
 function woo_custom_cart_button_text() {
        return __( 'Mi botón personalizado | WPPuebla', 'woocommerce' ); 
}

Cambiar el botón «Añadir al Carrito» por Categoría

Particularmente con este código, tendremos que modificar más que la leyenda del botón, deberemos cambiar el ID de acuerdo a la categoría en la que queramos hacer el ajuste.

add_filter( 'woocommerce_product_add_to_cart_text', 'ayudawp_texto_carrito_por_categoria' );
  
function ayudawp_texto_carrito_por_categoria() {
global $product;

$terms = get_the_terms( $product->ID, 'product_cat' );
 foreach ($terms as $term) {
            $product_cat = $term->name;
            break;
}
 
switch($product_cat)
{
    case 'categoria1'; //Nombre de una categoría
        return 'Texto del botón para la categoría 1'; break;
    case 'categoria2';
        return 'Texto del botón para la categoría 1'; break;
    default;
        return 'Texto del botón por defecto para el resto de categorías'; break;
}
} 

Cambiar el botón «Añadir al Carrito» en el Archivo de Productos

add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' );    // 2.1 +
 function woo_archive_custom_cart_button_text() {
        return __( 'Mi botón personalizado | WPPuebla', 'woocommerce' );
} 

Cambiar el botón «Añadir al Carrito» por tipo de producto en el Archivo de Productos

 add_filter( 'woocommerce_product_add_to_cart_text' , 'custom_woocommerce_product_add_to_cart_text' );
/**
 * custom_woocommerce_template_loop_add_to_cart
*/
function custom_woocommerce_product_add_to_cart_text() {
 global $product;
  $product_type = $product->product_type;
  switch ( $product_type ) {
 case 'external':
 return __( 'Comprar productos', 'woocommerce' );
 break;
 case 'grouped':
 return __( 'Ver productos', 'woocommerce' );
 break;
 case 'simple':
 return __( 'Añadir al carrito', 'woocommerce' );
 break;
 case 'variable':
 return __( 'Selección de opciones', 'woocommerce' );
 break;
 default:
 return __( 'Leer más', 'woocommerce' );
 }
} 

Por último, si no estás seguro de querer echarle mano al código. Puedes personalizar tus botones directamente desde una interfaz simple con el plugin Add to Cart Button Custom Text.

¿Tienes dudas sobre otros botones? ó ¿tienes tus propios códigos de personalización? ¡Platicanos en los comentarios! 🙂
Si te ha gustado este post, te invito a que lo compartas con tus amigos y estés al pendiente de los próximos posts, así como de los Meetups que tenemos cada mes.

Click Acá perro
¿Por qué es importante usar Child themes? y ¿cómo crear uno?

Si has llegado a este post, probablemente ya llevas bastante tiempo con tu sitio WordPress. Sin embargo, has llegado a una encrucijada muy importante, deseas personalizarlo.

En caso contrario, back to the basics.

¿Qué es un Tema Child de WordPress?

Un child theme (tema child, tema hijo), es un tema que funciona en conjunto con otro tema (Tema padre o bien Parent theme). Este le indica a WordPress que es un child theme y quién es su tema parent. Seguido de esto, WordPress tomará en primera instancia el código del tema parent y en caso de tener código personalizado en el tema child, éste se sobrescribirá.

Estructura de un Tema Child en WordPress

Normalmente para que un child theme funcione en Wordress, éste debe contar con dos archivos como mínimo, sin embargo, personalmente me gusta agregar un 3ero.

  1. Hoja de estilos (style.css), esta tendrá un encabezado a manera de comentarios los cuales le indican a WordPress que es un tema child, así como su nombre, su tema parent entre otras cosas.
  2. Archivo de Funciones (functions.php), este archivo debe incluir una función que encola los estilos del paren theme, es decir, es a través de esta función donde le indicamos a WordPress que respete los estilos del tema parent para nuestro tema child.
  3. Imagen del tema, este me gusta agregarlo desde el momento en que creo un child theme, esta imagen es la que aparecerá como portada de nuestro theme child en el gestor de temas.

Punto importante a tomar en cuenta: existen muchas guías para llevar a cabo este proceso, algunas de ellas hacen mención que para heredar los estilos del tema parent debemos hacer el llamado a través de la hoja de estilos, esto ya no es correcto hacerlo; lo correcto es hacerlo a través del functions.php.

Ya va, me has platicado sobre que es un Tema child y cómo es su estructura, mejor cuéntame para que me sirve crear mi propio tema child.

Sin duda alguna la razón principal por la que debes usar un child theme es la personalización.  Sin embargo, te platicaré unos cuantos ejemplos.

  • Temas específicamente diseñados para ser Parent theme. Existen algunos temas diseñados para utilizarse como frameworks.
  • Quieres realizar cambios visuales, ojo no de funcionalidad (para esta parte es recomendable hacerlo mediante plugins propios).
  • Quieres modificar tu Parent child sin perder tus personalizaciones.

Si ya llegaste hasta este punto, ya sabes qué es un child theme y para que sirven. Ahora te platicaré algunas ventajas y desventajas para que tengas en cuenta a la hora de utilizarlo.

Ventajas

  • Celeridad. Si estás pensando construir un sitio completamente personalizado, te ayudará a llevar a cabo tu desarrollo mucho más rápido ya que heredarás muchas funciones y estilos del parent theme.
  • Actualizaciones. Podemos actualizar nuestro parent theme sin miedo a perder nuestras personalizaciones ya que estás no afectan a los estilos o modificaciones que hayamos hecho.
  • Frameworks. Nos permite aprovechar algún framework para realizar personalizaciones de nuestro sitio.

Desventajas

  • Rendimiento. Existe la posibilidad en que el sitio se ralentice debido al llamado de estilos y funciones que llama del paren theme (Sin embargo, esto tiene que ver un poco más con el parent theme).
  • Personalización. Así como podremos llevar a cabo muchas personalizaciones, si no cuentas con muchos conocimientos técnicos, es posible que necesites de un desarrollador web que se asegure que las personalizaciones que lleves acabo no interfieran con el parent theme y afecte el aspecto de tu sitio web.

¡Muy bien! Ahora ya tienes panorama más amplio respecto a los child themes. Hasta aquí terminamos con la teoría, es momento de ponernos ¡manos a la obra!

¿Cómo crear un Child Theme de WordPress?

Como lo vimos anteriormente, un child theme básico lo componen 3 archivos: la hoja de estilos, archivo de funciones yla imagen de portada.

Antes de empezar directamente con los archivos, debemos crear la carpeta que los va contener.  Esta carpeta (El nombre de la carpeta es indistinto) la crearemos dentro de wp-content/themes dentro de tu instalación de WordPress.

La hoja de estilos (Stylesheet | Style.css)

Una vez dentro de la carpeta de nuestro child theme, creamos un archivo con el nombre style.css y agregamos el siguiente código:

/*
 Theme Name:  My Child Theme. Child for Twenty Nineteen.
 Theme URI:  https://wppuebla.com/
 Description:  Theme to WP Puebla. Child theme for the Twenty Nineteen theme.
 Author:  Jair Martell
 Textdomain:  wppuebla
 Author URI:  https://wppuebla.com/
 Template:  twentynineteen
 Version:  1.0
 License:  GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 */

El texto anterior es un comentario, no es un código como tal, por lo que no afectará en absoluto a tu sitio. Básicamente le indica a WordPress que es un Child theme y la información del mismo.

  • Nombre del Tema: El nombre para tu tema.
  • URI del Tema: Donde los usuarios pueden encontrar el código o documentación para el tema.
  • Descripción: Texto descriptivo para ayudarle a los usuarios a entender lo que hace el tema.
  • Autor: Tu nombre
  • Textdomain: este es utilizado para internacionalización. Utiliza este dominio de texto como el segundo parámetro de cualquier función de internacionalización.
  • URI del Autor: El sitio del autor.
  • Plantilla: La carpeta donde se encuentra almacenado el tema parent. Ojo, debes de colocar el nombre de la carpeta, no el nombre del tema. Sin esta línea, tu Child theme no funcionará.
  • Versión: el número de la versión.
  • Licencia: La licencia, la cual debe ser GNU. [enlace]
  • URI de la Licencia: El enlace a la información de la licencia.

Una vez agregado el código con nuestros datos, lo guardamos. Posteriormente si queremos ver que haya funcionado esto. Nos iremos a nuestro WordPress en Apariencia/Temas,podremos ver nuestro Child theme, sin embargo, lo veremos sin foto de portada.

Aquí es donde entra el 2do archivo para nuestro Child theme, esta imagen da una idea de cómo luce el tema. A reserva que tu tema vaya ser completamente personalizado y distinto al tema padre, puedes copiar el archivo screenshot.png de tu tema parent y lo pegas en el child theme.

El Archivo de Funciones (Functions.php)

Por último, agregaremos el archivo de funciones. A través de este, es como encolaremos la hoja de estilos del tema padre, de no hacerlo nuestro sitio se vería roto ó con nada de estilos.

Ahora, dentro de la carpeta de nuestro child theme, crearemos un archivo nuevo con el nombre functions.php y agregaremos el siguiente código:

<?php
 /* enqueue script for parent theme stylesheeet */
 function childtheme_parent_styles() {
  // enqueue style
  wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' ); 
 }
 add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

Interpretemos el código anterior, utilizamos la función wp_enqueue_style() para encolar la hoja de estilo del tema parent, con la función get_template_directory_uri() ubicando donde se encuentra almacenado el archivo. La función se encuentra dentro una función llamada wppuebla_parent_styles(), la cual está enganchada al hook wp_enqueue_scripts.

Puedes editar el código para agregar tu propio prefijo en el nombre de la función. En el ejemplo viene “childtheme”, esto se fue así para asegurar que no esté en conflicto con cualquier otra función del tema parent. Ya para terminar guarda el archivo.

¿Cómo Activar su Tema Child en WordPress?

¡Éxito! Ya has creado tu propio child theme, ahora necesitas activarlo. Asumo que este proceso saber hacerlo, pero de igual manera te lo recuerdo. En el admin de WordPress, ve al menú Apariencia/Temas, selecciona tu nuevo child theme y dale click en activar.

Por otro lado, si tienes la inquietud que al activar el child theme dejará de tomar en cuenta el tema padre, puedes despreocuparte ya que esta parte WordPress la tiene cubierta debido a la configuración que hicimos previamente y sabrá como desplegar los archivos del tema padre.

Ahora cuando vayas al home de tu sitio, se verá como antes. Sin embargo, se ve igual, esto se debe a que no hemos hecho personalizaciones. Pero ahora tienes un Child theme funcional.

¡Bien hecho!

inicio sitio

Es importante mencionarte que si es la primera vez que haces este proceso, llévalo a cabo en un sitio de pruebas, jamás lo hagas en un sitio de producción hasta que no lo hayas probado antes.

Los temas child son de mucha utilidad, ya que nos permite personalizar un tema sin tener que editar de forma directa su código. Podremos utilizarlo para agregar ciertas funcionalidades adicionales a nuestro tema base (parent theme) ya sea para personalizarlo o agregar/editar archivos de plantilla de nuestro tema padre.

Si te ha gustado este post, te invito a que lo compartas con tu comunidad y estés al pendiente de los próximos posts, así como de los Meetups que tenemos cada mes.

La creciente comunidad de WP de Puebla les da la bienvenida a todos