¿Cómo implementar encabezados seguros utilizando Cloudflare Workers?

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