The retrieval of cookies from the Response object is not possible with Typescript

While working on my google chrome extension, I implemented a post call that looks like this:

public someapiCall(username: string, password: string) {
    var url = 'http://test.someTestServer.com/api/user/someApiCall';

    let headers = new Headers({ 
        "Content-Type": "application/x-www-form-urlencoded"
    });
    let options = new RequestOptions({ headers: headers, withCredentials: true });

    return this.http.post(url, 'UserName=' + username + '&Password=' + password, options)
        .map(res => {
            console.log(res);
            let cookies = res.headers.getAll('set-cookie');
            console.log(cookies);
        })
        .catch(this.handleError);
}

However, when I make the call, fiddler displays response headers as shown in this image.

The issue arises when I check the Response object printed in the console but find no header referencing cookies. Can anyone help me identify where the problem lies?

Answer №1

To ensure security, most cookies are set as HTTP-only, indicated by the presence of httponly at the end of the cookie header:

Set-Cookie:.AspNetCore.Identity.Application=...; expires=...; secure; httponly

This indicates that the cookie is not accessible via JavaScript - it is stored by the browser and sent with any requests to the domain/path, but cannot be accessed by client-side JavaScript.

In a Chrome extension, accessing these cookies is possible, but not through content scripts or injected code.

I utilize Sarahs-chrome-extension-async for async/await functionality, along with the chrome.cookies extension API:

async function getCookies() {
    var cookies = await chrome.cookies.getAll();
    for(let cookie of cookies)
        // cookie.httpOnly will indicate true for hidden cookies
        console.log(cookie); 
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

TSLint throws an error, expecting either an assignment or function call

While running tslint on my angular project, I encountered an error that I am having trouble understanding. The error message is: expected an assignment or function call getInfoPrinting() { this.imprimirService.getInfoPrinting().subscribe( response => ...

It is not possible to use an async function with Ionic 4 ToastController buttons

Incorporating a new function into the handler of my ToastController button to return a promise (in this case: this.navCtrl.navigateForward()) is something I need assistance with. This is what my code looks like: const toast = await this.toastController.c ...

It appears that Stackblitz may have an outdated package.json file for older Angular projects, causing compatibility issues when running the project locally

Upon reviewing the package.json files for older Angular projects on Stackblitz, I have observed a pattern where Angular9 is listed under devDependencies while dependencies include older versions such as "@angular/core": "7.2.2" or "@angular/core": "6.1.10" ...

Is SignalR affected by the CORS same-origin policy?

After enabling CORS in my .NET core app, regular http requests are functioning properly. However, I am encountering CORS issues with SignalR when running my Angular app. Any suggestions or solutions would be greatly appreciated. Thank you in advance. Cros ...

Errors encountered when using Mongoose and TypeScript for operations involving $addToSet, $push, and $pull

I am encountering an issue with a function that subscribes a "userId" to a threadId as shown below: suscribeToThread: async (threadId: IThread["_id"], userId: IUser["_id"]) => { return await threadModel.updateOne( { _id: t ...

What functionality does the --use-npm flag serve in the create-next-app command?

When starting a new NextJS project using the CLI, there's an option to use --use-npm when running the command npx create-next-app. If you run the command without any arguments (in interactive mode), this choice isn't provided. In the documentati ...

How come this constant can be accessed before it has even been declared?

I find it fascinating that I can use this constant even before declaring it. The code below is functioning perfectly: import { relations } from 'drizzle-orm' import { index, integer, pgTable, serial, uniqueIndex, varchar } from 'drizzle-orm ...

What could be causing the Angular Material Dialog component to not display properly in Google Chrome?

I encountered an issue with the dialog box when testing it in different browsers. It seemed to work fine in Firefox, but in Chrome, the click event only displayed a small empty dialog box without any content or buttons. This problem arose while I was follo ...

Child routes cannot be included when ..., so make sure to specify "..." in the parent route path

I've been working on setting up child routing within my project, and here is the current folder structure I have: app |--home/ | |--home.component.ts |--login/ | |--login.ts |--appShell/ | |--app.component.ts |--apps/ |- ...

Obtaining data from a nested JSON using Angular4 and AngularFire2's db.list

I have a restaurant and I wanted to share a tip: Here is the JSON Structure: http://prntscr.com/gn5de8 Initially, I attempted to retrieve data from my restaurant as follows: <p *ngFor="let tip of restaurants[item.$key].tips" [innerHTML]=&qu ...

Designate as a customizable class property

I'm struggling to create a versatile inheritance class for my services. Currently, I have two service classes named Service_A and Service_B that essentially do the same thing. However, Service_A works with Class_A while Service_B works with Class_B. T ...

Interpolation is not available for my Angular application

I am having trouble with using interpolation on my input in this code. I tried setting the value of the input to be the same as the User's username, but it doesn't seem to work. <ion-header> <ion-toolbar> <ion-buttons slot=&q ...

Do I really need to install @angular/router as a dependency in Angular CLI even if I don't plan on using it?

After creating a new Angular CLI project, I noticed that certain dependencies in the package.json file seemed unnecessary. I wanted to remove them along with FormModules and HttpModules from imports: @angular/forms": "^4.0.0", @angular/http": "^4.0.0", @a ...

I'm curious about the origins of the "readme" field within the artifact registry file

Within our private npm registry on Azure, we house our own npm package alongside the npmjs packages. One particular package, @typescript-eslint/parser, has caused our pipelines to fail during the npm install task due to a SyntaxError: Unexpected end of JSO ...

Setting a maximum value for an input type date can be achieved by using the attribute max="variable value"

Having trouble setting the current date as the "max" attribute value of an input field, even though I can retrieve the value in the console. Can anyone provide guidance on how to populate the input field with the current date (i.e max="2018-08-21")? var ...

Angular Signals: How can we effectively prompt a data fetch when the input Signals undergo a change in value?

As I delve into learning and utilizing Signals within Angular, I find it to be quite exhilarating. However, I have encountered some challenges in certain scenarios. I am struggling to come up with an effective approach when dealing with a component that ha ...

What are the steps to configure Angular to run with https instead of the default http protocol?

Typically, Angular applications run on http by default (for example, on http://localhost:4200). Is there a way to switch it from http to https? ...

ArrangementGrid utilizing ngFor directive for rows and columns

Hi there, I am new to using Nativescript and I have encountered an issue with ngFor. Specifically, I am working with a GridLayout that contains a StackLayout inside of it and I need to set dynamic col and row values within the StackLayout. Can anyone pro ...

Dynamically manipulate menu items in material-ui and react by adding, removing, editing, or toggling their state

I have scoured every corner of the internet in search of an answer to this dilemma. Imagine a scenario where there is a menu located at the top right of a navigation bar, initially showcasing TWO options (1. Login. 2. Register). When a user clicks on eithe ...

Adding a dynamic CSS stylesheet at runtime with the power of Angular and Ionic 2

Currently, I am working on creating a bilingual application using Ionic2. The two languages supported are English and Arabic. As part of this project, I have created separate CSS files for each language - english.css and arabic.css. In order to switch be ...