Cordova - 拒绝执行内联事件处理程序，因为它违反了以下内容安全策略答案

【问题标题】：Cordova - refuse to execute inline event handler because it violates the following content Security policyCordova - 拒绝执行内联事件处理程序，因为它违反了以下内容安全策略
【发布时间】：2015-06-25 21:02:04
【问题描述】：

我正在接受 Cordova 应用程序开发培训，我正在解决内容安全策略的问题。

我的应用程序正在使用 Android 模拟器运行，但是当我必须执行 javascript 时，我在 NetBeans（输出窗口）中收到一条消息。

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

我的代码如下。这是我的 index.html。我试图了解 CSP 的工作原理，并且我认为我理解了这个概念，但在这种情况下，我不明白问题所在。第 58 行是注释。

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

提前感谢您的帮助，因为我需要它。杰罗姆

【问题讨论】：

您可以放松或删除 CSP 吗？
如果我这样做，我会得到Uncaught ReferenceError: capturePhoto is not defined，我会得到No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.
您是否尝试将'unsafe-inline' 添加到script-src？

标签： javascript android cordova content-security-policy

【解决方案1】：

查看link，上面写着：

内联 JavaScript 不会被执行。此限制禁止内联 <script> 块和内联事件处理程序 (e.g. button onclick="...")。

为了避免下面指定的跨站点脚本问题

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.

使用event listener functions 而不是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>

为了使用新的浏览器，您需要在编写代码时明确区分内容和行为。

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

【讨论】：

谢谢。现在是工作。感谢您提供链接，此帮助更易于理解。
为“更改”、“点击”等添加事件监听器是最好的方法

【解决方案2】：

尝试将img-src * 添加到 Content-Security-Policy 标签：

<meta http-equiv="Content-Security-Policy"
         content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src *">

【讨论】：