facebook login for cordova applications

Question

I am trying to integrate facebook login with a cordova app. I am getting the below error. I used https://github.com/Wizcorp/phonegap-facebook-plugin.

I actually followed this link Cordova - refuse to execute inline event handler because it violates the following content Security policy to fix this problem its not helpful.

Errors:

1. cordova oauth Refused to execute inline script because it violates the following Content Security Policy directive: default-src self data: gap: https://ssl.gstatic.com unsafe-eval. Either the unsafe-inline keyword, a hash (sha256-HNED5JYugsSN2fW8J37cauBfrz4h1d04l7WiLk8vriA=), or a nonce (nonce-...) is required to enable inline execution. Note also that script-src was not explicitly set, so default-src is used as a fallback`

2. Uncaught TypeError: Cannot read property 'querySelector' of null

This is the code

Index.js

var app = {
initialize: function() {
    this.bindEvents();
},

bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
},

onDeviceReady: function() {
    app.receivedEvent('deviceready');
},
receivedEvent: function(id) {
    var parentElement = document.getElementById(id);
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');
    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');
    if (window.cordova.platformId == "browser") {
        facebookConnectPlugin.browserInit("xxxxxxxxxxxxxxxxx");
      }
    console.log('Received Event: ' + id);
}
};

did anyone else faced the same problem ? Does anyone have sample working project?

Answer 1

You need to set the Content-Security-Policy <meta> tag in your index.html.

See cordova-plugin-whitelist docs:

<!-- Good default declaration:
    * 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 eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
        * Enable inline JS: add 'unsafe-inline' to default-src
        * Enable eval(): add 'unsafe-eval' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">

<!-- Allow requests to foo.com -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' foo.com">

<!-- Enable all requests, inline styles, and eval() -->
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

<!-- Allow XHRs via https only -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:">

<!-- Allow iframe to https://cordova.apache.org/ -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://cordova.apache.org">