web-dev-qa-db-fra.com

Cordova - refuse d'exécuter le gestionnaire d'événements en ligne car il enfreint le contenu suivant

Je m'entraîne au développement d'applications Cordova et je résous un problème lié à la politique de sécurité du contenu.

Mon application fonctionne avec l'émulateur Android, mais lorsque je dois exécuter un javascript, je reçois un message dans NetBeans (fenêtre de sortie).

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

Mon code est ci-dessous. Ceci est mon index.html. J'essaie de comprendre comment fonctionne le CSP et je pense comprendre le concept, mais dans ce cas, je ne comprends pas le problème. La ligne 58 est le commentaire.

<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>

Merci d'avance pour votre aide car j'en ai besoin. Jérôme

javascriptandroidcordovacontent-security-policy
34
grome55

Vérifiez ceci lien , il dit:

Le JavaScript en ligne ne sera pas exécuté. Cette restriction interdit les blocs inline <script> Et les gestionnaires d'événements inline (e.g. button onclick="...").

Pour éviter les problèmes de script intersite tels que spécifiés ci-dessous

one.app#/home:1 Refused to execute inline event handler because it violates the following Content
Security Policy directive: "script-src 'self' 'nonce-d452460d-e219-a6e5-5709-c8af6ca82889'
chrome-extension: 'unsafe-inline' 'unsafe-eval' https://sfdc.azureedge.net 
*.na34.visual.force.com https://ssl.gstatic.com/accessibility/". Note that 'unsafe-inline'
is ignored if either a hash or nonce value is present in the source list.

Choisissez event listener functions Au lieu de onclick='myFun()".

<body onload="main();">
    <button onclick="clickHandler(this)">
        Click for awesomeness!
    </button>
</body>
<script>
    function clickHandler(element) {
        // On click Code
    }

    function main() {
        // Initialization work goes here.
    }
</script>

Afin de travailler avec le nouveau navigateur, vous devez écrire votre code avec une séparation nette entre contenu et comportement.

<body>
  <button>Click for awesomeness!</button>
</body>
<script src="popup.js"></script>

<!-- popup.js -->
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('button').addEventListener('click', clickHandler);
      main();
    });

    function clickHandler(element) {
        // On click Code
    }

    function main() {
        // Initialization work goes here.
    }
<!-- popup.js -->
52
Martin Cisneros Capistrán