Etiquetas Relacionadas con la Información Meta

Este artículo explica las etiquetas relacionadas con la metainformación.

Explica la etiqueta <meta>, incluidos puntos relacionados con SEO, diseño responsivo y Content-Security-Policy.

YouTube Video

Etiquetas Relacionadas con la Información Meta

Etiqueta <meta>

1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0">

• La etiqueta <meta> proporciona metadatos para el documento HTML. Los metadatos no se muestran en la página pero son utilizados por los motores de búsqueda y los navegadores. La etiqueta <meta> se utiliza para descripciones de página, palabras clave, información del autor y configuraciones de diseño responsivo.

Etiqueta <meta name="viewport">

1<meta name="viewport" content="width=device-width, initial-scale=1">

• La etiqueta <meta name="viewport"> controla el diseño y la escala de las páginas web en diferentes dispositivos. Se utiliza comúnmente en el diseño responsivo para asegurar una correcta visualización en dispositivos móviles.

Etiqueta <meta name="description">

1<meta name="description" content="An example webpage">

• La etiqueta <meta name="description"> se utiliza para describir brevemente el contenido de una página web. Los motores de búsqueda utilizan esta descripción para mostrar un resumen de la página en los resultados de búsqueda.

Etiqueta <meta name="keywords">

1<meta name="keywords" content="HTML, CSS, JavaScript">

• La etiqueta <meta name="keywords"> proporciona una lista de palabras clave relevantes para el contenido de la página. Los motores de búsqueda utilizan estas palabras clave para comprender mejor el contenido de la página.

Etiqueta <meta name="author">

1<meta name="author" content="John Doe">

• La etiqueta <meta name="author"> especifica el autor de la página web. Esta información es utilizada principalmente por motores de búsqueda y herramientas para identificar con precisión al autor de la página.

Etiqueta <meta http-equiv="refresh">

1<meta http-equiv="refresh" content="5; url=https://example.com">

• La etiqueta <meta http-equiv="refresh"> se utiliza para actualizar automáticamente la página o redirigir a otra URL después de un tiempo especificado. Es útil para recargar la página o redirigir al usuario.

Etiqueta <meta http-equiv="cache-control">

1<meta http-equiv="cache-control" content="no-cache">

• La etiqueta <meta http-equiv="cache-control"> se utiliza para controlar el comportamiento de caché de la página web. Puede especificar si caché la página o revalidarla en accesos posteriores.

Etiqueta <meta http-equiv="expires">

1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT">

• La etiqueta <meta http-equiv="expires"> establece una fecha de expiración para el contenido de la página. Una vez que la fecha especificada ha pasado, el contenido se vuelve obsoleto y se solicita al navegador que recupere una nueva versión.

Etiqueta <meta http-equiv="X-UA-Compatible">

1<meta http-equiv="X-UA-Compatible" content="IE=edge">

• La etiqueta <meta http-equiv="X-UA-Compatible"> se utiliza para especificar el modo de compatibilidad para Internet Explorer. Esta etiqueta asegura que el navegador use la versión apropiada del motor de renderizado para mostrar la página.

Etiqueta <meta http-equiv="content-security-policy">

El atributo http-equiv="content-security-policy" en una etiqueta meta de HTML es una función para aplicar reglas de seguridad específicas en el navegador con el fin de mejorar la seguridad de la página web. Al usar este atributo, los desarrolladores de sitios web pueden establecer políticas sobre la carga de recursos y la ejecución de scripts para prevenir ataques como XSS (Cross-Site Scripting) y la inyección de datos.

¿Qué es Content-Security-Policy?

Content-Security-Policy (CSP) es un tipo de encabezado HTTP que se utiliza para controlar qué recursos externos (imágenes, scripts, hojas de estilo, etc.) puede cargar una página web y qué tipos de código se pueden ejecutar. Por lo general, se envía como un encabezado HTTP, pero también puede definirse dentro de HTML usando una etiqueta meta. Este método permite especificar CSP en el lado del cliente en lugar de configurar encabezados en el lado del servidor.

Por ejemplo, puedes establecer CSP en la etiqueta meta del HTML de la siguiente manera:.

1<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://example.com; script-src 'self' https://apis.google.com">

En este ejemplo, se establecen las siguientes políticas:

• default-src 'self': Básicamente, todos los recursos solo se cargan desde el mismo origen (el propio).
• img-src https://example.com: Las imágenes solo se cargan desde https://example.com.
• script-src 'self' https://apis.google.com: Los scripts solo se pueden ejecutar desde el mismo origen o desde https://apis.google.com.

Diferencias entre http-equiv y los encabezados HTTP

Típicamente, Content-Security-Policy se envía desde el servidor al cliente como un encabezado HTTP. Sin embargo, si se configura en el lado del cliente usando la etiqueta meta, se puede escribir directamente en el HTML.

Sin embargo, existen algunas diferencias importantes entre configurarlo como un encabezado HTTP y especificarlo con una etiqueta meta:

1. Prioridad: Un CSP enviado a través de encabezados HTTP tiene prioridad sobre uno especificado en una etiqueta meta. Esto significa que si un CSP se configura en el lado del servidor, no será sobrescrito por una etiqueta meta utilizada en el lado del cliente.

2. Momento de Aplicación: Un CSP especificado a través de encabezados HTTP se aplica antes de que la página se cargue. Por otro lado, un CSP especificado a través de una etiqueta meta se aplica cuando se analiza el HTML, por lo que los recursos ya podrían haberse cargado.

Directivas disponibles en CSP

En CSP, se utilizan varias directivas para especificar políticas que permiten o prohíben la carga y ejecución de ciertos tipos de recursos. Las directivas típicas incluyen las siguientes:.

• default-src: Especifica la política de origen predeterminada para todos los recursos. Se aplica a los recursos no especificados por otras directivas.
• script-src: Especifica el origen para JavaScript. Para prevenir ataques XSS, puedes restringir la carga de scripts desde sitios externos.
• style-src: Especifica el origen para CSS. Al restringir la carga de hojas de estilo desde fuentes externas, puedes prevenir ataques en los estilos de tu sitio.
• img-src: Especifica el origen para las imágenes. Puedes restringir la carga de imágenes desde fuentes externas.
• connect-src: Especifica las URLs permitidas para XMLHttpRequests y conexiones WebSocket. Esto asegura la seguridad de las comunicaciones de la API externa y de WebSocket.

Combinando estas directivas, puedes crear políticas detalladas para los recursos en tu página web.

Configuraciones prácticas de CSP para mejorar la seguridad

A continuación se muestra un ejemplo de configuraciones CSP para mejorar la seguridad de tu sitio web. Esto puede reducir el riesgo de ataques XSS y fugas de datos.

1<meta http-equiv="Content-Security-Policy"
2    content="default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; style-src 'self'; base-uri 'self'; form-action 'self';">

Se aplican las siguientes políticas con esta configuración:

• default-src 'self': Todos los recursos se cargan únicamente desde el mismo origen.
• script-src 'self' https://trusted-cdn.com: Los scripts se cargan únicamente desde el mismo origen o desde un CDN confiable.
• object-src 'none': La etiqueta object no se utiliza. Esto es para prevenir ataques basados en Flash o en complementos.
• style-src 'self': Las hojas de estilo solo se cargan desde el propio origen.
• base-uri 'self': La URL base establecida por la etiqueta <base> se limita al propio origen.
• form-action 'self': El destino de envío del formulario se limita al propio origen. Esto reduce el riesgo de que los datos del formulario se envíen a sitios externos.

Conclusión

Al usar http-equiv="content-security-policy" para definir CSP dentro del HTML, es posible mejorar la seguridad de la página web. Un CSP configurado adecuadamente es una herramienta poderosa que reduce el riesgo de ataques XSS y fugas de datos y protege tu sitio web.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video