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

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="https://stackoverflow.com/questions/31060722/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 -->

Leave a Comment