cordova 应用程序的 facebook 登录
facebook login for cordova applications
我正在尝试将 facebook 登录与 cordova 应用程序集成。我收到以下错误。我用了 https://github.com/Wizcorp/phonegap-facebook-plugin.
我居然关注了这个link
解决这个问题没有帮助。
错误:
cordova oauth 拒绝执行内联脚本,因为它违反了以下内容安全策略指令:default-src self data: gap: https://ssl.gstatic.com unsafe-eval。需要不安全内联关键字、散列 (sha256-HNED5JYugsSN2fW8J37cauBfrz4h1d04l7WiLk8vriA=) 或随机数 (nonce-...) 才能启用内联执行。另请注意,script-src 未明确设置,因此 default-src 用作备用`
未捕获类型错误:无法读取 属性 'querySelector' of null
这是代码
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);
}
};
还有其他人遇到同样的问题吗?有人有示例工作项目吗?
您需要在 index.html
中设置 Content-Security-Policy <meta>
标签。
参见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">
我正在尝试将 facebook 登录与 cordova 应用程序集成。我收到以下错误。我用了 https://github.com/Wizcorp/phonegap-facebook-plugin.
我居然关注了这个link
错误:
cordova oauth 拒绝执行内联脚本,因为它违反了以下内容安全策略指令:default-src self data: gap: https://ssl.gstatic.com unsafe-eval。需要不安全内联关键字、散列 (sha256-HNED5JYugsSN2fW8J37cauBfrz4h1d04l7WiLk8vriA=) 或随机数 (nonce-...) 才能启用内联执行。另请注意,script-src 未明确设置,因此 default-src 用作备用`
未捕获类型错误:无法读取 属性 'querySelector' of null
这是代码
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);
}
};
还有其他人遇到同样的问题吗?有人有示例工作项目吗?
您需要在 index.html
中设置 Content-Security-Policy <meta>
标签。
参见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">