Storing a HTTP POST request in a bookmark or something similar as you would with a GET request

You can store a bookmark with a GET request like this:

http://url.com/service?variable=value

Can you store a POST request in some way in Chrome? Maybe with a plugin? Or maybe in Firefox?

The idea is that I store this in a bookmark and fire it quickly instead of having to fill up a form every time.

Petruza

Posted 2012-05-18T20:51:03.027

Reputation: 3 043

– slhck – 2012-05-18T20:53:08.143

Depending on your OS, you might want to use curl to send the POST request from a file instead

– slhck – 2012-05-18T20:53:55.817

also: How to save a bookmark in Firefox with POST data

– Rich Homolka – 2012-05-19T18:34:08.813

Checkout the Greasemonkey extension, available for FF and Chrome. – ott-- – 2012-08-09T12:40:39.930

Answers

The idea is that I store this in a bookmark and fire it quickly instead of having to fill up a form every time.

For this purpose, the following HTML page will do. It should work in most browsers.

<html>
    <head>
        <title>getToPost</title>
        <script>
            function getToPost()
            {
                var form = document.getElementsByTagName('form')[0];
                form.style.visibility = 'hidden';
                form.action = document.location.hash.substr(1);
                var search = decodeURIComponent(document.location.search);
                search = search.substr(1).split('&');
                for(var i = 0, j = search.length, input; i < j; i++)
                {
                    input = document.createElement('input');
                    search[i] = search[i].split('=');
                    input.name = search[i][0];
                    input.value = search[i][1];
                    form.appendChild(input);
                }
                form.submit();
            }
        </script>
    </head>
    <body onload="getToPost()">
        <form method="POST"></form>
    </body>
</html>

Save it as C:\getToPost and you can bookmark the following URL:

file:///C:/getToPost?name1=value1&name2=value2#http://url.com/service

You'll be able to use most characters in names or values literally. Encode the following as usual:

#   ->   %23
%   ->   %25
&   ->   %26
=   ->   %3D

Dennis

Posted 2012-05-18T20:51:03.027

Reputation: 42 934

This has worked straightfwdly for one site, thx! However, for another site using AJAX (I think) it doesn't yet work (I might be doing sth wrong); is there sth which would change if the get/post-thing is handled by AJAX ? – nutty about natty – 2013-05-17T07:44:48.433

If looking for a cross browser solution that does not need to rely on add-ons or external files, Javascript can be placed in a bookmark directly to achieve this, using this syntax:

javascript:(function(){ <Your Javascript code goes here> })();

Borrowing some code from Denis' answer to illustrate:

javascript:(function()
{ 
var form = document.getElementsByTagName('form')[0];
form.style.visibility = 'hidden';
form.method = 'post';
form.action = 'https://your.urlgoes.here/build?delay=0sec';
var search = 'name=ENVIRONMENT&value=production&name=DEPLOYTYPE&value=Incremental&name=BRANCH&value=master&statusCode=303&redirectTo=.&json={"parameter": [{"name": "ENVIRONMENT", "value": "production"}, {"name": "DEPLOYTYPE", "value": "Incremental"}, {"name": "BRANCH", "value": "master"}], "statusCode": "303", "redirectTo": "."}&Submit=Build';
search = search.substr(1).split('&');
for(var i = 0, j = search.length, input; i < j; i++)
{
input = document.createElement('input');
search[i] = search[i].split('=');
input.name = search[i][0];
input.value = search[i][1];
form.appendChild(input);
}
 form.submit();}
)();

The downside is all of this has to go on a single line, because a bookmark is single line, so it can get a bit mind bending to work with. This goes in the bookmark itself:

javascript:(function(){    var form = document.getElementsByTagName('form')[0];   form.style.visibility = 'hidden';   form.method = 'post';   form.action = 'https://your.urlgoes.here/build?delay=0sec';   var search = 'name=ENVIRONMENT&value=production&name=DEPLOYTYPE&value=Incremental&name=BRANCH&value=master&statusCode=303&redirectTo=.&json={"parameter": [{"name": "ENVIRONMENT", "value": "production"}, {"name": "DEPLOYTYPE", "value": "Incremental"}, {"name": "BRANCH", "value": "master"}], "statusCode": "303", "redirectTo": "."}&Submit=Build';   search = search.substr(1).split('&');   for(var i = 0, j = search.length, input; i < j; i++)   {   input = document.createElement('input');   search[i] = search[i].split('=');   input.name = search[i][0];   input.value = search[i][1];   form.appendChild(input);   }    form.submit();   })();

A number of spaces can be used to easily convert to something more readable and back to the single line. In the example above " " can be replaced with \r\n in something like Notepad++ to convert it back to multi line. Then to convert it back to single line a find and replace for \r\n replacing with " " converts it back to single line. That makes it slightly less mind bending...

jotap

Posted 2012-05-18T20:51:03.027

Reputation: 291

A shorter version of the javascript bookmarklet approach using modern browser features and ES6:

post('https://example.com', {foo: 'bar'})

function post(url, formData) {
  const makeElem = (tag, props) => Object.assign(document.createElement(tag), props)
  const form = makeElem('form', { action: url, method: 'post', style: 'display: none' })
  for (const [name, value] of Object.entries(formData)) {
    form.appendChild(makeElem('input', { name, value }))
  }
  document.body.appendChild(form)
  form.submit()
}

Set the following as the bookmark target and replace URL and formData appropriately.

javascript:post('https://example.com',{foo:'bar'});function post(a,b){const c=(e,f)=>Object.assign(document.createElement(e),f),d=c('form',{action:a,method:'post',style:'display: none'});for(const[e,f]of Object.entries(b))d.appendChild(c('input',{name:e,value:f}));document.body.appendChild(d),d.submit()}

raphinesse

Posted 2012-05-18T20:51:03.027

Reputation: 141

Building on the other answers!

The debug version of the code, plus cleanup AND jsbeautifier.org/.

(function() {
    var ThisAction = 'https://your.urlgoes.here/build?delay=0sec';
    /* A little JSON never hurt anyone */
    var ThisPost = {
        name: 'ENVIRONMENT',
        value: 'production',
        name: 'DEPLOYTYPE',
        value: 'Incremental',
        name: 'BRANCH',
        value: 'master',
        statusCode: '303',
        redirectTo: '.',
        json: '{"parameter": [{"name": "ENVIRONMENT", "value": "production"}, {"name": "DEPLOYTYPE", "value": "Incremental"}, {"name": "BRANCH", "value": "master"}], "statusCode": "303", "redirectTo": "."}',
        Submit: 'Build'
    };

    /* Help us locate this function */
    console.trace();
    /* See what we are looking at */
    console.log(document);
    var form = document.getElementsByTagName('form')[0];
    form.style.visibility = 'hidden';
    form.method = 'post';
    form.action = ThisAction;
    for (var key in ThisPost) {
        if (ThisPost.hasOwnProperty(key)) {
            input = document.createElement('input');
            input.name = key;
            input.value = ThisPost[key];
            form.appendChild(input);
        }
    }
    /* form.submit(); */
})();

Obviously without the corresponding html, element with tag name 'form' may well not exist... and things are worse if it does. The above demonstrates this well. Note that in chromium javascript: URIs/Bookmarks don't work in a new tab, you must navigate once first. This populates the document object, but even just an javascript:alert('t'); does nothing.

I suggest the following.

(function() {
    var ThisAction = 'https://your.urlgoes.here/build?optional=uri_get';
    /* A little JSON never hurt anyone */
    var ThisPost = {
        multiple: 'value',
        key: 'pairs',
        or: 'JSON like so...',
        note: 'the double quotes and last item with NO trailing comma.',
        json: '{parameter: [{name: "stuff"}]}'
    };

    var form = document.createElement('form');
    form.style.visibility = 'hidden';
    form.method = 'post';
    form.action = ThisAction;
    for (var key in ThisPost) {
        if (ThisPost.hasOwnProperty(key)) {
            var input = document.createElement('input');
            input.name = key;
            input.value = ThisPost[key];
            form.appendChild(input);
        }
    }
    document.body.appendChild(form);
    form.submit();
})();

Remove debug settings, clean up example input for better clarity of what is expected. Run through http://jscompress.com/ or whatever and get a single line.

!function(){var e="https://your.urlgoes.here/build?optional=uri_get",t={multiple:"value",key:"pairs",or:"JSON like so...",note:"the double quotes and last item with NO trailing comma.",json:'{parameter: [{name: "stuff"}]}'},i=document.createElement("form");i.style.visibility="hidden",i.method="post",i.action=e;for(var o in t)if(t.hasOwnProperty(o)){var a=document.createElement("input");a.name=o,a.value=t[o],i.appendChild(a)}document.body.appendChild(i),i.submit()}();

Edit: Provide a working example.

In Minneapolis, MN, USA use this to access the Free WiFi ESSID "USIW Free WiFi". After using https://login.usiwireless.com/mplsfree/logon.php?originalurl=www.google.com/ to register an account, they want a credit card for abuse reasons.

Use this to log into the network, with the obvious replacements.

javascript:!function(){var e="https://login.usiwireless.com/mplsfree/logon.pl",o={usernameLogin:"USER",passwordLogin:"PASSWORD",originalurl:"www.google.com/"},n=document.createElement("form");n.style.visibility="hidden",n.method="post",n.action=e;for(var i in o)if(o.hasOwnProperty(i)){var t=document.createElement("input");t.name=i,t.value=o[i],n.appendChild(t)}document.body.appendChild(n),n.submit()}();

Mike Mestnik

Posted 2012-05-18T20:51:03.027

Reputation: 31

I know this is an old question with an accepted answer. That answer is quite manual though, requiring javascript programming effort for the user. There are other browser addons/extensions/plugins listed but they don't work with the latest browser version or are still quite manual. I wrote a bookmarklet that generates a bookmarklet (which includes modified code from @raphinesse's answer). My bookmarklet is here: https://github.com/GlenCoakley/createFormSubmittingBookmarklets.

Glen

Posted 2012-05-18T20:51:03.027

Reputation: 1

When I faced the same problem, I found this beautiful add-on for Firefox: Bookmark POST

With that bookmark its four easy steps to your bookmarked POST request (no javascript required):

Open the page with the form you want to bookmark and fill in the form in a "typical" way. Do NOT submit yet.
Open the Web-Developer Tools -> Network Analysis.
Submit your form. The submit will show up in the network analyis. There you can select "Edit and send again" and copy the "Request-Body".
Create a Bookmark to the form page and add the string POSTDATA={YOUR_REQUEST_BODY_HERE} as the bookmarks description.

SebastianH

Posted 2012-05-18T20:51:03.027

Reputation: 141