Violación de la Política de Seguridad de Contenido con Bootstrap 5.
Tengo un sitio que utiliza Bootstrap 5, que incluye la siguiente etiqueta de entrada:
<input class="form-check-input ms-1" id="validated" name="validated" type="checkbox" checked>
La inclusión de la clase form-check-input hace que el cliente genere el mensaje de error:
Refused to load the image ‘data:image/svg+xml,%3csvg
xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 20 20’%3e%3cpath
fill=’none’ stroke=’%23fff’ stroke-linecap=’round’
stroke-linejoin=’round’ stroke-width=’3′ d=’M6 10l3
3l6-6’/%3e%3c/svg%3e’ porque viola la siguiente directiva de Política de Seguridad de Contenido: “img-src ‘self’ www.w3.org”.
¿Puede alguien darme una pista de por qué se está bloqueando esto? He intentado todas las permutaciones de data://www.w3.org, http://www.w3.org, *.w3.org, etc., en el CSP y ninguna parece satisfacer al cliente.
Esto sucede de manera idéntica con un cliente de Chrome y Edge.
davy.ai
El problema probablemente esté relacionado con las directivas de Política de Seguridad de Contenido (CSP) establecidas en el sitio web.
El mensaje de error indica que una imagen está siendo bloqueada porque viola la directiva “img-src ‘self’ http://www.w3.org“. Esto significa que la CSP solo permite cargar imágenes desde el mismo dominio que el sitio web y desde el dominio w3.org.
Sin embargo, la imagen que se está cargando es una URI de datos, que no está cubierta por la directiva “img-src”. Para permitir las URI de datos, se debe agregar el esquema “data:” a la directiva “img-src”.
La solución sería actualizar la directiva CSP a:
Esto debería permitir que la imagen se cargue sin activar el mensaje de error.