I am currently implementing Adyen Web Drop-in integration but ran into a problem testing it on staging.
From the Adyen developer console I can see the API request and response for the session endpoint which returns the sessionData payload as expected.
We then pass sessionData into a page which renders the form correctly.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.10.0/adyen.js"
integrity="sha384-LoKEanRPljHoEsT5o+grBn8hgVzoPevwGvRd+gOp/2Xgc4Jx2FQkx29092SKDdeY"
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.10.0/adyen.css"
integrity="sha384-DB96UxMFf+ytuAxtum6/9TOoG/y+vUDFbqolCb7OcQvBA+qSrGaRrl81nMADo/+9"
crossorigin="anonymous">
</head>
<body>
<div id="dropin-container"></div>
<script type="text/javascript">
(async () => {
let checkout = await AdyenCheckout(${partnerJsonParameters?string});
checkout.create('dropin').mount('#dropin-container');
})();
</script>
</body>
</html>
Upon filling in the form with a test credit card number and clicking Pay I see two requests in the browser network pane, CORS pre-flight which is fine, and then the second request fails with
{"status":403,"errorCode":"010","message":"Not allowed [This error message is only provided on TEST, this error will be a 500 Internal Error on LIVE.]","errorType":"security"}
I have found two articles on this error, https://www.adyen.help/hc/en-us/articles/360014216000-Why-do-I-receive-a-403-or-010-Not-Allowed-error- and https://docs.adyen.com/development-resources/error-codes#010-not-allowed but the roles seem fine.
I have verified that both the session from server side and checkout config are configured with "test" environment.. any pointers on what else I can try?
After a bit of back and forward with Matthew here's the solution.
We have seen this error happening before on the test environment, and
the best way to resolve is to use another API user. Would it be
possible to create a new API user as described here, or use another of
the existing ones? Using the API Key and Client Key from the new user
should resolve the issue.
Related
I got a basic static website that I want to implement Goatcounter on. I put the following tracking script on the index page.
<script data-goatcounter="https://MY_SITE.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
But when trying to load the file locally, (not on a sever, just as a file) Firefox and Chromium both fail to load it, with the error:
GET file://gc.zgo.at/count.js net::ERR_INVALID_URL
Maybe the issue lies in running it locally?
Edit: I've disabled all ad/tracking blockers in my browser for testing.
The protocol in the script was missing.
The wrong way:
<script data-goatcounter="https://MY_SITE.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
The right way:
<script data-goatcounter="https://MY_SITE.goatcounter.com/count" async src="https://gc.zgo.at/count.js"></script>
I've installed Electron and MySql and got them working well together.
https://www.npmjs.com/package/mysql
https://www.electronjs.org/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello world</h1>
</body>
<script>
var mysql = require('mysql');
var connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'blog'
});
connection.connect();
connection.query('SELECT * FROM posts', function (error, results, fields) {
if (error) throw error;
console.log(results);
});
connection.end();
</script>
</html>
Then in the window I get a security error.
index.html:16 Uncaught ReferenceError: require is not defined
I noticed that I could override it like below.
win = new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
});
I've read it's dangerous and not recommended? I also get a warning when doing so.
Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
Policy set or a policy with "unsafe-eval" enabled. This exposes users of
this app to unnecessary security risks.
How can I get around it?
What you're experiencing here is Electron's out-of-the-box sandboxing. This prevents your renderer process, where your user interface HTML and JavaScript are executed, from being able to access NodeJS APIs so no malicious code can actually do harm to the user's computer. As you said, you can disable this automatic sandboxing by setting nodeIntegration: true, which yields this security warning, but this is not considered a good practice by the Electron developers.
However, if you cannot use some of the workarounds (e.g. by using a preload script; refer to the Electron documentation, specifically this tutorial on context isolation), to get rid of the warning (which really does not do any harm because it won't be displayed when the app is packaged), you may set an environment variable in your main process like so (preferably on the very first line):
process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = true;
// Other main process code...
Although this will remove the warning, I'd leave it where it is so that it can remind you of your security duties and to maybe revisit your code once the app has reached a production-ready state to make it comply with Electron's security guidelines.
Use a preload script instead, and put your MySQL connection code in there. Preload scripts have access to require / the node integration and also have access to the content window at the same time. You can make the preload script add to the global window object to expose functions to connect and perform sql queries.
I need to access MySQL database which is located in remote server. I need to fetch data and display it in Windows 8 App (HTML/Javascript). Is there any API or JS framework available which can access remote database.
I don't want to store database in windows 8 app, I just need to retrieve it from remote.
Create web service and consume it in your application.
Not sure why the previous post is getting downvoted, but here's a deeper explanation:
As per the design models put forward by Microsoft in its examples and the need for highly-responsive applications, The preferred method for getting data into Windows 8 apps is via web services. This allows you to do things like use the async/await keywords so that your application can stay responsive while getting data. There's very little reason to use a database over the web service.
You should check here for a data usage example with the HTML/Javascript app:
http://msdn.microsoft.com/en-us/library/windows/apps/hh974582.aspx
you can use WCF Service this best way.
I used MySQL connector look this example:
https://blogs.oracle.com/MySqlOnWindows/entry/how_to_using_connector_net
i have not tested on a remote database so far, but works on localhost
Well I recently did some tweaking with Windows store apps and Php and this is what I've come up with it's not much but it can give you a start up.
You can use MySQL with Php and then echo out the data. This is from where JavaScript / HTML windows store can fetch the data by using JQuery.
$.ajax({
type: "GET" //POST GET your choice
url: " " //paste the php script that retrieves the data from the database
success: function (output){
$('#myDiv').append(data);
}
});
Please do keep in mind this is just an unauthorized way of accessing data from MySQL through PHP.
The HTML can be for default.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<script src="/Scripts/jquery-2.0.3.js"></script>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<!-- test references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/Scripts/myScript.js"></script>
</head>
<body>
<div id="myDiv">
</div>
</body>
</html>
I'm new to this area and I'm developing a HTML5 mobile app that calls a restful webservices api and exchange JSON objects.
I want to authenticate the client once and give a a key/token that can be used afterwards until a pre-defined expiration date. I have 4 questions:
How can I secure the serverside webservices api? any tools whatsoever?
Can I use the local storage to store the key/token?
What are the phonegap security tools I can use for the client side?
How can I use OAUTH in this case?
How can I secure the serverside webservices api? any tools whatsoever?
OAuth may be overkill for your need, verify that you really need to use such a powerful (and complex) standard.
Two examples of PHP server side software that you may use:
Solberg-OAuth
SimpleSAMLphp
Can I use the local storage to store the key/token?
Yes! Be aware that you MUST use the OAuth 2.0 implicit grant flow in order to obtain the token at the client side.
What are the phonegap security tools I can use for the client side?
ChildBrowser is a plugin to open a separate browserwindow for the authentication process.
I've written a javascript library JSO that can do OAuth 2.0 for you. Other libraries exists as well.
https://github.com/andreassolberg/jso
How can I use OAUTH in this case?
Using JSO with Phonegap and ChildBrowser
Using JSO to perform OAuth 2.0 authorization in WebApps running on mobile devices in hybrid environment is an important deployment scenario for JSO.
Here is a detailed instruction on setting up JSO with Phonegap for iOS and configure OAuth 2.0 with Google. You may use it with Facebook or other OAuth providers as well.
Preparations
Install XCode from App Store, and iOS development kit
Install Phonegap 2.0, Cordova 2.0
Setup App
To create a new App
./create /Users/andreas/Sites/cordovatest no.erlang.test "CordovaJSOTest"
Install ChildBrowser
The original ChildBrowser plugin is available here.
https://github.com/purplecabbage/phonegap-plugins/tree/master/iPhone/ChildBrowser
However, it is not compatible with Cordova 2.0. Instead, you may use this fork of ChildBrowser which should be working with Cordova 2.0:
https://github.com/Shereef/ChildBrowserOnCordova200
What you need to do is to copy these files:
https://github.com/Shereef/ChildBrowserOnCordova200/tree/master/ChildBrowserOnCordova200/Plugins
in to your WebApp project area, by using drag and drop into the Plugins folder in XCode.
Now you need to edit the file found in Resources/Cordova.plist found in your WebApp project area.
In this file you need to add one array entry with '*' into ExternalHosts, and two entries into Plugins:
ChildBrowser -> ChildBrowser.js
ChildBrowserCommand -> ChildBrowserCommand
as seen on the screenshot.
(source: erlang.no)
Setting up your WebApp with ChildBrowser
I'd suggest to test and verify that you get ChildBrowser working before moving on to the OAuth stuff.
In your index.html file try this, and verify using the Simulator.
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
<script type="text/javascript">
var deviceready = function() {
if(window.plugins.childBrowser == null) {
ChildBrowser.install();
}
window.plugins.childBrowser.showWebPage("http://google.com");
};
document.addEventListener('deviceready', this.deviceready, false);
</script>
Setting up JSO
Download the latest version of JSO:
https://github.com/andreassolberg/jso
The documentation on JSO is available there as well.
The callback URL needs to point somewhere, and one approach would be to put a callback HTML page somewhere, it does not really matter where, although a host you trust. And put a pretty blank page there:
<!doctype html>
<html>
<head>
<title>OAuth Callback endpoint</title>
<meta charset="utf-8" />
</head>
<body>
Processing OAuth response...
</body>
</html>
Now, setup your application index page. Here is a working example:
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jso/jso.js"></script>
<script type="text/javascript">
var deviceready = function() {
var debug = true;
/*
* Setup and install the ChildBrowser plugin to Phongap/Cordova.
*/
if(window.plugins.childBrowser == null) {
ChildBrowser.install();
}
// Use ChildBrowser instead of redirecting the main page.
jso_registerRedirectHandler(window.plugins.childBrowser.showWebPage);
/*
* Register a handler on the childbrowser that detects redirects and
* lets JSO to detect incomming OAuth responses and deal with the content.
*/
window.plugins.childBrowser.onLocationChange = function(url){
url = decodeURIComponent(url);
console.log("Checking location: " + url);
jso_checkfortoken('facebook', url, function() {
console.log("Closing child browser, because a valid response was detected.");
window.plugins.childBrowser.close();
});
};
/*
* Configure the OAuth providers to use.
*/
jso_configure({
"facebook": {
client_id: "myclientid",
redirect_uri: "https://myhost.org/callback.html",
authorization: "https://www.facebook.com/dialog/oauth",
presenttoken: "qs"
}
}, {"debug": debug});
// For debugging purposes you can wipe existing cached tokens...
// jso_wipe();
// jso_dump displays a list of cached tokens using console.log if debugging is enabled.
jso_dump();
// Perform the protected OAuth calls.
$.oajax({
url: "https://graph.facebook.com/me/home",
jso_provider: "facebook",
jso_scopes: ["read_stream"],
jso_allowia: true,
dataType: 'json',
success: function(data) {
console.log("Response (facebook):");
console.log(data);
}
});
};
document.addEventListener('deviceready', this.deviceready, false);
</script>
How can I secure the serverside webservices api? any tools whatsoever?
Depends on which language the web service is written, php has zend framework for creating web services / nusoap etc. So all of the languages do provide info on how to secure the webservice.
Can I use the local storage to store the key/token?
Yes you can use local storage look at the phonegap documentation
What are the phonegap security tools I can use for the client side?
I dont think so there are any but you can search for some plugins or create your own plugin. Depends on what kind of security do you want to implement.
How can I use OAUTH in this case?
Here is a library for OAuth and this seems to be helpful. You can create a phone gap plugin to interact with the library or use a javascript oauth library(its with sample also).
I finished Ryan Bates #348 video for creating a JSON API using the rails-api gem. I have it working as in the example. However, in his example he has the page that calls the API in the same project. My goal is to separate out the client app from the API app.
I created a second rails app that simply includes the page that does a JSON request for the API data and a post when submitting the form. I have the client app running on localhost:3000 and the API running on localhost:4000.
Below is the client side code. It successfully submits a new deal record, but the
GET doesnt load the list of deals. When looking in the logs it appears it is requesting it as HTML. When the page was apart of the same API project, the same code was making the call as JSON in the logs.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
function addDeal(deal) {
$('#deals').append('<li>' + deal.name + '</ul>');
}
$('#new_deal').submit(function(e) {
$.post('http://localhost:4000/deals', $(this).serialize(), addDeal);
this.reset();
e.preventDefault();
});
$.getJSON('http://localhost:4000/deals', function(deals) {
$.each(deals, function() { addDeal(this); });
});
});
</script>
<div id="container">
<h1>My Deals</h1>
<form id="new_deal">
<input type="text" name="deal[name]" id="deal_name">
<input type="submit" value="Add">
</form>
<ul id="deals"></ul>
</div>
Because of Cross Origin Policy you have following options:
Use jsonp (don't do this since you have your server :) check below )
Manage Cross Origin Resource Sharing on server, recently I wrote answer here how to achieve this
You could use rails ActiveResource::Base to conect to your api, but it may be slow, and you would repeating yourself unless there is some presentation logic you need on backend. BTW, check Nibbler gem it may be somewhat better... it really depends what you need to do in backend.
Anyhow. I would avoid approach 1, its kinda overhead especially if you want to POST, PUT or DELETE, and you can allows use option 2 if you have pure javascript app running as UI. But even if you are building JS agnostic app you always need a bit of backend processing so option 3 is probably something you'd prefer.