We Keep Coding

Send a post request with an Electron webview

I want to send a POST request with an Electron webview from the outer script. At the moment I just set the src attribute to trigger a page load, which sends a GET request:
<webview id="view">
<script>
document.getElementById('view').setAttribute('src', 'http://example.com/?foo=bar');
</script>
Is there any way to navigate the webview to a URL by sending a POST request? Maybe a method of the webview, instead of just hacking with the src?

You can execute arbitrary code from within the webview context with .executeJavaScript.
Moreover your code has access to all browser built-in apis. Easiest would be to use fetch, with method set to post.
In your case (provided the webview has been already loaded; for example its .src has been set):
document.getElementById('view')
.executeJavaScript('fetch("http://example.com/?foo=bar", {method: "post"});');
Some remarks:
The origin of the request is controlled by .src of the webview.
It seems that all default security policy are still used by webview - specifically you cannot make calls to http: from https:.
It is bit painful to pass code as a string.

Now there is a new <webview>.loadURL() method with a postData option in the docs. I haven't used it yet but it looks exactly like what I was looking for in the past.
It seems they added it as a feature in the meantime.

Basically, Webview element does not have a property like "method" of Form so you can not specify a particular HTTP method for its request. I recommend you to use AngularJS or any other JS frameworks to archive your purpose.

I found two workaround since <webview> does not seem to currently have any way to send a POST request.
Maybe the site you're using will let you send the form as a GET by adding any form elements to the URL's query string. It turns out the site I was using did allow this and I wouldn't've guessed had I not actually tried.
You might be able to send a POST manually through AJAX/fetch etc then replace the HTML of the page in the webview with the HTML returned by your manual POST. You can achieve this using .executeJavaScript() and/or Electron's IPC.
Neither workaround will work in every case. It might be worth filing a feature request with the Electron team too...
So I just went ahead and submitted a feature request. You can follow it here: https://discuss.atom.io/t/add-http-post-method-to-webview/29702

Can I respond with javascript instead of HTML by link?

I have lot of HTML pages containing links to same URL address like this:
Link
The question is: Can I return a javascript response instead of plain HTML that can be executed by clicking on a link?
For example, I tried this in page.php:
header("Location: javascript:alert(1)", true, 302);
but it doesn't work. If I send the HTML page containing the required javascript, then the browser opens a new page or replaces the current page with this blank page containing the JS.
Is there any other method to do this without changing link's href? It seems like it can't because of security restrictions.

No, you cannot invoke JavaScript from the server-side. You can, however, have JavaScript loaded that makes calls to the server and retrieves data.
With that in mind you can have a call to retrieve JSON or XML from the server in which a payload resides that can be extracted by a JavaScript function that is already defined on the client-side.
// note: in this example I use jQuery because their AJAX API is terrific
$.ajax({
url: "http://example.com/page.php?params=1"
})
.done(function( data ) {
// data is our payload
doSomethingWithPayload(data);
});
That way doSomethingWithPayload already is defined on the client, and is called whenever the payload is received.

Providing JS or iframe like analytics and statcounter to other webpage to run remotely my PHP + JS script

How to not copy my source code to other servers and provide them with a JS or iframe like the analytics and statcounter provide us?
I wrote a PHP script with JS that in it's basic description goes like this:
When someone visits my website, gets a cookie with a value of a unique identification and at the same time using AJAX I make some checks and I save that same value to mysql accordingly. After this, if he visits again my site, (in most of the cases) a cookie is not created again.
In depth:
The cookie value is created with JS and I want to keep it that way for future enhancements.
My code (index.php, add-to-mysql.php) has JS and PHP.
I want to use this script in my additional domains, and some of them are in different server. But I don't want to put all my source files to there accounts.
The ideal for me is to provide them with a JS code, like the google analytics or statcounter give us (or alternative similar ways), an iframe... solutions like these.
When a visitor gets into their page, my mySQL in a remote server (my server) will be updated and a cookie will created on their site. Transferring data from and to.
Is this something possible to be made? If yes, how can I start studying for this? Can you provide me with some guidelines?
Thank you.
this is a block of code, the ajax function that posts the random number to the add-to-mysql.php file where i make some actions
$.ajax({
type: 'POST',
url: 'add-to-mysql.php',
data: { one: hash }, //an antikatastiso to hash me to a ke kano to md5 meso php sto ajax vgenei to idio
success: function(data) {
alert("success! X: " + data);
}
});

It seems to me you have three options here.
1. Use JSONP
JSONP allows you to do cross domain ajax calls so that you can just call in to your home server from your other domains without being obstructed.
This is probably the easiest route to go I'm thinking.
See here for a quick write up on how JSONP works:
https://stackoverflow.com/a/2067584/867294
jQuery supports jsonp so it's not to difficult to get started with:
http://learn.jquery.com/ajax/working-with-jsonp/
JSONP works by dynamically adding a script to the document that then calls a callback.
The contents of ths javascript file need to be generated by the server, your PHP file add-to-mysql.php will have to echo out something like this:
<?= htmlspecialchars($_GET["callback"]) =>('someData you want to return');
You can access the one: parameter that was passed in from jQuery trough the $_GET array as well, as this is just a GET request.
From the client side you can call this route like so:
Note that this will always be a GET request, all parameters will go trough the URL.
The 'callback' parameter is the connecting factor here, it makes sure the PHP side knows what JavaScript function to generate.
$.ajax({
jsonp: 'callback',
dataType: "jsonp",
url: 'http://my-server.com/add-to-mysql.php',
data: { one: hash }, //an antikatastiso to hash me to a ke kano to md5 meso php sto ajax vgenei to idio
success: function(data) {
alert("success! X: " + data);
}
});
2. Use CORS
CORS will allow you to make ajax calls to a different domain then the one where your JS is running. This does however require you to send special http headers from the serving html page, so this does require you to modify the servers.
See here for a qucik intro on CORS:
http://www.html5rocks.com/en/tutorials/cors/
In short, the headers you will need to set from the serving html page are:
Access-Control-Allow-Origin: http://domain.com
Access-Control-Expose-Headers: list,of,headers
3. Posting to an iFrame
Posting trough a hidden iFrame is also an option.
For this you need to set the target of a form to the name of the iframe, the advantages here is that you can use POST as well. You can submit and populate the form trough jQuery as well.
$('#one_input').val('someHash');
$('#myForm').submit();
You can just put everything in a hidden div if you don't want to show it on the page:
<div style='display:none;'>
<form id="myForm" action="http://my-server.com/add-to-mysql.php" method="post" target="my_iframe">
<input type="input" id="one_input" value="" />
</form>
<iframe name="my_iframe" ></iframe>
</div>
You could also just set the url of the iframe with your parameter if you don't need any feedback.
var hash = 'stuff';
document.getElementId('one_input').src="http://my-server.com/add-to-mysql.php?one=" + hash;
Extra
you could also use the iframe with Window.postMessage
Building on the previous example:
$('#my_iframe')[0].contentWindow.postMessage('hash', 'my-server.com');
But this requires you to have already a page loaded in your iframe that will then receive the message trough JavaScript, so I don't think this is what you are looking for.

Google Analytics provide an script that doesn't post data, it loads an script asynchronously (this is very important to avoid messing with load times of the original website), then it sends all of their info requesting for a .gif image. Your code should do a request to an url ending in .gif, with all the data in GET form. Do your magic and return a gif with size 1px*1px and no content.
Just request something like this
yourdomain.com/a.gif?cookie=1234aqfajsdlq....&uid=qekjlajdfa
Put all your data in there
I recommend obfuscating it a bit, but that should help you avoid cors, iframes or jsop
EDIT
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'id', 'domain');
ga('send', 'pageview');
</script>
This was taken from GA. See that it creates a tag, with the async attribute to avoid load time issues (remember sync scripts stop the page rendering). Then it creates and array where it pushes all the info it needs in tuples. It defines ga in the window as a function that pushes all its arguments to a q.
The you can create an script that takes all of the data you need, with js, cookies, domain, etc. and send to the server.
For example, you want the domain that the user is visiting:
//You won't have jquery, but you get the idea
//Create a tag
var i = $('<img>').prop('src', 'yourdomain.com/a.gif?domain' + window.location.origin).css('display', 'none');
$('body').append(i);
In some point you will have to set a cookie. I thing cookies can't not be cross domain, so you should set them in your requests not in js.
On the server side you check the cookie, if there is none, you created, and there you can track many things.
Afterwards, your script can check for cors support, and use ajax without this. I don't recommend JSONP, is very error prone, and is actually kind of a hack

In order to avoid the cross-domain problematic you can include an iframe at the other sites, that loads from your site. It creates its own scope (domain) and you can freely use ajax from inside communicating with your site.
However, if you set cookies there, it will be associated to the iframes source domain (your domain). This might or might not be a problem. Note, that this can be used to identify users across all the other domains including this same iframe (from your domain).

Retrieving response from remote server after uploading a file in iframe

I have a form that uploads a file in an firame to a remote server. As a result at the submission url server returns json data with the result of operation, which my iframe catches.
{'result': 'true' or 'false'}
Now I'd like to retrieve this json as the callback of my iframe. I know that I need jsonp to achieve this since it's a cross-site call. Here's my function with sample code from IBM' site :
function fileUploadFunction(){
var fileUploadForm = $('#file_upload_form');
fileUploadForm.attr('action', uploadURL);
fileUploadForm.submit();
$('#upload_target').load(function () {
alert("IFrame loaded");
$.getJSON(uploadUrl+"&callback=?", function(data) {
alert("Symbol: " + data.symbol + ", Price: " + data.price);
});
});
};
But here few problems arise. First - my uploadUrl is just "http://something/" . Do I need it to support calls with $callback= suffix ?
Secondly - server gives response only as a result to file upload. So I need to get the result that is stored in my iframe and not at the specified url. How to solve this ?
Here's the link. Notice hidden iframe inside the form. Result from server shows there. :
http://ntt.vipserv.org/artifact/
EDIT
I've previously tried :
$('#upload_target').load(function () {
var ret = frames['upload_target'].document.getElementsByTagName("body")[0].innerHTML;
var data = eval("("+ret+")");
});
But it raises 'permissions denied' error.

This is easily done with easyXDM and there is actually a blog post about this exact use case here.
In essence what it does is use cross-domain messaging to relay the response to the invoking document.
Update: Here is a link for this in action, the source can be found at github, the files are prefixed 'upload_'.

Sean's easyXDM recommendation is a great option (& should probably be marked as correct), but I wanted to suggest another light-weight solution that I haven't seen anyone use.
In cases where you're posting to a hidden iframe on another domain & just need a single response back (not two-way communcation), you could pass a message from the iframe to the parent using a busted url. Here's an example:
the parent loads an iframe on different domain
the parent polls myframe.contentWindow.location.href (constantly getting Permission denied errors since the frame is on another domain)
iframe processes, then redirects to
http://parentdomain.com/pagethatdoesnotexist?{'result':'ok'}
iframe gets a 404 but now the location is available to the parent
the parent reads the message from the iframe's URL

one possible solution could be to set the name of the iframe with pure js. This name could be read from the wrapping parent page.

Looks to me that your code will request uploadURL twice: first, .submit() do a POST request to upload the file and the result is shown in the iframe as a webpage; second, .getJSON() do a GET request and the result is executed as javascript in <script>. You will realize this if you open up Firebug while testing your app.
Since two of the requests are independent, I have no idea how .getJSON() will give you any information about the file you just uploaded with .submit().
For these kind of cross-domain communication, I would suggest using postMessage; otherwise you will need to change you application workflow to do everything in the iframe after file have uploaded; e.g. do <script>alert('Submission accepted');</script> in the iframe.
What are you trying to do after a user have successfully upload a file?

dont use .html() at all.
I used
jQuery('.someElement')
and it worked for me. you can save the result in a variable and insert it in new element
e.g
var = jQuery('.someElement');
jQuery('.newElement').html(var);

Get jQuery post redirect response

I've written some HTML/Javascript that sits on a third-party server for security reasons. This page performs a javascript post to another page on the same site. However, instead of responding with useful data, it instead wants to perform a redirect (if you would post via a normal HTML form to this page, it would redirect your browser). How can I process this process? I basically want to be able to extract the url's query parameters that it is trying to redirect with (and then put this link into a hidden form field).
Here is my basic ajax post...
$.ajax({
url: '/someurl/idontcontrol',
data: serialized_form_data,
async: false,
type: 'POST',
success: function(data, textStatus, x) {
alert(x);
alert(x.getAllResponseHeaders());
return false;
$('#redirect_link').val(WHAT_DO_I_PUT_HERE);
}
});
Note that the URL I am posting to is not one that I control, so I have no power over what it returns.
UPDATE: When I use the above alerts, I receive "[object XMLHttpRequest]" and "null". I'm monitoring the headers with a Firefox plugin and they seem be coming back as expected, but I can't seem to access them via javascript (I've also tried x.getResponseHeader('Location'), but that and all other calls to getResponseHeader return empty).
ALSO: I don't know if it matters, but the status code is 302 (as opposed to 301 or 303).
Thanks!

According to the jQuery Documentation the success method can take a third argument which is the XMLHttpRequest object.
According to Mozilla's XMLHttpRequest page, this object should have a "status" property. If you check the value of this property, and it is a redirect code, such as 301 (permanent redirect) or 303 (temporary redirect) it is known the processing page is trying to perform a redirect. The "statusText" property should be able to be used to determine the location it is trying to redirect you to.
If you know it is trying to redirect, you can then re-post the data through Ajax to the new URL.
The strange thing is though, when researching this, stumbled across this page that indicates the XMLHttpRequest object should follow redirects (see the comments). So it seems like this would be a non-issue.
Unless the processing page is using an HTML meta redirect (like below) to do the redirection. In that case, I'm not sure what could be done - maybe try to parse the returned HTML for meta tags and see if any of them are attempting a redirect.
<meta http-equiv="refresh" content="0;url=http://www.example.com/some-redirected-page">

You can't get the full HTTP headers from an AJAX call in JQUery, so you can't process the redirect in this way.
However with a raw javascript request you do have access to the XMLHttpRequest getAllResponseHeaders() method which will allow you to process the redirect (this function for single headers).

Sorry, not directly an answer to your question, but I'm sure it's possible with jQuery too as it's quite simple with Prototype.
// Warning: this is Prototype, not jQuery ;-)
//...
onComplete: function(response) {
var refresh = response.getResponseHeader("Refresh");
var whatever = response.getResponseHeader("Whatever");
}
//...