Vue--How do I make the <a> tag carry the request header? - vue.js

How do I make the tag carry the request header? I use the <a> tag to download. And I need to carry a token in the request header.

When you use a tag to download files or link to any document, in general, it is not possible to manipulate extra headers! Browsers will send the typical headers. To solve this problem, following are the alternative solutions.
Your token must be query parameter in the URL so that back-end server can read it.
Or you can use cookies to save the token and browser will ensure that cookies are sent for your request automatically. (For security, ensure that you cookie is HTTP only and rejects CORS requests)
Alternately, if you are not really after downloading the file or simply trying to show on browser, then you can use XHR or fetch where you are free to manipulate headers.

Related

How to extract authorization header from URL in Vue JS App

I have created a vue js app for frontend development.
In our case, we will be getting auth info in authorization header from some other web app.
I dont understand how can i fetch authorization header from URL.
I know we can fetch params from URL.
Can anyone please help me with this - How can i fetch authorization header from URL.
Thanks & Regards,
Jyoti
I'm pretty sure it's not possible for client-side JS to access headers in the request that initially loads the page. You can add headers to outbound requests made by client-side JS, but only the server getting the request has access to the headers. If it makes the information in that header available to the client, either as a cookie or in the source of the page, you can work with it, but depending on your application, that might be a security risk (e.g. for replay attacks).

How to add HTTP header to URL

I'm working with an API which provides a HTTP header called token with value 12abc3 and my url is https://example.com/view/quote. Is there a way by which I can add the header as a parameter in the url so that I can type it directly on my browser's address bar instead of using cURL orHurl.it??
The only way I can imagine being able to do this would be to write a small HTTP proxy that takes a specially formatted URL and extracts header values out of the URL and re-issues the request for you. I'm not aware of any service to do this automatically for you.
I think it's too late to reply but for those who still finding the solution
you can send your token through url like this
https://yoururl?Authorization=Bearer yourtokenhere

Can CSRF Be Circumvented By JSONP

I'm very new to CSRF protection so please excuse if I make poor assumptions or if I'm missing something, but I'd like to make sure I'm doing all I can to prevent CSRF. From my research so far, I've found the following:
CSRF can be thwarted (and is probably best thwarted) by placing a nonce parameter within the request body of all HTML POSTs, only using POSTs to modify data, and on the server side verify the token is valid before processing the request.
A malicious website can send requests to my site (thwarted by the nonce), but they can't read responses because of same-origin policies in place on browsers. Assuming that someone is using a secure browser, a malicious site cannot GET a page from my site using AJAX, read the nonce, and use it for themselves.
Script tags are not bound by same-origin policies in most (possibly any) browsers and can therefore allow for content to be read from other sites.
When I got to point 3 I decided to try to get at HTML content in Chrome using JSONP; I opened up my console (with a page not from localhost) and ran the following code:
$.ajax({
url: "http://localhost:8080/my-app/",
dataType: "jsonp",
jsonp: "alert"
}).done(function(data) {
alert(data);
});
What I received in the console window was the this:
Resource interpreted as Script but transferred with MIME type
text/html
As far as I can tell the browser is essentially telling me that it received the content, proceeded to parse the response, but stopped because the type was not application/json. So finally, my question is, can this be compromised? Even though the browser failed to parse the response as JSON, it does have the response. Is there a way that this response could be parsed as HTML, grab my CSRF nonce, and compromise the protections I'm trying to enforce? It would seem to me (and I hope this to be true) that browsers will not allow this, just like they don't allow cross domain requests in the first place for basically all other communication, and that's what we as developers are relying upon (in addition to same-origin policies) to protect our sites. Is my thinking correct?

JSONP check header response

if I get data from an external website in JSONP form, how do I access the http header response? I have heard this may be difficult but my experience is that everything is possible.
Nope.
This is completely impossible.
The whole point of JSONP is to bypass the same-origin policy by passing a result through executable Javascript code.
Other than JS code generated by the remote server, you cannot get any information.

How do I create an query-string authorized s3 URL?

Apparently s3 supports urls in the form:
http://s3.amazonaws.com/bucket/file.txt?some_kind_of_auth_token
How do I generate a "secure" URL like this?
This is the official help which covers how to do this.
Look for the section called "Query String Request Authentication Alternative"
GET /photos/puppy.jpg?AWSAccessKeyId=AKIAIOSFODNN7EXAMPLE&
Signature=rucSbH0yNEcP9oM2XNlouVI3BH4%3D&
Expires=1175139620 HTTP/1.1
Here's a snip from the help page.
You can authenticate certain types of requests by passing the required information as query-string parameters instead of using the Authorization HTTP header. This is useful for enabling direct third-party browser access to your private Amazon S3 data, without proxying the request. The idea is to construct a "pre-signed" request and encode it as a URL that an end-user's browser can retrieve. Additionally, you can limit a pre-signed request by specifying an expiration time.