Política de seguridad de contenido: la configuración de la página bloqueó la carga de un recurso

Estoy usando CAPTCHA en la carga de la página, pero se bloquea debido a alguna razón de seguridad.

Estoy enfrentando este problema:

    Política de seguridad del contenido: la configuración de la página bloqueó la carga
    de un recurso en
    http://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit
    ("script-src http://test.com:8080 'inseguro-en línea' 'inseguro-eval'").

He utilizado la siguiente etiqueta JavaScript y meta:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<script src="http://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>

Ha dicho que solo puede cargar scripts desde su propio sitio (usted mismo). Luego ha intentado cargar un script desde otro sitio ( www.google.com ) y, debido a que lo ha restringido, no puede. Ese es el objetivo de la Política de seguridad de contenido (CSP).

Puede cambiar su primera línea a:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://www.google.com">

O, alternativamente, puede valer la pena eliminar esa línea por completo hasta que descubra más sobre CSP. Su CSP actual es bastante laxo de todos modos (permitiendo unsafe-inline, unsafe-evaly una default-srcde *), por lo que probablemente no esté agregando demasiado valor, para ser honesto.

Con mi proyecto ASP.NET Core Angular ejecutándose en Visual Studio 2019, a veces recibo este mensaje de error en la consola de Firefox:

Política de seguridad del contenido: la configuración de la página bloqueó la carga de un recurso en línea ("default-src").

En Chrome, el mensaje de error es en cambio:

Error al cargar el recurso: el servidor respondió con un estado de 404 ()

En mi caso, no tuvo nada que ver con mi Política de seguridad de contenido, sino que fue simplemente el resultado de un error de TypeScript de mi parte.

Verifique la ventana de salida de su IDE para ver si hay un error de TypeScript, como:

> ERROR in src/app/shared/models/person.model.ts(8,20): error TS2304: Cannot find name 'bool'.
>
> i ｢wdm｣: Failed to compile.

_{Nota: Dado que esta pregunta es el primer resultado en Google para este mensaje de error.}

Tuve un tipo de error similar. Primero, intenté agregar las metaetiquetas en el código, pero no funcionó.

Descubrí que en el servidor web nginx puede tener una configuración de seguridad que puede bloquear la ejecución del código externo:

# Security directives
server_tokens off;
add_header X-Frame-Options SAMEORIGIN;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'  https://ajax.googleapis.com  https://ssl.google-analytics.com https://assets.zendesk.com https://connect.facebook.net; img-src 'self' https://ssl.google-analytics.com https://s-static.ak.facebook.com https://assets.zendesk.com; style-src 'self' 'unsafe-inline' https://assets.zendesk.com; font-src 'self' https://fonts.gstatic.com  https://themes.googleusercontent.com; frame-src https://player.vimeo.com https://assets.zendesk.com https://www.facebook.com https://s-static.ak.facebook.com https://tautt.zendesk.com; object-src 'none'";

Consulte la Política de seguridad de contenido. Es posible que deba agregar la referencia de la fuente.

Me las arreglé para permitir todos mis sitios requeridos con este encabezado:

header("Content-Security-Policy: default-src *; style-src 'self' 'unsafe-inline'; font-src 'self' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' stackexchange.com");                    

Lo solucioné actualizando tanto la versión de Angular que estaba usando (desde v8 -> v9) como la versión de TypeScript (desde 3.5.3 -> más reciente).

Puede desactivarlos en su navegador.

Firefox

Escriba about:configen la barra de direcciones de Firefox y búsquelo security.csp.enabley configúrelo en false.

Cromo

Puede instalar la extensión llamada Disable Content-Security-Policypara deshabilitar CSP.