La captura de clics es un ataque malicioso en el que se engaña a los usuarios para que hagan clic en vínculos o elementos de la IU de un sitio que parece ser de confianza y familiar. Por lo general, esto se logra incorporando parte o la totalidad del sitio de confianza en el sitio malicioso con un <iframe>.
El encabezado X-Frame-Options (XFO) y la directiva frame-ancestors en el encabezado Content-Security-Policy (CSP) pueden mitigar los ataques de suplantación de clics controlando cómo se puede incorporar un sitio en un <iframe>.
Cómo falla la auditoría de Lighthouse
La auditoría se aprobará si el encabezado XFO se establece con SAMEORIGIN o DENY, o si la directiva frame-ancestors se establece en el encabezado CSP. La auditoría fallará si no se configura ninguna de estas políticas de control de tramas.
Cómo configurar una política de control de marco para mitigar el robo de clics
Se debe establecer una política de control de tramas en los encabezados HTTP de la solicitud de documento inicial. El encabezado X-Frame-Options y la directiva frame-ancestors en Content-Security-Policy no funcionarán si se configuran en un elemento <meta>.
Encabezado XFO
Si configuras DENY o SAMEORIGIN para el encabezado XFO, se mitigarán los ataques de suplantación de clics:
X-Frame-Options: SAMEORIGIN
X-Frame-Options: DENY
La directiva SAMEORIGIN permite que la página se muestre solo si todos los marcos superiores comparten el mismo origen que la página. Por el contrario, la directiva DENY evita que la página se muestre en un marco, independientemente del origen del marco superior.
Encabezado del CSP
La directiva frame-ancestors dentro del encabezado de la CSP define qué sitios pueden incorporar la página determinada en un <frame>, <iframe>, <object> o <embed>. Al igual que con XFO, la directiva frame-ancestors de CSP se puede usar para mitigar los ataques de captura de clics configurándola en self o none:
Content-Security-Policy: frame-ancestors 'self';
Content-Security-Policy: frame-ancestors 'none';
Sin embargo, la directiva frame-ancestors es más flexible que XFO porque puede establecer fuentes superiores específicas que pueden incorporar la página:
Content-Security-Policy: frame-ancestors 'self' https://example.com;