Replication of Form method with loadOneTab - javascript

If I dynamically insert a form object into a page, submit and remove the form and it works fine.
Here is an example of the form code:
<form target="_blank" enctype="multipart/form-data"
action="https://www.example.com/" method="POST">
<input value="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" name="image_content" type="hidden">
<input value="" name="filename" type="hidden">
<input value="" name="image_url" type="hidden">
</form>
When I try to do the same process with loadOneTab(), result POST is not exactly the same and therefore the result is not the same as above.
On checking the headers, "some value" is not sent fully (gets cropped) and it sets Content-Length: 0.
I must be missing something.
let postStream = Components.classes['#mozilla.org/network/mime-input-stream;1']
.createInstance(Components.interfaces.nsIMIMEInputStream);
postStream.addHeader('Content-Type', 'multipart/form-data');
postStream.addHeader('filename', '');
postStream.addHeader('image_url', '');
postStream.addHeader('image_content', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
postStream.addContentLength = true;
window.gBrowser.loadOneTab('https://www.example.com/',
{inBackground: false, postData: postStream});
Note: image_content value is 'data:image/png;base64' Data URI
NoScript causes issues with sending form and XSS and I prefer to use loadOneTab for the inBackground

Normally, one would use FormData to compose the postData of a request, but unfortunately we cannot do so here, as there is currently no way to get the stream (and other information) from a FormData instance (nsIXHRSendable is not scriptable, unfortunately), so we'll have to create a multipart/form-data stream ourselves.
Since it is likely you'll want to post some file data as well, I added file uploads as well. ;)
function encodeFormData(data, charset) {
let encoder = Cc["#mozilla.org/intl/saveascharset;1"].
createInstance(Ci.nsISaveAsCharset);
encoder.Init(charset || "utf-8",
Ci.nsISaveAsCharset.attr_EntityAfterCharsetConv +
Ci.nsISaveAsCharset.attr_FallbackDecimalNCR,
0);
let encode = function(val, header) {
val = encoder.Convert(val);
if (header) {
val = val.replace(/\r\n/g, " ").replace(/"/g, "\\\"");
}
return val;
}
let boundary = "----boundary--" + Date.now();
let mpis = Cc['#mozilla.org/io/multiplex-input-stream;1'].
createInstance(Ci.nsIMultiplexInputStream);
let item = "";
for (let k of Object.keys(data)) {
item += "--" + boundary + "\r\n";
let v = data[k];
if (v instanceof Ci.nsIFile) {
let fstream = Cc["#mozilla.org/network/file-input-stream;1"].
createInstance(Ci.nsIFileInputStream);
fstream.init(v, -1, -1, Ci.nsIFileInputStream.DEFER_OPEN);
item += "Content-Disposition: form-data; name=\"" + encode(k, true) + "\";" +
" filename=\"" + encode(v.leafName, true) + "\"\r\n";
let ctype = "application/octet-stream";
try {
let mime = Cc["#mozilla.org/mime;1"].getService(Ci.nsIMIMEService);
ctype = mime.getTypeFromFile(v) || ctype;
}
catch (ex) {
console.warn("failed to get type", ex);
}
item += "Content-Type: " + ctype + "\r\n\r\n";
let ss = Cc["#mozilla.org/io/string-input-stream;1"].
createInstance(Ci.nsIStringInputStream);
ss.data = item;
mpis.appendStream(ss);
mpis.appendStream(fstream);
item = "";
}
else {
item += "Content-Disposition: form-data; name=\"" + encode(k, true) + "\"\r\n\r\n";
item += encode(v);
}
item += "\r\n";
}
item += "--" + boundary + "--\r\n";
let ss = Cc["#mozilla.org/io/string-input-stream;1"].
createInstance(Ci.nsIStringInputStream);
ss.data = item;
mpis.appendStream(ss);
let postStream = Cc["#mozilla.org/network/mime-input-stream;1"].
createInstance(Ci.nsIMIMEInputStream);
postStream.addHeader("Content-Type",
"multipart/form-data; boundary=" + boundary);
postStream.setData(mpis);
postStream.addContentLength = true;
return postStream;
}
(You could use additional nsIMIMEInputStream instead of string-concatenating stuff together, but this would perform worse and has no real merit).
Which can then be used like e.g.:
let file = Services.dirsvc.get("Desk", Ci.nsIFile);
file.append("australis-xp hällow, wörld.png");
let postData = encodeFormData({
"filename": "",
"image_url": "",
"image_content": "--somne value ---",
"contents": file
}, "iso8859-1");
gBrowser.loadOneTab("http://www.example.org/", {
inBackground: false,
postData: postData
});

Related

CosmosDB REST API - Create document from node-red request node

I have a node-red flow from where I want to post a json object to Azure CosmosDB using the CosmosDB REST API. Below is a code snippet in JavaScript (node red function node) for building the POST request and as well generate the signature. I get response from Cosmos that the message is not properly formatted: "HTTP Error 400. The request is badly formed". Does anyone know what I´m doing wrong here? I´v included an image for the HTTP Request where we can see the headers and json body.
const { crypto } = context.global;
function getAuthorizationTokenUsingMasterKey(verb, resourceType, resourceId, date, masterKey) {
var key = new Buffer(masterKey, "base64");
var text = (verb || "").toLowerCase() + "\n" +
(resourceType || "").toLowerCase() + "\n" +
(resourceId || "") + "\n" +
date + "\n" +
"" + "\n";
var body = new Buffer(text, "utf8");
var signature = crypto.createHmac("sha256", key).update(body).digest("base64");
var MasterToken = "master";
var TokenVersion = "1.0";
return encodeURIComponent("type=" + MasterToken + "&ver=" + TokenVersion + "&sig=" + signature);
}
var url = "https://myurl.documents.azure.com/dbs/FamilyDatabase/colls/FamilyContainer/docs/"; //id here???
var key = "mysecretkey";
var resourceId = "FamilyContainer"; //"dbs/FamilyContainer" ??;
var authToken = getAuthorizationTokenUsingMasterKey("POST", "dbs", resourceId, new Date(), key);
msg.headers = {};
msg.headers['Authorization'] = authToken;
msg.headers['Accept'] = '*/*';
msg.headers['Accept-Encoding'] = '*/*';
msg.headers['Content-Type'] = 'application/json';
msg.headers['x-ms-documentdb-partitionkey'] = 'Andersen';
msg.headers['x-ms-version'] = "2018-12-31",
msg.headers['x-ms-date'] = new Date().toString();
msg.url = url;
msg.method = "POST";
msg.body = msg.payload;
/*
//I have tried different varaitios in the body here
msg.body = {
"data": msg.payload
//"id": "AndersenFamily"
}
msg.payload = {
"data": msg.payload
//"id": "AndersenFamily"
}
*/
return msg;

Parsing data from API, getting undefined

I am new to APIs and I want to add the USDA Nutrients database api to my website. I want the user to be able to search for the food,select one of the appeared results and see its' nutrition information.
How can I do this in plain JS? I've created a search bar in my website and JS takes the input and requests the data from the USDA api.
var apiKey = '';
var q = "eggs";
var url = "http://api.nal.usda.gov/ndb/search/?format=json&q=" + q + "&sort=n" + "&max=25" + "&offset=0" + "&api_key=" + apiKey;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
var data = JSON.parse(this.responseText);
document.querySelector("#usdaResults").innerHTML = data.body;
}
};
xhr.send();
I want first to present to the user a list of the results of what they searched. Then after they click the food, I want to present its' nutritional information(protein etc).
EDIT: When a user searches a food, I want to display the "group" , "name"and "manu" of all available results. At the same time,when a user wants to see the nutrition information for a specific food of those listed, I want to get its' "ndbno" number and look into the USDA database for it so I can display the data after. Same way as displayed in the official website: https://ndb.nal.usda.gov/ndb/search/list?SYNCHRONIZER_TOKEN=c91f87b5-59c8-47e0-b7dc-65b3c067b7ff&SYNCHRONIZER_URI=%2Fndb%2Fsearch%2Flist&qt=&qlookup=egg+potato&ds=&manu=
EDIT2: I'm getting this error now.
var apiKey = '';
var q = document.getElementById('search').value;
var url = "http://api.nal.usda.gov/ndb/search/?format=json&q=" + q + "&sort=n" + "&max=25" + "&offset=0" + "&api_key=" + apiKey;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
function getData() {
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
var data = JSON.parse(this.responseText);
if (data && data.list && data.list.item) {
var html = "";
data.list.item.map(item => {
let string = "<p>Name: " + item.name + " Manu: " + item.manu + " Group: " + item.group + "<p>";
html += string;
})
}
document.querySelector("#usdaResults").innerHTML = html;
}
else {
console.log("Error", xhr.statusText);
}
}
xhr.send();
}
HTML:
<section class="usda">
<h1>USDA Nutrients Database</h1>
<form id="search">
<input type="text" placeholder="Search.." name="search">
<button type="button" onclick="getData();">Search</button>
</form>
<div id="usdaResults"></div>
</section>
So, it may be that there are errors with your XHR call - however we can catch and log those errors. You want to open your developer tools in your browser (usually right click > developer tools) to look at the JS logs.
I'm getting: VM131:20 GET http://api.nal.usda.gov/ndb/search/?format=json&q=eggs&sort=n&max=25&offset=0&api_key= 403 (Forbidden)
But that's because I have no API Key. If you do not, you'll need to get an API key from them.
I have grabbed some code from another SO post, here:
var apiKey = '';
var q = "eggs";
var url = "http://api.nal.usda.gov/ndb/search/?format=json&q=" + q + "&sort=n" + "&max=25" + "&offset=0" + "&api_key=" + apiKey;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function (oEvent) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText)
} else {
console.log("Error", xhr.statusText);
}
}
};
xhr.send();
Reference:
XMLHttpRequest (Ajax) Error
EDIT:
For the response, once you have parsed the JSON - you can get all the available name, group and manu of the data as so - I've output the details in tags, and this is untested - so maybe incorrect, but this is more for pseudo code.
var data = JSON.parse(this.responseText);
//Assuming data is valid!
if (data && data.list && data.list.item) {
var html = "";
data.list.item.map(item => {
let string = "<p>Name: " + item.name + " Manu: " + item.manu + " Group: " + item.group + "<p>";
html += string;
})
}
document.querySelector("#usdaResults").innerHTML = html;

Http Post image fails in browser/Ripple emulator

I am writing a small Cordova (PhoneGap) app. that is sending an image from a file input - using a post method. It works fine in my Android device, but fails in both broswer and Ripple emulator. Here is the code:
function queryImageByData(dataURL) {
var imgType = dataURL.substring(5, dataURL.indexOf(";"));
var imgExt = imgType.split("/")[1];
var imgData = atob(dataURL.substring(dataURL.indexOf(",") + 1));
var filenameTimestamp = (new Date().getTime());
var separator = "----------12345-multipart-boundary-" + filenameTimestamp;
var formData = "--" + separator + "\r\n" +
"Content-Disposition: file; name=\"file\"; filename=\"snapshot_" + filenameTimestamp + "." + imgExt + "\"\r\n" +
"Content-Type: " + imgType + "\r\nContent-Transfer-Encoding: base64" + "\r\n\r\n" + imgData + "\r\n--" + separator + "\r\n";
var xhr = new XMLHttpRequest();
xhr.sendAsBinary = function (data) {
var arrb = new ArrayBuffer(data.length);
var ui8a = new Uint8Array(arrb, 0);
for (var i = 0; i < data.length; i++) {
ui8a[i] = (data.charCodeAt(i) & 0xff);
}
var blob = new Blob([arrb]);
this.send(blob);
};
xhr.open("POST", "https:/my_endpoint_here", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
parseResult(xhr.responseText);
}
else {
onFailedResponse(xhr.responseText);
}
}
};
xhr.setRequestHeader("Content-type", "multipart/form-data; boundary=" + separator);
xhr.sendAsBinary(formData);
}
The error I get is:
Error: MultipartParser.end(): stream ended unexpectedly: state = HEADER_FIELD_START
at MultipartParser.end
EDIT:
I have a problem also with a get method. It fails on Ripple/Browser but runs OK on the device. here is some sample code:
var url = document.getElementById("urlInput").value;
var query = "my_url_here";
var jqxhr = $.ajax(query)
.done(function (data) {
alert("success" + data);
})
.fail(function (data) {
alert("error" + data);
})
Well I found the core issue, which cross domain calls.
The browsers do not allow it, and apperently so does Ripple emulator,
but mobile devices do allow it.
Now I just need to figure out how to make it work using CORS.

Class Cast: java.lang.String cannot be cast to org.mozilla.javascript.Scriptable

While invoking a http adapter procedure, it popsup a dialog with ProcedureName, Signature and Paramaters and when I hit Run button after entering two string type parameters, I am getting "Class Cast: java.lang.String cannot be cast to org.mozilla.javascript.Scriptable" error.
FYI, I created a worklight adapter using worklight application framework data object editor(automatically generates .xml and impl.js files)
impl.js file
function CurrencyConvertor_ConversionRate(params, headers){
var soapEnvNS;
soapEnvNS = 'http://schemas.xmlsoap.org/soap/envelope/';
var request = buildBody(params, 'xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:tm="http://microsoft.com/wsdl/mime/textMatching/" xmlns:s="http://www.w3.org/2001/XMLSchema" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/" xmlns:tns="http://www.webserviceX.NET/" xmlns:http="http://schemas.xmlsoap.org/wsdl/http/" xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/" xmlns:mime="http://schemas.xmlsoap.org/wsdl/mime/" xmlns:soap12="http://schemas.xmlsoap.org/wsdl/soap12/" ', soapEnvNS);
return invokeWebService(request, headers);
}
function buildBody(params, namespaces, soapEnvNS){
var body =
'<soap:Envelope xmlns:soap="' + soapEnvNS + '">\n' +
'<soap:Body>\n';
body = jsonToXml(params, body, namespaces);
body +=
'</soap:Body>\n' +
'</soap:Envelope>\n';
return body;
}
function getAttributes(jsonObj) {
var attrStr = '';
for(var attr in jsonObj) {
var val = jsonObj[attr];
if (attr.charAt(0) == '#') {
attrStr += ' ' + attr.substring(1);
attrStr += '="' + val + '"';
}
}
return attrStr;
}
function jsonToXml(jsonObj, xmlStr, namespaces) {
var toAppend = '';
for(var attr in jsonObj) {
var val = jsonObj[attr];
if (attr.charAt(0) != '#') {
toAppend += "<" + attr;
if (typeof val === 'object') {
toAppend += getAttributes(val);
if (namespaces != null)
toAppend += ' ' + namespaces;
toAppend += ">\n";
toAppend = jsonToXml(val, toAppend);
}
else {
toAppend += ">" + val;
}
toAppend += "</" + attr + ">\n";
}
}
return xmlStr += toAppend;
}
function invokeWebService(body, headers){
var input = {
method : 'post',
returnedContentType : 'xml',
path : '/CurrencyConvertor.asmx',
body: {
content : body.toString(),
contentType : 'text/xml; charset=utf-8'
}
};
//Adding custom HTTP headers if they were provided as parameter to the procedure call
headers && (input['headers'] = headers);
return WL.Server.invokeHttp(input);
}
The error indicates that there is an invalid JSON object somewhere in your code.
Most probably this error raised while converting the body to String using body.toString()
as toString will return [object Object] which is invalid JSON object value (neither valid String nor valid Array)
use json.stringify(body) instead, it should make what you intended to do.
besides, try to add some log lines to ease tracing the error

Turning a javascript applet into a javascript button

This title may not be 100% accurate with regards to my question, and I apologize beforehand if that's the case. Here's my problem, I found this cool applet that allows you to paste an image from your clipboard without the need for an upload. However, my site does not use explicitly written HTML, so I don't know how to insert this applet. For example, here is my code for an Upload button, the kind you would use normally to input an image:
getUploadControl: function(data) {
var uploadData = data.uploadData || {},
resultHandler = generateCallbackHandler({
success: data.onSuccess,
error: data.onError,
busyMethod: noop
}),
eventHandler = function(e) {
var jsonResponse = parseJSON(e.XMLHttpRequest.responseText);
resultHandler(jsonResponse);
};
return extend(true, {
type: "upload",
options: {
async: {
saveUrl: window.CaledonianAPIWebServiceRoot + "WriteFile.aspx"
},
multiple: false,
upload: function(e) {
var ud = copyNestedProperties({}, uploadData);
api.addAuthToData(ud);
e.data = ud;
},
success: eventHandler,
error: eventHandler
}
}, data);
},
I would like to make a similar button like this using the SUPA Applet. Here is a demo of the applet.
I have downloaded the source code for Supa.js, here it is, not very long.
function Supa() {
this.ping = function (supaApplet) {
try {
// IE will throw an exception if you try to access the method in a
// scalar context, i.e. if( supaApplet.pasteFromClipboard ) ...
return supaApplet.ping();
} catch (e) {
return false;
}
};
this.ajax_post = function (actionUrl, bytes, fieldname_filename, filename, params) {
// some constants for the request body
//FIXME: make sure boundaryString is not part of bytes or the form values
var boundaryString = 'AaB03x' + parseInt(Math.random() * 9999999, 10),
boundary = '--' + boundaryString,
cr = '\r\n',
body,
i,
isAsync,
xrequest;
// sanity checks
if (!fieldname_filename || fieldname_filename === "") {
throw "Developer Error: fieldname_filename not set or empty";
}
if (!filename || filename === "") {
throw "Filename required";
}
// build request body
body = '';
body += boundary + cr;
if (isArray(params)) {
for (i = 0; i < params.length; i += 1) {
body += "Content-disposition: form-data; name=\"" + escape(params[i].name) + "\";" + cr;
body += cr;
body += encodeURI(params[i].value) + cr;
body += boundary + cr;
}
}
// add the screenshot as a file
body += "Content-Disposition: form-data; name=\"" + escape(fieldname_filename) + "\"; filename=\"" + encodeURI(filename) + "\"" + cr;
body += "Content-Type: application/octet-stream" + cr;
body += "Content-Transfer-Encoding: base64" + cr;
body += cr;
body += bytes + cr;
// last boundary, no extra cr here!
body += boundary + "--" + cr;
// finally, the Ajax request
isAsync = false;
xrequest = new XMLHttpRequest();
xrequest.open("POST", actionUrl, isAsync);
// set request headers
xrequest.setRequestHeader("Content-Type", "multipart/form-data; charset=UTF-8; boundary=" + boundaryString);
xrequest.send(body);
return xrequest.responseText;
};
}
function supa() {
return new Supa();
}
My question is how do I make a similar widget to use this library for the pasting process? The paste() method can be found in the source HTML for the demo I referenced earlier, it's not in Supa.js, the main file. Plus, I'm not using HTML, so I might have to combine all that code into one? Anyway, any help is appreciated, to get me going on the right track.

Categories

Resources