Window.Open with Headers

window.open with headers

Can I control the HTTP headers sent by window.open (cross browser)?

No

If not, can I somehow window.open a page that then issues my request with custom headers inside its popped-up window?

• You can request a URL that triggers a server side program which makes the request with arbitrary headers and then returns the response
• You can run JavaScript (probably saying goodbye to Progressive Enhancement) that uses XHR to make the request with arbitrary headers (assuming the URL fits within the Same Origin Policy) and then process the result in JS.

I need some cunning hacks...

It might help if you described the problem instead of asking if possible solutions would work.

How to add request headers as array to window.open post url in javascript?

You cannot use window.open to do POST request to the backend service, what you could do would be use fetch function

fetch(url, {
  method: "POST",
  body: JSON.stringify({"reporttype" : [1,2,3,4,5]}),
  headers: {"Content-Type": "application/json"}
    .then(response => response.json())
    .then(data => console.log(data));

You could also try using XMLHttpRequest

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    console.log(xhr.response);
  }
}

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify({"reporttype" : [1,2,3,4,5]}));

$window.open with context / headers

Download the file first, then open it:

var url = this.apiBaseUrl + "/exportToExcel/" + id;
var headers = {
   //Put headers here
};
var config = { 
   responseType: 'blob',
   headers: headers
};
$http.get(url, config).then(function (response) {
    var blob = response.data;
    var u = URL.createObjectURL(blob);
    window.open(u,"_blank");
});

This will GET the file as a blob, convert it to a object URL, then open it in a new window.

how to add authentication header to $window.open

I think you can add this authentication parameters in URL and do a GET in your server side

//Add authentication headers as params
var params = {
    access_token: 'An access_token',
    other_header: 'other_header'
};

//Add authentication headers in URL
var url = [url_generating_pdf, $.param(params)].join('?');

//Open window
window.open(url);

window.open with headers

Can I control the HTTP headers sent by window.open (cross browser)?

No

If not, can I somehow window.open a page that then issues my request with custom headers inside its popped-up window?

• You can request a URL that triggers a server side program which makes the request with arbitrary headers and then returns the response
• You can run JavaScript (probably saying goodbye to Progressive Enhancement) that uses XHR to make the request with arbitrary headers (assuming the URL fits within the Same Origin Policy) and then process the result in JS.

I need some cunning hacks...

It might help if you described the problem instead of asking if possible solutions would work.

---

Related Topics