• ¡Obtenga la seguridad de la aplicación de la manera correcta! Detectar, proteger, monitorear, acelerar y más ...
  • Una guía paso a paso para implementar encabezados HTTP seguros en sitios web impulsados ​​por Cloudflare usando Cloudflare Workers.

    Hay muchas formas de implementar encabezados de respuesta HTTP para proteger sitios de vulnerabilidades comunes, como XSS, Clickjacking, rastreo de MIMI, inyección entre sitios y muchas más. Su práctica ampliamente adoptada y recomendada por OWASP.

    Anteriormente, escribí sobre implementar encabezados en un servidor web como Apache, Nginx e IIS. Sin embargo, si está utilizando Cloudflare para proteger y potenciar sus sitios, puede aprovechar Trabajadores de Cloudflare para manipular los encabezados de respuesta HTTP.

    Cloudflare Workers es un plataforma sin servidor donde puede ejecutar JavaScript, C, C ++, código Rust. Se implementa en todos los centros de datos de Cloudflare, que son más de 200 en todo el mundo.

    La implementación es muy sencilla y flexible. Le brinda la flexibilidad de aplicar los encabezados en todo el sitio, incluido el subdominio o URI específico con un patrón a juegon usando Regex.

    Para esta demostración, usaré el código por Scott Helme.

    Empecemos ... 👨‍💻

    • Inicie sesión en Cloudflare y haga clic en Trabajadores (enlace directo)

    • Haga clic en Crear un trabajador

    • Copia el worker.js código de GitHub y pegar en el editor de secuencias de comandos
    const securityHeaders = {
            "Content-Security-Policy": "upgrade-insecure-requests",
            "Strict-Transport-Security": "max-age=1000",
            "X-Xss-Protection": "1; mode=block",
            "X-Frame-Options": "DENY",
            "X-Content-Type-Options": "nosniff",
            "Referrer-Policy": "strict-origin-when-cross-origin"
        },
        sanitiseHeaders = {
            Server: ""
        },
        removeHeaders = [
            "Public-Key-Pins",
            "X-Powered-By",
            "X-AspNet-Version"
        ];
    
    async function addHeaders(req) {
        const response = await fetch(req),
            newHeaders = new Headers(response.headers),
            setHeaders = Object.assign({}, securityHeaders, sanitiseHeaders);
    
        if (newHeaders.has("Content-Type") && !newHeaders.get("Content-Type").includes("text/html")) {
            return new Response(response.body, {
                status: response.status,
                statusText: response.statusText,
                headers: newHeaders
            });
        }
    
        Object.keys(setHeaders).forEach(name => newHeaders.set(name, setHeaders[name]));
    
        removeHeaders.forEach(name => newHeaders.delete(name));
    
        return new Response(response.body, {
            status: response.status,
            statusText: response.statusText,
            headers: newHeaders
        });
    }
    
    addEventListener("fetch", event => event.respondWith(addHeaders(event.request)));

    No guarde todavía; es posible que desee ajustar los siguientes encabezados para cumplir con el requisito.

    Política de seguridad de contenido - si necesita aplicar su política de aplicación, puede hacerlo aquí.

    Por ejemplo, si necesita obtener contenido a través de iFrame en varias URL, puede aprovechar marco-ancestros como a continuación.

    "Content-Security-Policy" : "frame-ancestors 'self' gf.dev geekflare.com",

    Lo anterior permitirá cargar el contenido desde gf.dev, geekflare.comy sitio propio.

    Opciones de marco X - puede cambiar a SAMEORIGIN si tiene la intención de mostrar el contenido de su sitio en alguna página dentro del mismo sitio usando iframe.

    "X-Frame-Options": "SAMEORIGIN",

    servidor - puede desinfectar el encabezado del servidor aquí. Pon lo que quieras.

    "Server" : "Geekflare Server",

    RemoveHeaders - ¿Necesita eliminar algunos encabezados para ocultar las versiones y mitigar la vulnerabilidad de fuga de información?

    Usted puede hacerlo aquí.

    let removeHeaders = [
    	"Public-Key-Pins",
    	"X-Powered-By",
    	"X-AspNet-Version",
    ]

    Agregar nuevos encabezados: si necesita pasar algunos encabezados personalizados a sus aplicaciones, puede agregarlos en securityHeaders sección como se muestra a continuación.

    let securityHeaders = {
    	"Content-Security-Policy" : "frame-ancestors 'self' gf.dev geekflare.com",
    	"Strict-Transport-Security" : "max-age=1000",
    	"X-Xss-Protection" : "1; mode=block",
    	"X-Frame-Options" : "SAMEORIGIN",
    	"X-Content-Type-Options" : "nosniff",
    	"Referrer-Policy" : "strict-origin-when-cross-origin",
            "Custom-Header"  : "Success",
    }

    Una vez que haya terminado de ajustar todos los encabezados que necesita, nombre el trabajador y haga clic en Guardar e implementar.

    ¡Excelente! el trabajador está listo y, a continuación, debemos agregar esto al sitio donde desea aplicar los encabezados. Aplicaré esto a mi sitio de laboratorio.

    • Vaya a la página de inicio / panel de Cloudflare y seleccione el sitio.
    • Vaya a la pestaña Trabajadores >> Agregar ruta.
    • Ingrese la URL en Ruta; puede aplicar Regex aquí.
    • Seleccione los trabajadores recién creados y guarde

    Eso es todo; en un segundo, notará que todos los encabezados están implementados en el sitio.

    Así es como se ve desde Herramientas Chrome Dev. También puede probar el encabezado a través de un Herramienta de encabezado HTTP.

    No sé por qué no se refleja el encabezado del servidor. Supongo que Cloudflare está anulando esto.

    Verá, la implementación general toma ~ 15 minutos, y no se requiere tiempo de inactividad o reinicio como Apache o Nginx. Si planea aplicar esto a un sitio de producción, le sugiero que primero pruebe en un entorno inferior, o con la ayuda de una ruta, puede aplicar en las páginas de prueba para verificar los resultados. Una vez satisfecho, empújelo hacia donde desee.

    ¡Esto es increíble!

    Gracias a Scott para el codigo