Cordova – se niega a ejecutar el controlador de eventos en línea porque viola el siguiente contenido Política de seguridad

Estoy entrenando para el desarrollo de aplicaciones de cordova y torno un problema con la Política de Seguridad de Contenido.

Mi aplicación se está ejecutando con el emulador de Android, pero cuando tengo que ejecutar un javascript me sale un mensaje en netbeans (ventana de salida).

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' https://ssl.gstatic.com". (22:35:56:126 | error, security) at www/index.html:58 

Mi código está abajo. Este es mi index.html. Trato de entender cómo funciona CSP y creo que entiendo el concepto, pero en este caso no entiendo el problema. La línea 58 es un comentario.

 <html> <head> <meta http-equiv="Content-Security-Policy" content="default-src 'self' * data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self'; script-src 'self' https://ssl.gstatic.com; media-src *"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <title>Hello World</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div class="app"> <h1>Apache Cordova</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> </div> <!-- line 58 --> <button onclick="capturePhoto();">Capture Photo</button> <br> <img style="display:none;width:80px;height:80px;" id="smallImage" src="" /> <img style="display:none;" id="largeImage" src="" /> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html> 

Por adelantado gracias por tu ayuda porque lo necesito. Jérôme

Compruebe este enlace , dice:

El JavaScript en línea no se ejecutará. Esta restricción prohíbe tanto los bloques en línea como los manejadores de eventos en línea (por ejemplo, botón onclick = "…").

Así que puede utilizar un oyente de eventos simple dentro de una etiqueta de script como:

 document.getElementById("myBtn").addEventListener("click", capturePhoto); function capturePhoto(){ //do something } 

Cuando inspecciono el elemento en la Consola …. este fue el error

Se negó a ejecutar el controlador de eventos en línea porque infringe la siguiente directiva de Política de seguridad de contenido: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Se requiere la palabra clave 'unsafe-inline', un hash ('sha256 -…') o un nonce ('nonce -…') para habilitar la ejecución en línea. Tenga en cuenta también que 'script-src' no se estableció explícitamente, por lo que 'default-src' se utiliza como fallback.

Código en línea considerado perjudicial

Debe quedar claro que la Política de Seguridad de Contenidos (CSP, por sus siglas en inglés) se basa en los orígenes de las listas blancas, ya que es una manera inequívoca de instruir al navegador para que acepte los conjuntos específicos de recursos y rechace el resto. Sin embargo, la lista blanca basada en el origen no soluciona la mayor amenaza que suponen los ataques XSS: inline script injection. Si un atacante puede inyectar una etiqueta de script que contiene directamente alguna carga malintencionada (sendMyDataToEvilDotCom ();), el navegador no tiene ningún mecanismo para distinguirlo de una etiqueta de script inline legítima. CSP resuelve este problema mediante la prohibición completa de la escritura en línea: es la única manera de estar seguro.

Esta prohibición incluye no sólo las secuencias de comandos incrustadas directamente en las etiquetas de script, sino también los manejadores de eventos en línea y javascript: URL. Tendrá que mover el contenido de las etiquetas de script en un archivo externo y reemplazar javascript: URL y con las llamadas adecuadas de AddEventListener. Por ejemplo, podríamos reescribir lo siguiente de:

  <script> function doAmazingThings() { alert('YOU AM AMAZING!'); } </script> <button onclick='doAmazingThings();'>Am I amazing?</button> 

A algo más parecido:

Amazing.html:

  <script src='amazing.js'></script> <button id='amazing'>Am I amazing?</button> 

Amazing.js:

  function doAmazingThings() { alert('YOU AM AMAZING!'); } document.addEventListener('DOMContentReady', function () { document.getElementById('amazing') .addEventListener('click', doAmazingThings); }); 

Referencia de la política de seguridad de contenido

La cuestión clave explotada por los ataques XSS es la incapacidad del navegador para distinguir entre el script que está destinado a ser parte de su aplicación y el script que ha sido maliciosamente inyectado por un tercero

La directiva se aplica a una amplia variedad de recursos. Uri-base restringe las direcciones URL que pueden aparecer en un elemento base de páginas. Child-src enumera las URL de los trabajadores y el contenido del marco incrustado. Por ejemplo: child-src https://youtube.com permitiría incorporar videos de YouTube pero no de otros orígenes. Use esto en lugar de la directiva frame-src obsoleta. Connect-src limita los orígenes a los que se puede conectar (a través de XHR, WebSockets y EventSource). Font-src especifica los orígenes que pueden servir las fuentes web. Las fuentes Web de Google pueden habilitarse a través de font-src https://themes.googleusercontent.com La lista de acciones de formulario incluye puntos finales válidos para la presentación de etiquetas. Frame-ancestors especifica los orígenes que pueden incrustar la página actual. Esta directiva se aplica a las etiquetas frame, iframe, embed y applet. Esta directiva no se puede utilizar en las etiquetas meta y se aplica sólo a los recursos no HTML. Frame-src desaprobado. Use child-src en su lugar. Img-src define los orígenes desde los que se pueden cargar imágenes. Media-src restringe los orígenes permitidos para entregar vídeo y audio. Object-src permite el control sobre Flash y otros complementos. Plugin-types limita los tipos de complementos que una página puede invocar. Report-uri especifica una URL en la que un navegador envía informes cuando se infringe una política de seguridad de contenido. Esta directiva no se puede utilizar en las etiquetas. Style-src es la contraparte de script-src para las hojas de estilo. Upgrade-insecure-requests Indica a los agentes de usuario a reescribir esquemas de URL, cambiando HTTP a HTTPS. Esta directiva es para sitios web con un gran número de URL antiguos que necesitan ser reescritos.

También se aceptan cuatro palabras clave en la lista de fuentes:

"Ninguno", como es de esperar, no coincide con nada.

'Self' coincide con el origen actual, pero no con sus subdominios.

'Unsafe-inline' permite JavaScript en línea y CSS

'Unsafe-eval' permite mecanismos de texto a JavaScript como eval

Intenta agregar 'img-src *' a la etiqueta Content-Security-Policy:

https://ssl.gstatic.com 'unsafe-eval'; Style-src 'auto' 'inseguro en línea'; Media-src *; Img-src * ">

  • Cambios en una página web a través de JavaScript que no aparecen en WebView. ¿Hay una manera de forzar el WebView para volver a dibujar su contenido?
  • Cómo evitar que el teclado en pantalla desaparezca cuando el foco cambia de un campo de texto a otro
  • Detectar si la aplicación de Android se ha instalado en el dispositivo mediante una página web móvil: PHP y JS
  • ¿Por qué se detiene el Javascript cuando presiona mucho tiempo en un dispositivo Android o iOS?
  • ¿Cómo puedo ocultar el teclado Android usando JavaScript?
  • Android Phonegap: Notificar a javascript cuando se termina un AsyncTask
  • El evento JavaScript touchend no se disparará en Android
  • Obtener ancho y altura disponible fiable con javascript
  • Bootstrap 2.3 Problemas de menú plegables en Android Mobile
  • El evento de desplazamiento del navegador no se dispara con suficiente frecuencia en dispositivos iOS y Android
  • Textarea no envuelve texto en WebView en Android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.