{"id":10677,"date":"2025-05-26T14:33:09","date_gmt":"2025-05-26T12:33:09","guid":{"rendered":"https:\/\/www.loading.es\/blog\/?p=10677"},"modified":"2025-05-26T14:33:10","modified_gmt":"2025-05-26T12:33:10","slug":"hsts-seguridad-web","status":"publish","type":"post","link":"https:\/\/www.loading.es\/blog\/hsts-seguridad-web\/","title":{"rendered":"Qu\u00e9 es HSTS en seguridad web y c\u00f3mo activarlo"},"content":{"rendered":"\n<p>Cuando navegamos por una p\u00e1gina con HTTPS, nuestros datos viajan cifrados. Pero eso no siempre es suficiente. Aqu\u00ed es donde entra en juego <strong>HSTS<\/strong> (HTTP Strict Transport Security), una pol\u00edtica de seguridad web que obliga a los navegadores a conectarse siempre mediante HTTPS.<\/p>\n\n\n\n<p>Esto significa que, aunque t\u00fa escribas la direcci\u00f3n con \u201chttp\u201d o sigas un enlace antiguo sin cifrado, el navegador corregir\u00e1 el error autom\u00e1ticamente. No hay margen para que un atacante redirija la conexi\u00f3n a una versi\u00f3n insegura de la web. Adem\u00e1s, <strong>HSTS evita<\/strong> que los usuarios puedan ignorar las advertencias de seguridad, bloqueando por completo el acceso si el certificado SSL no es v\u00e1lido.<\/p>\n\n\n\n<p>En resumen, es como una orden directa al navegador que le dice: <em>\u201cAqu\u00ed no se negocia: siempre que entres, tiene que ser de forma segura\u201d<\/em>.<\/p>\n\n\n\n<p><strong><em>Tabla de Contenidos:<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-aioseo-table-of-contents\"><ul><li><a href=\"#aioseo-como-funciona-realmente-hsts\">C\u00f3mo funciona realmente HSTS<\/a><\/li><li><a href=\"#aioseo-ventajas-de-activar-hsts-en-tu-web\">Ventajas de activar HSTS en tu web<\/a><\/li><li><a href=\"#aioseo-como-anadir-hsts-en-tu-web\">C\u00f3mo a\u00f1adir HSTS en tu web<\/a><\/li><li><a href=\"#aioseo-como-activar-hsts-desde-plesk-en-tu-hosting\">C\u00f3mo activar HSTS desde Plesk en tu hosting<\/a><ul><li><a href=\"#aioseo-antes-de-activar-hsts\">Antes de activar HSTS\u2026<\/a><\/li><li><a href=\"#aioseo-como-se-activa\">C\u00f3mo se activa<\/a><\/li><\/ul><\/li><li><a href=\"#aioseo-cuando-no-usar-hsts\">Cu\u00e1ndo NO usar HSTS<\/a><ul><li><a href=\"#aioseo-cuando-no-hace-falta-activar-hsts\">Cu\u00e1ndo NO hace falta activar HSTS<\/a><\/li><li><a href=\"#aioseo-y-cuando-es-mejor-esperar\">Y cu\u00e1ndo es mejor esperar<\/a><\/li><\/ul><\/li><li><a href=\"#aioseo-conclusion\">Conclusi\u00f3n<\/a><\/li><\/ul><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.loading.es\/hosting\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1000\" height=\"100\" src=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png\" alt=\"oferta para contratar hosting web\" class=\"wp-image-8039\" srcset=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png 1000w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-300x30.png 300w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-768x77.png 768w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-850x85.png 850w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-como-funciona-realmente-hsts\">C\u00f3mo funciona realmente HSTS<\/h2>\n\n\n\n<p>La clave est\u00e1 en una <strong>cabecera HTTP<\/strong>. Cuando un navegador visita una web que ya tiene HSTS activo, el servidor env\u00eda un mensaje con esta cabecera especial:<br><code>Strict-Transport-Security<\/code>.<\/p>\n\n\n\n<p>Esta cabecera le dice al navegador durante cu\u00e1nto tiempo debe obligar la conexi\u00f3n segura. Por ejemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Strict-Transport-Security: max-age=31536000; includeSubDomains; preload<\/code><\/pre>\n\n\n\n<ul>\n<li><strong>max-age<\/strong> define el n\u00famero de segundos durante los cuales la pol\u00edtica estar\u00e1 activa. Un a\u00f1o equivale a <code>31536000<\/code>.<\/li>\n\n\n\n<li><strong>includeSubDomains<\/strong> garantiza que tambi\u00e9n los subdominios sigan esta regla.<\/li>\n\n\n\n<li><strong>preload<\/strong> indica que esa web quiere formar parte de una lista oficial mantenida por los navegadores para aplicar HSTS desde el primer momento, incluso en la primera visita.<\/li>\n<\/ul>\n\n\n\n<p>Este detalle es importante, porque <strong>HSTS solo funciona si la primera conexi\u00f3n es segura<\/strong>. Si un atacante logra interceptar una conexi\u00f3n HTTP inicial, puede intentar evitar que el navegador reciba la cabecera. Por eso existe el <strong>preload<\/strong>, para que el navegador ya conozca de antemano qu\u00e9 webs exigen HSTS sin necesidad de haberlas visitado antes.<\/p>\n\n\n\n<style>\n        .hsts-container {\n            max-width: 900px;\n            margin: 20px auto;\n            padding: 20px;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            border-radius: 20px;\n            box-shadow: 0 15px 35px rgba(0,0,0,0.1);\n        }\n\n        .hsts-title {\n            text-align: center;\n            color: white;\n            font-size: 24px;\n            font-weight: bold;\n            margin-bottom: 30px;\n            text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n        }\n\n        .flow-container {\n            display: grid;\n            grid-template-columns: 1fr auto 1fr auto 1fr;\n            align-items: center;\n            gap: 20px;\n            background: white;\n            padding: 30px;\n            border-radius: 15px;\n            margin: 20px 0;\n            box-shadow: 0 8px 25px rgba(0,0,0,0.1);\n        }\n\n        .step-box {\n            background: linear-gradient(145deg, #f8f9ff, #e8ecff);\n            border: 2px solid #e0e7ff;\n            border-radius: 12px;\n            padding: 20px;\n            text-align: center;\n            position: relative;\n            transition: all 0.3s ease;\n            cursor: pointer;\n            min-height: 120px;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n        }\n\n        .step-box:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);\n            border-color: #667eea;\n        }\n\n        .step-icon {\n            font-size: 28px;\n            margin-bottom: 10px;\n            transition: transform 0.3s ease;\n        }\n\n        .step-box:hover .step-icon {\n            transform: scale(1.2);\n        }\n\n        .step-title {\n            font-weight: bold;\n            color: #4c51bf;\n            margin-bottom: 8px;\n            font-size: 14px;\n        }\n\n        .step-desc {\n            font-size: 12px;\n            color: #666;\n            line-height: 1.3;\n        }\n\n        .arrow {\n            color: #667eea;\n            font-size: 24px;\n            font-weight: bold;\n            animation: pulse 2s infinite;\n        }\n\n        @keyframes pulse {\n            0%, 100% { opacity: 0.6; }\n            50% { opacity: 1; }\n        }\n\n        .comparison-section {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 20px;\n            margin: 30px 0;\n        }\n\n        .comparison-card {\n            background: white;\n            border-radius: 15px;\n            padding: 25px;\n            text-align: center;\n            transition: all 0.3s ease;\n            cursor: pointer;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .comparison-card::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -100%;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\n            transition: left 0.5s;\n        }\n\n        .comparison-card:hover::before {\n            left: 100%;\n        }\n\n        .comparison-card:hover {\n            transform: scale(1.02);\n            box-shadow: 0 15px 30px rgba(0,0,0,0.1);\n        }\n\n        .without-hsts {\n            border-left: 5px solid #ef4444;\n        }\n\n        .with-hsts {\n            border-left: 5px solid #10b981;\n        }\n\n        .card-title {\n            font-size: 18px;\n            font-weight: bold;\n            margin-bottom: 15px;\n        }\n\n        .without-hsts .card-title {\n            color: #ef4444;\n        }\n\n        .with-hsts .card-title {\n            color: #10b981;\n        }\n\n        .security-level {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin: 15px 0;\n        }\n\n        .security-bars {\n            display: flex;\n            gap: 3px;\n            margin-left: 10px;\n        }\n\n        .security-bar {\n            width: 12px;\n            height: 20px;\n            border-radius: 2px;\n            transition: all 0.3s ease;\n        }\n\n        .bar-active { background: #10b981; }\n        .bar-inactive { background: #e5e7eb; }\n        .bar-danger { background: #ef4444; }\n\n        .features-list {\n            text-align: left;\n            margin: 15px 0;\n        }\n\n        .feature-item {\n            display: flex;\n            align-items: center;\n            margin: 8px 0;\n            font-size: 13px;\n            transition: all 0.3s ease;\n        }\n\n        .feature-item:hover {\n            transform: translateX(5px);\n        }\n\n        .feature-icon {\n            margin-right: 8px;\n            font-size: 16px;\n        }\n\n        .check { color: #10b981; }\n        .cross { color: #ef4444; }\n\n        .info-tooltip {\n            position: absolute;\n            background: #1f2937;\n            color: white;\n            padding: 10px 15px;\n            border-radius: 8px;\n            font-size: 12px;\n            max-width: 200px;\n            z-index: 1000;\n            opacity: 0;\n            visibility: hidden;\n            transition: all 0.3s ease;\n            pointer-events: none;\n            bottom: 100%;\n            left: 50%;\n            transform: translateX(-50%);\n            margin-bottom: 10px;\n        }\n\n        .info-tooltip::after {\n            content: '';\n            position: absolute;\n            top: 100%;\n            left: 50%;\n            margin-left: -5px;\n            border-width: 5px;\n            border-style: solid;\n            border-color: #1f2937 transparent transparent transparent;\n        }\n\n        .step-box:hover .info-tooltip {\n            opacity: 1;\n            visibility: visible;\n        }\n\n        .header-example {\n            background: #1f2937;\n            color: #10b981;\n            padding: 15px;\n            border-radius: 8px;\n            font-family: 'Courier New', monospace;\n            font-size: 12px;\n            margin: 20px 0;\n            text-align: center;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .header-example::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -100%;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.1), transparent);\n            animation: scan 3s infinite;\n        }\n\n        @keyframes scan {\n            0% { left: -100%; }\n            100% { left: 100%; }\n        }\n\n        @media (max-width: 768px) {\n            .flow-container {\n                grid-template-columns: 1fr;\n                text-align: center;\n            }\n            \n            .arrow {\n                transform: rotate(90deg);\n            }\n            \n            .comparison-section {\n                grid-template-columns: 1fr;\n            }\n            \n            .hsts-container {\n                margin: 10px;\n                padding: 15px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"hsts-container\">\n        <div class=\"hsts-title\">\n            \ud83d\udd12 C\u00f3mo Funciona HSTS: Flujo Interactivo\n        <\/div>\n\n        <div class=\"flow-container\">\n            <div class=\"step-box\" data-step=\"1\">\n                <div class=\"step-icon\">\ud83c\udf10<\/div>\n                <div class=\"step-title\">Usuario visita web<\/div>\n                <div class=\"step-desc\">Primer acceso a tu sitio web<\/div>\n                <div class=\"info-tooltip\">El navegador intenta conectarse por primera vez a tu sitio web<\/div>\n            <\/div>\n\n            <div class=\"arrow\">\u2192<\/div>\n\n            <div class=\"step-box\" data-step=\"2\">\n                <div class=\"step-icon\">\ud83d\udd10<\/div>\n                <div class=\"step-title\">Servidor env\u00eda HSTS<\/div>\n                <div class=\"step-desc\">Cabecera de seguridad<\/div>\n                <div class=\"info-tooltip\">El servidor incluye la cabecera Strict-Transport-Security en la respuesta<\/div>\n            <\/div>\n\n            <div class=\"arrow\">\u2192<\/div>\n\n            <div class=\"step-box\" data-step=\"3\">\n                <div class=\"step-icon\">\ud83e\udde0<\/div>\n                <div class=\"step-title\">Navegador recuerda<\/div>\n                <div class=\"step-desc\">Guarda la pol\u00edtica HSTS<\/div>\n                <div class=\"info-tooltip\">El navegador almacena la pol\u00edtica HSTS durante el tiempo especificado<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"header-example\">\n            Strict-Transport-Security: max-age=31536000; includeSubDomains; preload\n        <\/div>\n\n        <div class=\"comparison-section\">\n            <div class=\"comparison-card without-hsts\">\n                <div class=\"card-title\">\u274c SIN HSTS<\/div>\n                <div class=\"security-level\">\n                    Seguridad: \n                    <div class=\"security-bars\">\n                        <div class=\"security-bar bar-danger\"><\/div>\n                        <div class=\"security-bar bar-danger\"><\/div>\n                        <div class=\"security-bar bar-inactive\"><\/div>\n                        <div class=\"security-bar bar-inactive\"><\/div>\n                        <div class=\"security-bar bar-inactive\"><\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"features-list\">\n                    <div class=\"feature-item\">\n                        <span class=\"feature-icon cross\">\u2717<\/span>\n                        Permite conexiones HTTP\n                    <\/div>\n                    <div class=\"feature-item\">\n                        <span class=\"feature-icon cross\">\u2717<\/span>\n                        Vulnerable a ataques MitM\n                    <\/div>\n                    <div class=\"feature-item\">\n                        <span class=\"feature-icon cross\">\u2717<\/span>\n                        Redirecciones inseguras\n                    <\/div>\n                    <div class=\"feature-item\">\n                        <span class=\"feature-icon cross\">\u2717<\/span>\n                        Cookies sin protecci\u00f3n\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"comparison-card with-hsts\">\n                <div class=\"card-title\">\u2705 CON HSTS<\/div>\n                <div class=\"security-level\">\n                    Seguridad: \n                    <div class=\"security-bars\">\n                        <div class=\"security-bar bar-active\"><\/div>\n                        <div class=\"security-bar bar-active\"><\/div>\n                        <div class=\"security-bar bar-active\"><\/div>\n                        <div class=\"security-bar bar-active\"><\/div>\n                        <div class=\"security-bar bar-active\"><\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"features-list\">\n                    <div class=\"feature-item\">\n                        <span class=\"feature-icon check\">\u2713<\/span>\n                        Solo conexiones HTTPS\n                    <\/div>\n                    <div class=\"feature-item\">\n                        <span class=\"feature-icon check\">\u2713<\/span>\n                        Protecci\u00f3n contra MitM\n                    <\/div>\n                    <div class=\"feature-item\">\n                        <span class=\"feature-icon check\">\u2713<\/span>\n                        Redirecciones autom\u00e1ticas\n                    <\/div>\n                    <div class=\"feature-item\">\n                        <span class=\"feature-icon check\">\u2713<\/span>\n                        Cookies siempre seguras\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ Animaci\u00f3n de las barras de seguridad\n        function animateSecurityBars() {\n            const bars = document.querySelectorAll('.security-bar');\n            bars.forEach((bar, index) => {\n                setTimeout(() => {\n                    if (bar.classList.contains('bar-active')) {\n                        bar.style.transform = 'scaleY(1.2)';\n                        setTimeout(() => {\n                            bar.style.transform = 'scaleY(1)';\n                        }, 200);\n                    }\n                }, index * 100);\n            });\n        }\n\n        \/\/ Ejecutar animaci\u00f3n cada 3 segundos\n        setInterval(animateSecurityBars, 3000);\n\n        \/\/ Efecto de hover mejorado para las tarjetas de comparaci\u00f3n\n        const comparisonCards = document.querySelectorAll('.comparison-card');\n        comparisonCards.forEach(card => {\n            card.addEventListener('mouseenter', function() {\n                this.style.transform = 'scale(1.02) rotateY(2deg)';\n            });\n            \n            card.addEventListener('mouseleave', function() {\n                this.style.transform = 'scale(1) rotateY(0deg)';\n            });\n        });\n\n        \/\/ Animaci\u00f3n de las features al hacer hover\n        const featureItems = document.querySelectorAll('.feature-item');\n        featureItems.forEach(item => {\n            item.addEventListener('mouseenter', function() {\n                const icon = this.querySelector('.feature-icon');\n                icon.style.transform = 'scale(1.3) rotate(360deg)';\n            });\n            \n            item.addEventListener('mouseleave', function() {\n                const icon = this.querySelector('.feature-icon');\n                icon.style.transform = 'scale(1) rotate(0deg)';\n            });\n        });\n\n        \/\/ Efecto de click en los pasos\n        const stepBoxes = document.querySelectorAll('.step-box');\n        stepBoxes.forEach(box => {\n            box.addEventListener('click', function() {\n                \/\/ Remover clase active de todos los pasos\n                stepBoxes.forEach(b => b.classList.remove('active-step'));\n                \n                \/\/ A\u00f1adir clase active al paso clickeado\n                this.classList.add('active-step');\n                \n                \/\/ Efecto de pulso\n                this.style.animation = 'pulse 0.6s ease-in-out';\n                setTimeout(() => {\n                    this.style.animation = '';\n                }, 600);\n            });\n        });\n\n        \/\/ CSS din\u00e1mico para el paso activo\n        const style = document.createElement('style');\n        style.textContent = `\n            .active-step {\n                background: linear-gradient(145deg, #667eea, #764ba2) !important;\n                color: white !important;\n                border-color: #667eea !important;\n            }\n            .active-step .step-title,\n            .active-step .step-desc {\n                color: white !important;\n            }\n        `;\n        document.head.appendChild(style);\n\n        \/\/ Inicializar animaciones al cargar\n        document.addEventListener('DOMContentLoaded', function() {\n            setTimeout(animateSecurityBars, 1000);\n        });\n    <\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-ventajas-de-activar-hsts-en-tu-web\">Ventajas de activar HSTS en tu web<\/h2>\n\n\n\n<p>Aplicar HSTS a tu sitio web ofrece beneficios que van m\u00e1s all\u00e1 de la seguridad b\u00e1sica:<\/p>\n\n\n\n<p><strong>Mayor protecci\u00f3n contra ataques.<\/strong> Al impedir conexiones no seguras desde el inicio, se reducen los riesgos de ataques tipo \u201cMan-in-the-Middle\u201d.<\/p>\n\n\n\n<p><strong>Correcci\u00f3n autom\u00e1tica.<\/strong> Si alguien intenta acceder a tu web por HTTP, el navegador la redirige directamente a HTTPS sin intervenci\u00f3n del servidor.<\/p>\n\n\n\n<p><strong>Mejor imagen de marca.<\/strong> Mostrar que te preocupas por la seguridad de tus usuarios refuerza tu reputaci\u00f3n online.<\/p>\n\n\n\n<p><strong>Ayuda al SEO.<\/strong> Aunque Google no ha confirmado oficialmente que HSTS influya directamente en el posicionamiento, tener solo una versi\u00f3n segura de tu web evita duplicidades y mejora la experiencia de usuario, algo que s\u00ed valoran los motores de b\u00fasqueda.<\/p>\n\n\n\n<p><strong>Cumplimiento normativo.<\/strong> Muchas normativas de protecci\u00f3n de datos exigen medidas para garantizar la seguridad de las comunicaciones. HSTS es un buen paso en esa direcci\u00f3n.<\/p>\n\n\n\n<table style=\"width: 100%; border-collapse: collapse;\">\n  <thead style=\"background-color: #4a89dc; color: white;\">\n    <tr>\n      <th style=\"padding: 10px; border: 1px solid #ccc;\">Funcionalidad<\/th>\n      <th style=\"padding: 10px; border: 1px solid #ccc;\">Sin HSTS<\/th>\n      <th style=\"padding: 10px; border: 1px solid #ccc;\">Con HSTS<\/th>\n    <\/tr>\n  <\/thead>\n  <tbody style=\"color: #333;\">\n    <tr>\n      <td style=\"padding: 10px; border: 1px solid #ccc;\">Cifrado HTTPS<\/td>\n      <td style=\"padding: 10px; border: 1px solid #ccc;\">Depende de la redirecci\u00f3n<\/td>\n      <td style=\"padding: 10px; border: 1px solid #ccc;\">Obligatorio siempre<\/td>\n    <\/tr>\n    <tr>\n      <td style=\"padding: 10px; border: 1px solid #ccc;\">Protecci\u00f3n contra ataques MitM<\/td>\n      <td style=\"padding: 10px; border: 1px solid #ccc;\">Limitada<\/td>\n      <td style=\"padding: 10px; border: 1px solid #ccc;\">Muy alta<\/td>\n    <\/tr>\n    <tr>\n      <td style=\"padding: 10px; border: 1px solid #ccc;\">Protecci\u00f3n de cookies<\/td>\n      <td style=\"padding: 10px; border: 1px solid #ccc;\">Solo si hay HTTPS<\/td>\n      <td style=\"padding: 10px; border: 1px solid #ccc;\">Siempre asegurada<\/td>\n    <\/tr>\n    <tr>\n      <td style=\"padding: 10px; border: 1px solid #ccc;\">Redirecciones inseguras<\/td>\n      <td style=\"padding: 10px; border: 1px solid #ccc;\">Posibles<\/td>\n      <td style=\"padding: 10px; border: 1px solid #ccc;\">Bloqueadas<\/td>\n    <\/tr>\n  <\/tbody>\n<\/table>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-como-anadir-hsts-en-tu-web\">C\u00f3mo a\u00f1adir HSTS en tu web<\/h2>\n\n\n\n<p>Antes de aplicar HSTS, es <strong>imprescindible<\/strong> que tu web ya tenga <strong>HTTPS activo con un certificado SSL v\u00e1lido<\/strong>. Tambi\u00e9n es importante haber configurado correctamente la <strong>redirecci\u00f3n de HTTP a HTTPS<\/strong>, ya sea desde el servidor o con una regla en el archivo <code>.htaccess<\/code>.<\/p>\n\n\n\n<p>Una vez tengas todo esto listo, puedes a\u00f1adir la cabecera HSTS.<br>Si tu web est\u00e1 en un servidor Apache, puedes usar esta l\u00ednea:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Header always set Strict-Transport-Security \"max-age=31536000; includeSubDomains; preload\"<\/code><\/pre>\n\n\n\n<p>Este fragmento le dice al navegador que, durante <strong>un a\u00f1o completo<\/strong>, todas las visitas deben hacerse usando <strong>solo HTTPS<\/strong>. Tambi\u00e9n incluye los <strong>subdominios<\/strong> y le indica a los navegadores que quieres estar en la <strong>lista preload<\/strong>.<\/p>\n\n\n\n<p>Pero antes de usar este valor alto, conviene ir paso a paso.<br>Si es la <strong>primera vez que pruebas HSTS<\/strong>, puedes usar un tiempo muy corto, como:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Header always set Strict-Transport-Security \"max-age=300\"<\/code><\/pre>\n\n\n\n<p>Eso son <strong>solo 5 minutos<\/strong>. As\u00ed puedes probar que todo funciona bien sin arriesgarte a que los navegadores recuerden una configuraci\u00f3n incorrecta durante semanas o meses.<\/p>\n\n\n\n<p>Adem\u00e1s, si activas la opci\u00f3n <code>preload<\/code>, tu dominio pasar\u00e1 a una lista que los navegadores ya llevan integrada. Esto hace que HSTS se aplique <strong>desde el primer momento<\/strong>, incluso antes de visitar la web por primera vez.<\/p>\n\n\n\n<p>Eso s\u00ed, estar en la lista preload <strong>no se puede desactivar f\u00e1cilmente<\/strong>.<br>Si te equivocas o cambias de idea, tendr\u00e1s que pedir a los navegadores que te borren, y ese proceso puede tardar bastante.<\/p>\n\n\n\n<p><strong>Por eso es clave asegurarte de que todo est\u00e1 perfectamente configurado<\/strong> antes de usar valores largos o activar el preload.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-como-activar-hsts-desde-plesk-en-tu-hosting\">C\u00f3mo activar HSTS desde Plesk en tu hosting<\/h2>\n\n\n\n<p>Si usas <strong>Plesk<\/strong> para gestionar tu web, activar HSTS es muy f\u00e1cil.<br>En <strong>Loading<\/strong> ofrecemos Plesk como panel de control en nuestros planes de hosting, as\u00ed que puedes hacerlo t\u00fa mismo sin tocar c\u00f3digo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-antes-de-activar-hsts\">Antes de activar HSTS\u2026<\/h3>\n\n\n\n<p>Primero, aseg\u00farate de que:<\/p>\n\n\n\n<ul>\n<li>Tu web funciona con <strong>HTTPS<\/strong>.<\/li>\n\n\n\n<li>Tienes un <strong>certificado SSL v\u00e1lido<\/strong>.<\/li>\n\n\n\n<li>Todas las p\u00e1ginas cargan bien sin errores.<\/li>\n<\/ul>\n\n\n\n<p>Esto es importante porque, si algo falla, <strong>podr\u00edas bloquear tu web sin querer<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-como-se-activa\">C\u00f3mo se activa<\/h3>\n\n\n\n<ol>\n<li>Entra a Plesk y ve al apartado donde gestionas tu certificado SSL (suele ser el de <strong>Let\u2019s Encrypt<\/strong>).<\/li>\n\n\n\n<li>Activa la opci\u00f3n <strong>HSTS<\/strong>.<\/li>\n\n\n\n<li>Elige un tiempo de duraci\u00f3n. Se recomienda <strong>6 meses o 1 a\u00f1o<\/strong>.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"650\" height=\"621\" src=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/activar-hsts-plek.jpg\" alt=\"activar HSTS en Plesk\n\" class=\"wp-image-10682\" srcset=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/activar-hsts-plek.jpg 650w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/activar-hsts-plek-300x287.jpg 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<p>Tambi\u00e9n ver\u00e1s dos casillas m\u00e1s:<\/p>\n\n\n\n<ul>\n<li><strong>Incluir subdominios<\/strong> \u2192 M\u00e1rcala solo si tus subdominios tambi\u00e9n usan HTTPS.<\/li>\n\n\n\n<li><strong>Aplicar a webmail<\/strong> \u2192 Marca esta si usas el correo con tu dominio.<\/li>\n<\/ul>\n\n\n\n<p>Cuando tengas todo listo, haz clic en <strong>\u201cActivar HSTS\u201d<\/strong>.<br>\u00a1Y ya est\u00e1! Tu web ahora les dir\u00e1 a los navegadores que <strong>solo se debe acceder por HTTPS<\/strong>.<\/p>\n\n\n\n<p>Si a\u00fan no tienes un hosting con Plesk y quieres todas estas ventajas, puedes <a href=\"https:\/\/www.loading.es\/hosting\/index.html\" target=\"_blank\" rel=\"noopener\" title=\"Comprar hosting en Loading\"><strong>comprar hosting<\/strong><\/a> en Loading con soporte incluido y todo listo para empezar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-cuando-no-usar-hsts\">Cu\u00e1ndo NO usar HSTS<\/h2>\n\n\n\n<p>Imagina que tu p\u00e1gina web es como una <strong>casa<\/strong>. Ponerle HSTS ser\u00eda como instalarle una <strong>alarma extra muy potente<\/strong>. Es algo bueno, claro, pero no siempre hace falta. Y <strong>no tener HSTS no significa que tu casa no sea segura<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-cuando-no-hace-falta-activar-hsts\">Cu\u00e1ndo NO hace falta activar HSTS<\/h3>\n\n\n\n<p>El HSTS es una <strong>ayuda extra para la seguridad<\/strong>, pero a veces no es necesaria.<br>Por ejemplo:<\/p>\n\n\n\n<ul>\n<li>Si tu web ya tiene el <strong>candado verde (HTTPS)<\/strong> y funciona bien.<\/li>\n\n\n\n<li>Si todas tus p\u00e1ginas <strong>redirigen autom\u00e1ticamente a la versi\u00f3n segura<\/strong>.<\/li>\n\n\n\n<li>Si no usas <strong>subdominios importantes<\/strong> (como blog o tienda) que necesiten protecci\u00f3n extra.<\/li>\n<\/ul>\n\n\n\n<p>En ese caso, puedes estar tranquilo. Tu web <strong>ya es segura<\/strong>.<br>El HSTS solo ser\u00eda una <strong>capa m\u00e1s<\/strong>, como quien pone doble cerradura en la puerta.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"650\" height=\"433\" src=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/hsts-cuando-usar.jpg\" alt=\"hsts-cuando-usar\" class=\"wp-image-10678\" srcset=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/hsts-cuando-usar.jpg 650w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/hsts-cuando-usar-300x200.jpg 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-y-cuando-es-mejor-esperar\">Y cu\u00e1ndo es mejor esperar<\/h3>\n\n\n\n<p>Hay momentos en los que <strong>no es buena idea<\/strong> activar HSTS todav\u00eda.<br>Por ejemplo:<\/p>\n\n\n\n<ul>\n<li>Si est\u00e1s haciendo <strong>cambios o pruebas<\/strong> en tu sitio.<\/li>\n\n\n\n<li>Si tienes subdominios sin <strong>certificado SSL<\/strong>.<\/li>\n\n\n\n<li>Si no est\u00e1s <strong>100% seguro<\/strong> de que todo est\u00e9 bien configurado.<\/li>\n<\/ul>\n\n\n\n<p>\u00bfPor qu\u00e9? Porque una vez activas HSTS, <strong>el navegador de tus visitantes recuerda la orden<\/strong>.<br>Y si luego hay alg\u00fan error, es muy dif\u00edcil que puedan volver a entrar hasta que todo est\u00e9 arreglado.<\/p>\n\n\n\n<p>Adem\u00e1s, si tienes <strong>muchas partes distintas<\/strong> en tu web y alguna no est\u00e1 protegida con HTTPS, podr\u00edas causar problemas a tus usuarios sin darte cuenta.<\/p>\n\n\n\n<p>Teniendo en cuenta todo esto, podemos determinar que:<\/p>\n\n\n\n<p><strong>HSTS es una herramienta \u00fatil<\/strong>, pero <strong>no obligatoria<\/strong>.<\/p>\n\n\n\n<p>Si tu web ya funciona con HTTPS, con su certificado bien instalado y las redirecciones hechas, <strong>no necesitas HSTS para estar protegido<\/strong>.<\/p>\n\n\n\n<p>Y si alg\u00fan d\u00eda decides activarlo, hazlo con calma, revisando bien que <strong>todo est\u00e9 preparado<\/strong>. As\u00ed evitar\u00e1s errores y podr\u00e1s disfrutar de esa protecci\u00f3n extra sin sustos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-conclusion\">Conclusi\u00f3n<\/h2>\n\n\n\n<p><strong>HSTS es una herramienta muy \u00fatil<\/strong> para hacer que una web sea todav\u00eda m\u00e1s segura. Ayuda a que siempre se use una conexi\u00f3n cifrada y evita ciertos ataques que podr\u00edan poner en riesgo los datos de los usuarios.<\/p>\n\n\n\n<p>Pero no es algo obligatorio.<br>Si ya tienes <strong>HTTPS bien configurado<\/strong>, con tu <strong>certificado SSL v\u00e1lido<\/strong> y tus redirecciones funcionando correctamente, tu web <strong>ya est\u00e1 protegida<\/strong>.<br>HSTS es simplemente un <strong>paso extra<\/strong> que puedes a\u00f1adir si quieres reforzar la seguridad al m\u00e1ximo.<\/p>\n\n\n\n<p>Eso s\u00ed, si decides activarlo, hazlo con cuidado. Revisa bien que todo est\u00e9 en orden, sobre todo si usas subdominios o tienes varias partes en tu web.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.loading.es\/hosting\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1000\" height=\"100\" src=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png\" alt=\"oferta para contratar hosting web\" class=\"wp-image-8039\" srcset=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png 1000w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-300x30.png 300w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-768x77.png 768w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-850x85.png 850w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure><\/div>\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-el-blog-de-loading wp-block-embed-el-blog-de-loading\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"3kyt5Tlf87\"><a href=\"https:\/\/www.loading.es\/blog\/http-vs-https\/\">HTTP vs HTTPS: Claves para una Web m\u00e1s Segura y Confiable<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abHTTP vs HTTPS: Claves para una Web m\u00e1s Segura y Confiable\u00bb \u2014 El blog de Loading\" src=\"https:\/\/www.loading.es\/blog\/http-vs-https\/embed\/#?secret=fAuYa4VlM1#?secret=3kyt5Tlf87\" data-secret=\"3kyt5Tlf87\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-el-blog-de-loading wp-block-embed-el-blog-de-loading\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"3Vn6LHZqSv\"><a href=\"https:\/\/www.loading.es\/blog\/protocolo-http\/\">Qu\u00e9 es el protocolo HTTP: Gu\u00eda B\u00e1sica<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abQu\u00e9 es el protocolo HTTP: Gu\u00eda B\u00e1sica\u00bb \u2014 El blog de Loading\" src=\"https:\/\/www.loading.es\/blog\/protocolo-http\/embed\/#?secret=XJHN1uppsP#?secret=3Vn6LHZqSv\" data-secret=\"3Vn6LHZqSv\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-el-blog-de-loading wp-block-embed-el-blog-de-loading\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"jhdwQGKtqp\"><a href=\"https:\/\/www.loading.es\/blog\/como-habilitar-el-certificado-ssl-y-forzar-la-redireccion-de-http-a-https-en-wordpress\/\">Habilitar certificado SSL y forzar la redirecci\u00f3n HTTP a HTTPS en WordPress<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abHabilitar certificado SSL y forzar la redirecci\u00f3n HTTP a HTTPS en WordPress\u00bb \u2014 El blog de Loading\" src=\"https:\/\/www.loading.es\/blog\/como-habilitar-el-certificado-ssl-y-forzar-la-redireccion-de-http-a-https-en-wordpress\/embed\/#?secret=sEpfSlHYVb#?secret=jhdwQGKtqp\" data-secret=\"jhdwQGKtqp\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Cuando navegamos por una p\u00e1gina con HTTPS, nuestros datos viajan cifrados. Pero eso no siempre es suficiente. Aqu\u00ed es donde entra en juego HSTS (HTTP Strict Transport Security), una pol\u00edtica de seguridad web que obliga a los navegadores a conectarse siempre mediante HTTPS.<\/p>\n<p>Esto significa que, aunque t\u00fa escribas la direcci\u00f3n con \u201chttp\u201d o sigas un enlace antiguo sin cifrado, el navegador corregir\u00e1 el error autom\u00e1ticamente. No hay margen para que un atacante redirija la conexi\u00f3n a una versi\u00f3n insegura de la web. Adem\u00e1s, HSTS evita que los usuarios puedan ignorar las advertencias de seguridad, bloqueando por completo el acceso si el certificado SSL no es v\u00e1lido.<\/p>\n","protected":false},"author":2,"featured_media":10680,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[202,204],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/10677"}],"collection":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/comments?post=10677"}],"version-history":[{"count":3,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/10677\/revisions"}],"predecessor-version":[{"id":10683,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/10677\/revisions\/10683"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/media\/10680"}],"wp:attachment":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/media?parent=10677"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/categories?post=10677"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/tags?post=10677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}