Results 1 to 2 of 2

Thread: [RESOLVED] [Angular 12] CSP Error on POST

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,712

    Resolved [RESOLVED] [Angular 12] CSP Error on POST

    I have the following service:
    Code:
    import { Inject, Injectable } from '@angular/core';
    import { HttpClient, HttpHeaders, HttpResponseBase } from '@angular/common/http';
    import { Observable } from 'rxjs';
    import { IEnvironment } from '../environment';
    import { IAuthorizationResponse } from './authentication.interface';
    
    @Injectable({
        providedIn: 'root'
    })
    export class AuthorizationService {
    
        private httpOptions = {
            headers: new HttpHeaders({
                'Content-Type': 'application/x-www-form-urlencoded',
                'Access-Control-Allow-Origin': '*'
            })
        };
    
        constructor(@Inject('env') private environment: IEnvironment,
                    private http: HttpClient) { }
    
        /**
         * Retrieve a JWT bearer token that may be used to authorize future requests. Note that the user credentials may EITHER be passed in as form values or as a basic authorization header.
         * @param username client's username
         * @param password client's password
         * @returns Observable<IAuthorizationResponse>
         */
        login(username: string, password: string): Observable<IAuthorizationResponse> {
            return this.http.post<IAuthorizationResponse>(this.environment.authorizationUrl, {
                client_id: this.environment.authorizationClientId,
                username,
                password
            }, this.httpOptions);
        }
    
        /**
         * Revoke a refresh token so that it will no longer be valid for use
         * @param authorizationResponse client's IAuthorizationResponse that contains the refresh_token
         * @returns Observable<HttpResponseBase>
         */
        logout(authorizationResponse: IAuthorizationResponse): Observable<HttpResponseBase> {
            return this.http.post<HttpResponseBase>(`${this.environment.authorizationUrl}/revoken`, {
                client_id: this.environment.authorizationClientId,
                refresh_token: authorizationResponse.refresh_token
            }, this.httpOptions);
        }
    
        /**
         * Retrieve a JWT bearer token that may be used to authorize future requests. Note that the user credentials may EITHER be passed in as form values or as a basic authorization header.
         * @param username client's username
         * @param password client's password
         * @returns Observable<IAuthorizationResponse>
         */
         refreshToken(authorizationResponse: IAuthorizationResponse): Observable<IAuthorizationResponse> {
            return this.http.post<IAuthorizationResponse>(`${this.environment.authorizationUrl}/refresh`, {
                client_id: this.environment.authorizationClientId,
                refresh_token: authorizationResponse.refresh_token
            }, this.httpOptions);
        }
    
    }
    And I am calling the login method like this:
    Code:
    login(): void {
        if (this.form.invalid) {
            this.form.markAllAsTouched();
            return;
        }
        const { username, password } = this.form.value;
        this.authorizationService.login(username, password).subscribe(results => {
            console.log(results);
        });
    }
    But the request is returning the following status in Chrome's developer tool's network tab: (blocked:csp)

    I thought that by setting the Access-Control-Allow-Origin to the wildcard would allow the request to go through, but apparently it's not. I would like to restrict it to the domain that I'm requesting the API from, but for now I'm trying to allow for all.

    What am I missing?
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,712

    Re: [Angular 12] CSP Error on POST

    The issue was on the client's server. They were very restrictive in their cross-origin policy and as a workaround I'm using the cordova community HTTP plugin to send requests outside of the browser.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width