¡AdSense aprobado! Pero los anuncios no se muestran... el culpable es la "CSP"

Un blog técnico construido con esfuerzo en Next.js. Finalmente aprobó el examen de Google AdSense y, aunque se pegó la etiqueta de anuncio con alegría, pensando: "¡Con esto estoy en la línea de salida de la monetización!", no aparece nada en la pantalla.

Si abre la consola de las herramientas para desarrolladores (Chrome DevTools), ¿no ve una gran cantidad de errores en texto rojo?

Refused to load the script ''...'' because it violates the following Content Security Policy directive...

Si aparece este error, la causa es el encabezado CSP (Content Security Policy) que devuelve su servidor (o framework).

¿Qué es la CSP (Content Security Policy) en primer lugar?

CSP es una función de seguridad para prevenir ataques como XSS (Cross-Site Scripting). Es un mecanismo que le indica al navegador: "Este sitio solo cargará scripts e imágenes de dominios permitidos".

En frameworks modernos como Next.js, si los encabezados se configuran con una alta conciencia de seguridad, los scripts de "Google AdSense" y "ASP de afiliados" son bloqueados como "código externo sospechoso no autorizado".

Conclusión: La solución completa para next.config.js que permite AdSense y los ASPs

"Quiero mantener la seguridad, pero también quiero mostrar anuncios". Para resolver este dilema, comparto la configuración de next.config.js que tengo en funcionamiento.

El siguiente código es una configuración "todo incluido" que permite los principales ASPs como AdSense, Amazon Associates, Rakuten, A8.net, y Moshimo Affiliate, e incluso incorpora la monitorización de errores por Sentry y ajustes de optimización de imágenes.

Código real

Nota: Aunque la configuración CSP anterior (especialmente `script-src`) puede ser muy larga, los anuncios programáticos como AdSense se comunican con innumerables servidores de distribución de anuncios (SSP/DSP) en segundo plano, por lo que si no se cubren todos, es posible que los anuncios no se muestren.

Explicación de los puntos "pantanosos" de la configuración CSP

1. El infierno de la lista blanca de script-src

Para mostrar anuncios de AdSense y afiliados, no basta con permitir simplemente google.com. Debido al mecanismo de distribución de anuncios, también es necesario permitir dominios como doubleclick.net, googlesyndication.com, y otros como Amazon, Rakuten y ValueCommerce.

El código anterior enumera exhaustivamente los dominios compatibles con AdSense y los principales ASP de afiliados de Japón (A8, Moshimo, ValueCommerce), Amazon y Rakuten. La tarea de identificarlos y añadirlos uno por uno fue precisamente un "pantano".

2. Los indispensables unsafe-inline y unsafe-eval

Aunque no se recomienda desde el punto de vista de la seguridad, las siguientes especificaciones son prácticamente esenciales para ejecutar scripts de GTM (Google Tag Manager), AdSense y muchos ASPs.

• unsafe-eval: Necesario para evaluar y ejecutar código desde una cadena.
• unsafe-inline: Necesario para ejecutar código escrito directamente dentro de la etiqueta <script>...</script>.

Si se omite, muchas herramientas externas dejarán de funcionar, por lo que se permite a sabiendas del riesgo.

3. No olvide los dominios de imagen (img-src)

Incluso si el script del anuncio funciona, no tiene sentido si las imágenes de los banners no se muestran. Aparte de images.remotePatterns (configuración de optimización de imágenes de Next.js), también es necesario permitir los dominios de origen de las imágenes publicitarias (ej: *.rakuten.co.jp, *.amazon-adsystem.com) en el img-src del encabezado CSP.

Sentry y la optimización del paquete introducidos simultáneamente

Este next.config.js también incluye mejoras más allá de la seguridad.

• Implementación de Sentry: Se ha incluido una configuración para detectar y notificar en tiempo real los errores inesperados que ocurren en el entorno de producción utilizando @sentry/nextjs. Los errores de violación de CSP también pueden ser detectados por Sentry, lo que ayuda a encontrar configuraciones faltantes.
• Eliminación de console.log: La configuración de compiler: { removeConsole: ... } elimina console.log solo durante la compilación de producción. Esto previene la fuga de información debido al olvido de eliminar código de depuración y también reduce el tamaño del paquete.

Resumen: Buscando conciliar seguridad y monetización

En la gestión de sitios web con Next.js, la configuración de CSP es un muro alto e ineludible. Sin embargo, una vez configurada correctamente, se puede monetizar el sitio manteniendo su seguridad.

Si está preocupado porque "¡AdSense fue aprobado pero no se muestra!", intente ajustar el next.config.js presentado esta vez, basándose en sus propios servicios utilizados.