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.
Answer from Quentin on Stack Overflow Top answer 1 of 7
58
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.
2 of 7
34
Sadly you can't control headers when doing window.open()
Nice and easy, how I managed to open a file with custom headers:
const viewFile = async (url) => {
// Change this to use your HTTP client
fetch(url, {/*YOUR CUSTOM HEADER*/} ) // FETCH BLOB FROM IT
.then((response) => response.blob())
.then((blob) => { // RETRIEVE THE BLOB AND CREATE LOCAL URL
var _url = window.URL.createObjectURL(blob);
window.open(_url, "_blank").focus(); // window.open + focus
}).catch((err) => {
console.log(err);
});
};
- Download file to cache
- window.open to cache
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › API › Window › open
Window: open() method - Web APIs | MDN
These features include options such as the window's default size and position, whether or not to open a minimal popup window, and so forth. The following options are supported: ... Indicates that you want the browser to send an Attribution-Reporting-Eligible header along with the open() call.
Add support to the window.open function for the Accept header.
Problem: Currently the window.open() function does not support passing in the Accept header. Sample use case: If i would like to make a GET request in a new browser window and ask the server via th... More on github.com
9
February 12, 2022How to open a link in new window with a header? - CSS-Tricks
I have some links and I want when I click on them , open up in a new window with a header bar containing some text or images like some template centers which show their templates’ demos and you can change template through a header and it’s always static. More on css-tricks.com
angularjs - how to add authentication header to $window.open - Stack Overflow
I have angularjs application where users enter data that is saved to database, then on server side it is compiled into pdf file. All access requires appropriate authentication headers in place. After More on stackoverflow.com
angularjs - is that possible to send header information in $window.open(url) method - Stack Overflow
Yes - Its is possible but not straight way, If you've got server-side control then you can set header value in query string and get it parsed from query string on the back-end. ... I don't suggest to pass params with window.open. More on stackoverflow.com
Videos
Medium
medium.com › @mkushwah222 › javascript-pass-headers-in-window-open-c1e841640049
JavaScript: Pass headers in window.open() - Mohit Kushwah - Medium
November 18, 2022 - export const viewFile = async (url, headers) => { fetch(url, { method: ‘GET’, headers }) .then((res) => res.blob()) .then((blob) => { var _url = window.URL.createObjectURL(blob); window.open(_url, “_blank”).focus(); }) };
GitHub
github.com › whatwg › html › issues › 7810
Add support to the window.open function for the Accept header. · Issue #7810 · whatwg/html
February 12, 2022 - Problem: Currently the window.open() function does not support passing in the Accept header. Sample use case: If i would like to make a GET request in a new browser window and ask the server via th...
Author reallybaldrick
CSS-Tricks
css-tricks.com › forums › topic › how-to-open-a-link-in-new-window-with-a-header
How to open a link in new window with a header? - CSS-Tricks
April 2, 2013 - I have some links and I want when I click on them , open up in a new window with a header bar containing some text or images like some template centers which show their templates’ demos and you can change template through a header and it’s always static.
Top answer 1 of 3
23
I think I should update this old question with a correct and secure answer.
You can not add any headers in the HTTP GET request performed by window.open.
The secure way to make an authenticated request is to set the authentication token into a request header, and avoid exposing it into the URL, as my previous answer suggested (I have learned a some things since then).
To download a PDF (or any other binary data) from an authenticated server with AngularJS you should:
- Make an HTTP GET request to the resource sending the authentication token in a header, setting its responseType to a binary data type, for example blob or arraybuffer.
- Download the binary data in a file using the "Save As" dialog from the browser, usually creating a download link for the binary data and clicking it.
I hope this answer to clear doubts on this question and provides a secure way to download a resource from an authenticated REST API.
2 of 3
4
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);
Top answer 1 of 8
1
Chris, · Thank you for the writeup and explanations. Have you considered these solutions · instead of disallowing all headers, let the 'simple' headers through. This is the solution taken by Chrome/pepperflash with regard to navigateToURL cross domain issues. Please refer to W3C cross-origin sharing recommendation: http://www.w3.org/TR/cors/#simple-header · leverage crossdomain.xml/allow-http-request-headers so that full header are allowed for certain sites - in a controlled manner
2 of 8
0
I also would also like to recommend teams test against our public betas that we make available through labs.adobe.com. These are typically updated once a week and can be found here: · Adobe Flash Player Beta · Adobe AIR Beta
Top answer 1 of 3
3
No - It is not possible to send headers in straight way using $window.open
Yes - Its is possible but not straight way, If you've got server-side control then you can set header value in query string and get it parsed from query string on the back-end.
2 of 3
2
I don't suggest to pass params with window.open.
BUT you can use window.open like this.
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);
Please check the details info here
freeCodeCamp
forum.freecodecamp.org › t › window-open-vs-get › 169384
Window.open() vs $.get()
August 4, 2017 - Hi, I am running a few tests for my Quote Machine Challenge App. Besides Twitter, I’d linke to share the quotes as well to Hubzilla. Running window.open(hubzillaQueryLink) will open a new window and post fine according to the queryString. Now I thought I might want to get the JSON that’s put in the newly opened window and extract the Hubzilla Site where the quote is actually posted, so you don’t see a JSON but the actual network you are posting to.
OutSystems
outsystems.com › forums › discussion › 64399 › mobile-development-add-request-header-when-open-web-view
Mobile Development: Add Request Header when open Web View | OutSystems
Mobile Development: Add Request Header when open Web View
Pega
support.pega.com › question › send-custom-http-header-through-open-url-window-action
Send custom HTTP header through 'Open URL in Window' action | Support Center
February 25, 2016 - Since I think Pega 7.1.8 does not have a OOTB way to send custom HTTP headers... Any idea for a workaround for this problem? ... Copy link Copying... Copied! ... Instead of using action “Open URL in Window”, we've added action Run Activity. This activity sets the required parameters and then does a Show-HTML.
GitHub
github.com › nwjs › nw.js › issues › 3208
How to get http headers from opened window? · Issue #3208 · nwjs/nw.js
September 3, 2015 - var win = gui.Window.open('https://github.com',); Can i get the http response headers from github? if so, how? Thank you · No one assigned · No labels · No labels · No type · No projects · No milestone · None yet · No branches or pull requests ·
Published Mar 09, 2015
YouTube
youtube.com › watch
JavaScript : window.open with headers - YouTube
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
Published April 29, 2019
GitHub
github.com › IdentityModel › oidc-client-js › issues › 569
Question: pass authorization headers in Window.open, iframe scenarios · Issue #569 · DuendeArchive/identity-model-oidc-client-js
December 30, 2017 - Our UI is built on angularJS and we have some applications that were included in iframe's that were built in MVC and asp.net forms (for the some of the SQL SEREVER reportviewer limitations). This is all used to work with cookie based authentication. But after we switch to Identity provider, all these end points are expecting authorization headers and since we can not pass auth headers to iframes or window.open, This functionality is breaking.
Published May 30, 2018
Author vejandla
Stack Overflow
stackoverflow.com › questions › 42106744 › how-to-add-request-headers-to-window-open-in-javascript
c# - How to add request headers to window.open in javascript? - Stack Overflow
The url for the window.open contains my controller name and action method so that it will hit the respective action method. But due to some reason, when I run with http request, I'm able to open the pdf, which means my controller call returns 200. But in the case of https, my controller throws a 302. Is there any solution for this? One more thing which I found out is, when I compose the https request in Fiddler by adding some request headers to it, my controller returns 200.
Dasith
dasith.me › 2019 › 04 › 29 › protecting-assets-without-using-authorization-headers
Protecting Assets Without Using Authorization Headers (i.e. Bearer Tokens)
August 19, 2020 - private urlClicked(string attachmentId): void { this.getAttachmentUrl(this.attachment.id) .subscribe(url => { window.open(url); // caution: popup blockers might prevent this }); } private getAttachmentUrl(attachmentId: string): Observable<string> { const tokenUri = `api/attachment/token/${attachmentId}`; const headers = new HttpHeaders({ 'Content-Type': 'application/json' }); headers.append('Authorization', auth_token); // or let your interceptor add it return this.http.get<string>(tokenUri, { headers: this.headers }).pipe(map( token => `api/attachment/download/${token}`)); }
CopyProgramming
copyprogramming.com › howto › how-to-add-authentication-header-to-window-open
Angularjs: Adding an authentication header to the window open function: A guide
May 9, 2023 - In such cases, it is advisable to present a secondary button that allows users to initiate the download once it is complete. This can be achieved by calling window.open from the second button. Java - How to add Header with Authorization for, Adding parameter definition to a custom OpenAPI bean will not work because the parameter won't get propagated to the operations definitions.
Top answer 1 of 6
11
In more recent browsers, you might be able to use blobs:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="tryit();">PDF</button>
<script>
function tryit() {
var win = window.open('_blank');
downloadFile('/pdf', function(blob) {
var url = URL.createObjectURL(blob);
win.location = url;
});
}
function downloadFile(url, success) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader("Authorization", "Basic " + btoa("username:password"));
xhr.responseType = "blob";
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (success) success(xhr.response);
}
};
xhr.send(null);
}
</script>
</body>
</html>
In IE, ask the user:
window.navigator.msSaveOrOpenBlob(blob, 'readme.pdf');
P.S. You can test the backend in Node:
router.get('/pdf', function(req, res) {
if(req.headers.authorization !== 'Basic dXNlcm5hbWU6cGFzc3dvcmQ=') return res.status(403).send('Not allowed');
res.sendFile(path.join(__dirname, 'public', 'render.pdf'));
});
router.get('/', function(req, res) {
res.render('index');
});
2 of 6
2
I think this is what you are looking for... Or correct me if i am wrong.
https://developer.mozilla.org/en/docs/Setting_HTTP_request_headers
Itecnote
itecnote.com › tecnote › javascript-window-open-with-headers
Javascript – window.open with headers
January 9, 2022 - Skip to content · React-native – React Native Error: “Animated.event now requires a second argument for options” · Python – keep on getting “x and y must have same first dimension, but have shapes (100,) and (1, 100)” · Java – Docker WARNING: Published ports are discarded when ...