Drupal Español - Blog

La seguridad es un pilar crítico en cualquier proyecto web, y más aún cuando trabajamos con Drupal 10, Drupal 11 o versiones superiores, donde se manejan datos sensibles, usuarios y configuraciones avanzadas.

En este artículo aprenderás prácticas clave para reforzar la seguridad de tu sitio Drupal y minimizar riesgos comunes como ataques de fuerza bruta, vulnerabilidades en módulos o accesos no autorizados.

1. Mantener el core y módulos actualizados

Uno de los errores más comunes es no aplicar actualizaciones:

• Actualiza regularmente:
  • Drupal Core
  • Módulos contribuidos
  • Temas
• Usa Composer para gestionar dependencias correctamente

2. Configurar roles y permisos correctamente

• Revisa permisos en: Personas → Permisos
• Aplica el principio de mínimo privilegio
• Evita dar permisos administrativos innecesarios

3. Activar autenticación en dos factores (2FA)

Módulos recomendados:

• TFA (Two-Factor Authentication)
• Añade una capa extra de seguridad al login

4. Proteger el acceso al login

• Cambia la URL de acceso si es necesario
• Limita intentos de login con módulos como:
  • Flood Control
• Implementa CAPTCHA

5. Configurar HTTPS correctamente

• Usa certificados SSL
• Fuerza redirecciones a HTTPS
• Evita contenido mixto

6. Revisar logs y actividad

• Monitoriza:
  • Intentos de acceso
  • Errores del sistema
• Usa módulos como:
  • Database Logging (dblog)
  • Syslog

7. Seguridad en archivos y permisos del servidor

• Configura permisos adecuados en:
  • /sites/default/files
• Evita ejecución de scripts en directorios públicos

Automatiza la seguridad de tu Drupal

Implementar todas estas medidas puede ser complejo y propenso a errores si no se hace correctamente.

👉 Nuestra AI entrenada especializada en Drupal puede auditar tu sitio, detectar vulnerabilidades y aplicar configuraciones seguras automáticamente, resolviendo estos y muchos más problemas por ti.

🚀 Introducción

El rendimiento es uno de los factores clave para el éxito de cualquier sitio web. En entornos construidos con Drupal 10, Drupal 11 o versiones superiores, optimizar la velocidad de carga no solo mejora la experiencia del usuario, sino también el posicionamiento SEO y la eficiencia del servidor.

En este artículo encontrarás consejos prácticos y aplicables para mejorar el rendimiento de tu sitio Drupal.

🛠️ Consejos clave para mejorar el rendimiento

1. Activar el sistema de caché

Drupal incluye un potente sistema de caché por defecto:

• Ve a: Configuración → Desarrollo → Rendimiento
• Activa:
  • Caché de página
  • Caché de bloques
  • Compresión CSS y JS

Esto reduce el tiempo de carga significativamente.

2. Utilizar módulos de caché avanzada

Algunos módulos recomendados:

• Dynamic Page Cache (incluido en core)
• BigPipe (mejora la carga percibida)
• Redis (para sitios con alto tráfico)

3. Optimizar imágenes

• Usa formatos modernos como WebP
• Instala módulos como:
  • ImageAPI Optimize
  • Responsive Image

4. Minimizar módulos innecesarios

Cada módulo añade carga al sistema:

• Desinstala módulos que no uses
• Evita módulos redundantes

5. Usar CDN (Content Delivery Network)

Implementar una CDN mejora la distribución de contenido estático:

• Cloudflare
• AWS CloudFront

6. Optimizar base de datos

• Limpia logs antiguos
• Usa herramientas como:
  • Database Logging (configurable)
  • módulos de mantenimiento

7. Configurar PHP y servidor

• Usa PHP 8.1 o superior
• Ajusta:
  • memory_limit
  • opcache
  • max_execution_time

🤖 Automatiza estos procesos

Muchos de estos ajustes pueden ser complejos o llevar tiempo.
👉 Nuestra AI entrenada especializada en Drupal puede analizar tu sitio, detectar problemas de rendimiento y aplicar mejoras automáticamente, resolviendo estos y muchos más desafíos por ti.

Para iniciar este tutorial de filtrado de idioma en vistas de Drupal, antes de comenzar a traducir un sitio web en Drupal tendríamos que añadir el idioma en admin/config/regional/language/add , en esta ocasión hemos agregado idioma inglés.

Image

Image

Con el idioma ya añadido, se pueden activar los campos del tipo de contenido que se necesite traducir como traducibles desde /admin/config/regional/content-language

Se activarán como traducibles los campos “título” y “body” del tipo de contenido “Artículo”:

Image

Image

Una vez tenemos traducidos los contenidos, como en este caso dos contenidos de tipo Artículo traducidos a inglés:

Image

Seguidamente procedemos a crear una vista para ver la aplicación del filtrado por idioma en Drupal. Con este tipo de filtrado en vistas principalmente lo que logramos es que no se muestren los contenidos duplicados en la visualización de la vista, detectando el sitio web que idioma mostrar en cada caso según el idioma seleccionado en la interfaz.

De manera que creamos la vista a la que posteriormente añadiremos el filtro de idioma desde la siguiente ruta /admin/structure/views/add , se agregará un nombre requerido a la vista y más abajo se puede añadir el nombre interno de sistema para la vista que se está creando:

Image

Como opciones de la vista se puede seleccionar mostrar Contenido de tipo Artículo ordenado por los más recientes primero:

Image

Para la visualización de la vista, se ha creado una página con ruta /articles-list donde se mostrará el listado de artículos en forma de tabla:

Image

Con la vista ya creada si accedemos directamente a la ruta para su visualización <nombre-proyecto>/articles-list se puede observar que muestra los contenidos en ambos idiomas, independientemente del idioma seleccionado para la interfaz de la web.

Image

Así, primero en la opción “Idioma de visualización” se añadirá Idioma Texto de la interfaz seleccionado para la página:

Image

Image

Si se vuelve a visualizar la vista con el cambio <nombre-proyecto>/articles-list observamos que ya no se muestran contenidos en los dos idiomas, sólo en el seleccionado, en este caso español. Sin embargo, los contenidos aparecen repetidos:

Image

Para evitar la repetición de los contenidos bastaría con añadir un criterio de filtrado por idioma para la vista:

Image

Image

Image

Con el criterio de filtrado ya aplicado si vamos a la visualización de la vista <nombre-proyecto>/articles-list ya no se muestran los artículos duplicados.

Image

Y esta es el modo de hacer un filtrado de idioma en vistas de Drupal.

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Mostrar y ocultar un elemento con CSS esquivando jQuery.

Como hacer que un elemento aparezca y desaparezca desde un lado de la pantalla solo con CSS.

Como frontend hay veces que por exigencias del guion nos vemos en la tesitura de no poder usar jquery, ya sea por no saber usarlo, porque el cliente no quiere, por cuestiones de rendimiento, … En este artículo se explica un truco para poder hacer que un elemento aparezca de uno de los lados.

Son dos las condiciones que necesitamos para este truco, la primera y la mas obvia es saber CSS, y la otra, la que nos va a dar toda la lógica, es el combinado de un <label> con su atributo “for” y un <input type=”checkbox” con su “id”.

Por un lado pondremos la label en donde nos interese dentro de nuestro html y la maquetaremos para que tenga el aspecto de botón que queremos. Por otro lado, y este es uno de los puntos importantes a tener en cuenta, pondremos el checkbox justo por delante del div o el tag que vayamos a hacer que entre y salga de la pantalla.

Image

Ahora toca dejar esto visualmente listo para que haga su magia.

Por un lado debemos poner el body con “overflow: hidden;”, también valdría hacerlo sobre un contenedor que encapsule tanto al checkbox como al div que le acompaña.

El checkbox lo maquetaremos de la siguiente manera:

.view-option-anchor{    
    display: inline-block;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
}

Es importante que no pongamos “display: none;“ ya que aunque no lo veamos es indispensable que este dentro del documento.

Ahora vamos con la caja que queremos que se oculte y se muestre, en este caso es el div con la clase “filter-content”.

Para ello lo que vamos a hacer es maquetarlo, posicionándolo para que posteriormente nos aparezca desde el lado derecho de la pantalla.

. filter-content{
    height: 100vh;
    width: 100 vw;
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 9999;
    transition: left 0.4s ease;
}

Bien, ahora ya está colocado cada elemento donde debe estar en su posición inicial. En este caso no veremos el div “filter-content” porque sobresale de la ventana por la derecha. Para verlo, y aquí es donde está la magia, no ayudaremos de su posición con respecto el checkbox de la siguiente manera.

 .view-option-anchor:checked + .filter-content{
    left: 0;
}

De esta forma haremos que el div que está justo al lado de checkbox entre dentro de la pantalla.

Por último, para hacer totalmente usable este elemento que sale y entra de la pantalla, necesitaremos un botón de cierre, o más bien un nuevo <label> en el que su “for” apunte también al “id” de este checkbox y que se encuentre dentro de el div que entra y sale. Con lo que la estructura html nos quedaría así:

Image

Y con esto tendríamos la funcionalidad completa. Todo lo referente al aspecto de estos label como botones queda en tu mano para ponerlos a tu gusto.

Esta forma de usar el checkbox puede aplicarse a diferentes situaciones, la única condición es usar y posicionar los elementos de la forma descrita, así que toca experimentar todo lo que se te ocurra.

Y esto ha sido mostrar y ocultar un elemento con CSS, recordad que tenéis este y otros manuales de ayuda en el blog y si aun así no halláis respuesta a vuestro problema, podéis publicar vuestras preguntas en el tablón, donde la comunidad os ayudará a resolverlas.

Commerce pasarela de pago en Drupal. Si queremos vender en nuestra tienda online, debemos proporcionar a nuestros clientes una forma de pago que les genere confianza por un lado, y que nos de seguridad a nosotros por el otro, para ello, una de las pasarelas más utilzadas (en Europa) es PayPal, con la particularidad que nos permite, aceptar tanto los pagos mediante cuentas de la plataforma, como pagos con tarjeta de crédito/débito, lo cual es muy cómodo porque con una única plataforma aceptamos varias formas de pago.

Vamos a ver como añadirla a nuestra página. Lo primero será, como siempre, ir a la página del proyecto y usar composer para instalar la extensión mediante el comando $ composer require 'drupal/commerce_paypal:^1.0@RC'

Image

Esto descargará el módulo y sus dependencias. Ahora debemos activarlo en el sitio, vamos a Ampliar y en la búsqueda escribimos "payp", cuando nuestre el módulo, lo activamos

Image

Una vez activado, vamos a Comercio -- Configuración -- Pago -- Pasarelas de pago

Image

Pulsamos sobre "+Añadir pasarela de pago"

Image

Cubrimos los campos con las opciones mostradas, marcando el "Modo: prueba" para tener un entorno de pruebas con pagos simulados, cuando hayamos finalizado la fase de desarrollo, volveremos aquí y marcaremos "producción". Las claves de la API las obtendremos desde el sitio de PayPal Develop creandonos una cuenta ( no es necesario tener cuenta live ).

Image

Dejando estas opciones marcadas, aceptaremos pagos tanto con cuenta PayPal por defecto como con tarjeta de crédito o débito, guardamos las opciones.

Image

Y esto ha sido commerce pasarela de pago, recordad que tenéis este y otros manuales de ayuda en el blog y si aun así no halláis respuesta a vuestro problema, podéis publicar vuestras preguntas en el tablón, donde la comunidad os ayudará a resolverlas.

Webform adjuntar archivos al formulario de contacto. Tras haber instalado el módulo webform (aquí lo teneis explicado) ahora vamos a ver como añadir un campo que permita adjuntar archivos a nuestro formulario para, por ejemplo, que nos manden un CV junto al formulario.

Para ello, vamos a estructura -- webform -- formularios y seleccionamos "Build" en nuestro formulario. Una vez en él, seleccionamos "+Add element" y escribimos en el cuadro de búsqueda "file". Como nuestra instalacion está de base, no tenemos esa opción habilitada y no nos da opciones.

Image

Tenemos que crear, mediante código, el elemento de subida de archivos. Cerramos esta busqueda y vamos al botón marcado.

Image

En origen veremos todos los elementos que tenemos añadidos en el webform, y podemos añadir más. en este caso, al ser un elemento de subida de archivos lo colocaremos después del campo body, pero podemos ponerlo donde queramos.

Image

Como veis, es muy sencillo, esto no deja de ser un editor, nos posicionamos en donde nos interese y escribimos. En este caso he limitado el campo "multiple" para que solo permita un elemento a subir, si quisieramos que se pudieran añadir varios elementos en una misma subida, cambiaramos la opción a "true". Guardamos los cambios para continuar.

Image

Ya tenemos el elemento creado, pero antes de poder utilizarlo en nuestros formularios, debemos crear la carpeta donde se almacenarán los envíos, así que procederemos a crearla donde queramos en nuestro servidor, en este caso, la he creado en "files". Una vez creada la carpeta en la ubicación que deseemos, tenemos que habilitar en el settings la ruta a la misma, y en caso de ser necesario, asegurarnos de otorgarle los permisos de escritura necesarios, porque si no obtendremos un error al añadir el elemento.

Image

Importante, una vez hecho este paso hay que limpiar caches, de otra forma Drupal no verá los cambios. Una vez vaciada la cache, desde "+add element" escribimos "file" en el cuadro

Image

Ahora si tenemos opciones para insertar elementos, seleccionamos lo que nos interese y seguimos.

Image

Damos los nombres deseados al campo y a la clave, recordad, los nombres de clave, igual que los nombres de sistema, SIEMPRE en inglés.

Image

Definimos el tamaño máximo de subida y las extensiones permitidas para el documento, y guardamos los cambios.

Image

Y esto ha sido webform adjuntar archivos al formulario, recordad que tenéis este y otros manuales de ayuda en el blog y si aun así no halláis respuesta a vuestro problema, podéis publicar vuestras preguntas en el tablón, donde la comunidad os ayudará a resolverlas.