How to set a Header field on POST a form?

Question

How can I set a custom field in POST header on submit a form?

Using `XmlHttpRequest` you mean? Or just a plain HTML FORM post? — Aliostad, Mar 01 '12 at 13:16
possible duplicate of [Custom HTTP Request headers in HTML](http://stackoverflow.com/questions/3047711/custom-http-request-headers-in-html) — James Drinkard, Dec 05 '13 at 20:15

Aliostad · Accepted Answer · 2012-03-01T13:29:30.910

78

It cannot be done - AFAIK.

However you may use for example jquery (although you can do it with plain javascript) to serialize the form and send (using AJAX) while adding your custom header.

Look at the jquery serialize which changes an HTML FORM into form-url-encoded values ready for POST.

UPDATE

My suggestion is to include either

a hidden form element
a query string parameter

edited Mar 01 '12 at 13:29

answered Mar 01 '12 at 13:20

Aliostad

80,612
21
160
208

3

I can't use ajax in this case. Somehow, I'm Post and Redirect to a aspx page. Redirection is happen by From Post. – Reza Owliaei Mar 01 '12 at 13:25
2

My suggestion is to include either 1) a hidden form element 2) a query string parameter – Aliostad Mar 01 '12 at 13:28
1

Can you serialize files? I thought: No. – Fallenreaper Nov 01 '13 at 18:56
Yes you can serialize files into Base64 strings, perhaps very clumsy for huge files since Base64 can be quite bulky. But so is every serialization method. – Felype Jul 31 '15 at 17:13
I'd just add it as a query string param & have your server check to see if a header or query string exists and has the token. – James111 Oct 24 '16 at 01:29
I can't understand how this UPDATE relates to the thing you previously said. Can you show an example? – Daniel Kaplan Jul 16 '21 at 19:01

score 15 · Answer 2 · answered Aug 20 '13 at 20:16

15

Set a cookie value on the page, and then read it back server side.

You won't be able to set a specific header, but the value will be accessible in the headers section and not the content body.

answered Aug 20 '13 at 20:16

Chris Hynes

9,999
2
44
54

12

Note: If the header you want to add is for CSRF protection, make sure you do *not* store that token in a cookie, or you'll defeat the CSRF protection. – Jimothy Jul 09 '19 at 14:33

score 6 · Answer 3 · edited Feb 19 '19 at 14:23

6

From FormData documention:

XMLHttpRequest Level 2 adds support for the new FormData interface. FormData objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest send() method.

With an XMLHttpRequest you can set the custom headers and then do the POST.

edited Feb 19 '19 at 14:23

yivi

42,438
18
116
138

answered Oct 01 '15 at 15:29

Majid

2,845
3
15
14

score 2 · Answer 4 · edited Aug 26 '19 at 12:09

In fact a better way to do it to save a cookie on the client side. Then the cookie is automatically sent with every page header for that particular domain.

In node-js, you can set up and use cookies with cookie-parser.

an example:

res.cookie('token', "xyz....", { httpOnly: true });

Now you can access this :

app.get('/',function(req, res){
 var token = req.cookies.token
});

Note that httpOnly:true ensures that the cookie is usually not accessible manually or through javascript and only browser can access it. If you want to send some headers or security tokens with a form post, and not through ajax, in most situation this can be considered a secure way. Although make sure that the data is sent over secure protocol /ssl if you are storing some sensitive user related info which is usually the case.

score 1 · Answer 5 · answered Mar 23 '17 at 15:15

Here is what I did in pub/jade

extends layout
block content
    script(src="/jquery/dist/jquery.js")
    script.
      function doThePost() {
        var jqXHR = $.ajax({ 
            type:'post'
            , url:<blabla>
            , headers: { 
                'x-custom1': 'blabla'
                , 'x-custom2': 'blabla'
                , 'content-type': 'application/json'
            }
            , data: {
                'id': 123456, blabla
            }
        })
        .done(function(data, status, req) { console.log("done", data, status, req); })
        .fail(function(req, status, err) { console.log("fail", req, status, err); });
      }
    h1= title
    button(onclick='doThePost()') Click

score 0 · Answer 6 · edited Mar 18 '14 at 13:51

0

You could use $.ajax to avoid the natural behaviour of <form method="POST">. You could, for example, add an event to the submission button and treat the POST request as AJAX.

edited Mar 18 '14 at 13:51

StackExchange What The Heck

2,656
7
39
51

answered Mar 01 '12 at 13:28

Fabio Buda

769
2
7
16

2

I use this form submit to *redirect* to an aspx page and post some data. – Reza Owliaei Mar 01 '12 at 13:44
make me understand better: 1) user posts 2) saving data 3) redirect. Is it what you do? – Fabio Buda Mar 01 '12 at 15:13
I've an iFrame in an Html page(Source), pointing to another html page(Proxy). Proxy page post some parameter (No Get) via a form element. Redirection and post happens on form submit. I retrieve posted parameters in aspx page as destination. – Reza Owliaei Mar 01 '12 at 16:15

score -3 · Answer 7 · answered Nov 21 '19 at 00:57

To add into every ajax request, I have answered it here: https://stackoverflow.com/a/58964440/1909708

To add into particular ajax requests, this' how I implemented:

var token_value = $("meta[name='_csrf']").attr("content");
var token_header = $("meta[name='_csrf_header']").attr("content");
$.ajax("some-endpoint.do", {
 method: "POST",
 beforeSend: function(xhr) {
  xhr.setRequestHeader(token_header, token_value);
 },
 data: {form_field: $("#form_field").val()},
 success: doSomethingFunction,
 dataType: "json"
});

You must add the meta elements in the JSP, e.g.

<html>
<head>        
    <!-- default header name is X-CSRF-TOKEN -->
    <meta name="_csrf_header" content="${_csrf.headerName}"/>
    <meta name="_csrf" content="${_csrf.token}"/>

To add to a form submission (synchronous) request, I have answered it here: https://stackoverflow.com/a/58965526/1909708

score -3 · Answer 8 · answered Aug 21 '20 at 16:07

-3

If you are using JQuery with Form plugin, you can use:

$('#myForm').ajaxSubmit({
    headers: {
        "foo": "bar"
    }
});

Source: https://stackoverflow.com/a/31955515/9469069

answered Aug 21 '20 at 16:07

sm7

53
8

How to set a Header field on POST a form?

8 Answers8

UPDATE

Linked

Related