学习PhoneGap过程遇到的问题1（csp导致行内console和alert失效）

初学PhoneGap，今天鼓捣了一天终于把环境以及如何创建项目搞明白了。首先说说我遇到的问题，我已经通过命令行创建好项目，并且手动加了该用的插件。随后我按照书里介绍的开开心心的敲了如下代码：

<script type="text/javascript">
    document.addEventListener("deviceready", onDeviceReady, true);
    function onDeviceReady() {
        console.log("******phonegap*****");
        navigator.notification.alert("PhoneGap is working", function(){}, "", "");
    }
</script>

随后我编译项目，打开xcode，运行项目，满怀期待的想看一下效果。结果，xcode中console无任何信息，alert也没弹出。

这让我很费解，什么原因呢？找了好久，终于找到了原因。

大家打开index页面时，不知有没有注意到这样一段注释：

    <!--
    Customize this policy to fit your own app‘s needs. For more guidance, see:
        https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
    Some notes:
        * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
        * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
        * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
            * Enable inline JS: add ‘unsafe-inline‘ to default-src
    -->

OK，这就是我上面问题的原因。原因是通过命令行生成的项目中，index页面中自动加入了如下代码段：

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

这段代码默认禁用了行内javascript，所以导致我上面的问题，解决方法是在default-src中加入‘unsafe-inline‘：

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

关于更多CSP资料可以参考：

http://www.2cto.com/Article/201408/327064.html