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).
Related
Am trying to bring the generated cookie from the backend (nestjs) to front end (vuejs) but it failed to set on website. As shown below there is no cookie there
I tried using
headers:{
"set-cookie" : "SESSION-COOKIE"
}
But obviously it doesn't work as it is a forbidden header. The "SESSION-COOKIE" is the name of the cookie that has been set at the backend. Hope someone can help and do not hesitate to ask me question for more details
Just make sure that the backend is setting the cookies correctly, here's the link to official NestJS documentation about cookies.
The value from the set-cookies header will just be stored by the browser, it's only forbidden to be accessed by the JavaScript, however so you should be able to see it in the Dev Tools.
In your case it looks like backend is not setting it in the right way.
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.
Objective is to integrate payment gateway to from Stand alone Blazor WebAssembly application. My payment page component has a form that submit directly to the payment gateway like this:
<form action="https://gateway.bank.com" method="POST">
Clicking submit button in the form redirects correctly. After the user complete payment transaction on the bank page, user is redirected back to my app along with response header. Although the redirected url is correct, browser throws 404. Reading more, I found out that since the request is originated from another domain, it gets blocked by CORS. Read many articles about configuring CORS policy for server, but how do I configure it on the client app to allow incoming requests?
Tried the following:
Added Nuget package Microsoft.AspNetCore.Cors
Inserted [DisableCors] attribute on the page
Added CORS policy on Main()
builder.Services.AddCors(options =>
{
options.AddPolicy("Open",
builder => builder.AllowAnyOrigin().AllowAnyHeader());
});
None of these worked though.
Just to ensure the approach is correct I have implemented solution using razor pages with [IgnoreAntiforgeryToken] on page model; it is successful. Help appreciated to find where am I going wrong with WebAssembly. Kindly note that I don't have a server project, only a stand alone WebAssembly project.
If the request is being blocked by CORS, there is nothing you can do on your website to avoid this. CORS is a security mechanism of browsers inspecting the response from a server. If the server does not add the proper CORS header to the response, the browser blocks the response from getting to the site loaded in the browser.
This is an intentional and good (if sometimes frustrating) part of the internet. You would need to contact the bank and request your website be added to the list of allowed origins. They would add your website's URL to the Allow-Access-Allow-Origin header. Because your URL is now part of the cool-kids list, the browser will allow the response to reach your site and will no longer throw a CORS error.
I'm prototyping an Angular2 app at work. The app should run under some company middleware that expects several Link headers in responses it gets from the angular2 app. Unfortunately, I haven't been able to figure out how to add headers to responses that Angular provides out of the box.
To clarify what I mean - when I send a GET Request directly to my Angular app, it sends back a Text/HTML response that a browser can render into an SPA. I would like to add headers to this response, and can't figure out how. The closest I've found is the discussion here: Angular2 - set headers for every request
This sounds like a duplicate, but having looked through similar questions, I've found how to add headers to Responses I generate explicitly with an HTTP object from the HttpModule, but not how to attach headers to the Responses that Angular creates out-of-the-box. I'd love to use something like an HTTP Interceptor that just attaches headers to every response my app sends out, but it doesn't look like Angular2 will have interceptors until release 4.1.
Edit: Things I've tried:
Adding a provider for Http ResponseOptions in my (main) AppModule that adds headers to responses
This adds the header to all responses I receive from http requests that my app receives from the HttpModule, but doesn't add the header to responses that my app itself sends to outside services.
Edit 2: I misunderstood where my Angular app ends and where the server hosting it begins. Headers like this can be added in the server - for my simple example, I needed to configure the webpack-dev-server. See the accepted answer below.
Web Starter Pack uses webpack-dev-server just as a development hosting platform/Web server for your efforts, but it 's not, in the end, part of your final Angular app proper. You'll eventually serve your Angular app from some other hardened Web server software such as Apache, IIS, etc.
For development purposes, you should be able to configure webpack-dev-server to add custom headers by modifying your webpack.config.js by setting the headers options, per the documentation.
devServer.headers
Adds headers to all requests:
headers: {
"X-Custom-Foo": "bar"
}
For example:
webpack.config.js
...
devServer: {
...
headers: {
"X-Custom-Foo": "bar"
}
...
}
...
Although to actually read the "initial load" headers within your Angular application once it initializes (if that is what you're looking to do) you may need to add your values as [non-httpOnly] cookies, then read them on ngInit().
Source: DevServer Documentation - Header
I don't know the angular2-webpack-starter, but I guess it's just a command line tool easy development of your Angular application. So it just serves your JavaScript, HTML and assets. It's not the application itself. The Angular application runs in a browser and serves as a client of your backend. So you need another server that serves your backend application and all your XHR calls will go to this backend. When you deploy your application, it will probably not run in the angular2-webpack-starter, but in some more advanced HTTP server such as Apache HTTPD or nginx.
Then you need to create a custom Http service (extending angular's own Http service) or XHRBackend. It has access to Request and Response object and can add extra headers there.
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.