Question

99

Cordova - refuse to execute inline event handler because it violates the following content Security policy

rated 0 times [ 101] [ 2] / answers: 1 / hits: 77644 / 9 Years ago, thu, june 25, 2015, 12:00:00

I'm training for Cordova application development and I turn around a problem with Content Security Policy.

My application is running with the Android emulator, but when I have to execute a javascript I get a message in NetBeans (output window).

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

My code is below. This is my index.html.
I try to understand how CSP works and I think I understand the concept, but in this case, I don't understand the problem. Line 58 is the comment.

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

By advance thanks for your help because I need it.
Jérôme

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

payne

Add To Favorites

Follow

Total Points: 527

Total Questions: 108

Total Answers: 88

Location: Tajikistan

Member since Thu, Apr 14, 2022

2 Years ago

answered 9 Years ago tayaw · Accepted Answer

Check this link, it says:

Inline JavaScript will not be executed. This restriction bans both inline <script> blocks and inline event handlers (e.g. button onclick=...).

To avoid cross-site scripting issues like below specified

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.

Go for event listener functions instead of 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>

In order to to work with new Browser you need to write your code with a clean separation between content and behavior.

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