BlockCredentialedSubresources

Ionic Framework ionic-v3
1

Hi All,

My ionic app is getting data from other URLs with the embedded username & password. It stopped working a few months ago and I got this error:

“[Deprecation] Subresource requests whose URLs contain embedded credentials (e.g. https://user:pass@host/) are blocked”

I could fix it when running with ionic server with the parameter “–disable-blink-features=BlockCredentialedSubresources” for Chrome. However, I am not sure how to fix this with the deployed android app.

Thanks.

2

You need to rearchitect this, because section 3.2.1 of RFC 3986 mandates the deprecation:

Use of the format “user:password” in the userinfo field is
deprecated. Applications should not render as clear text any data after the first colon (“:”) character found within a userinfo subcomponent unless the data after the colon is the empty string (indicating no password). Applications may choose to ignore or reject such data when it is received as part of a reference and should reject the storage of such data in unencrypted form. The passing of authentication information in clear text has proven to be a security risk in almost every case where it has been used.

3

Hi @hellovn,

I managed to solve the problem and identified two ways, but first I will explain my case:

I need to connect to an image server in MJPEG and using the tag there is no way to pass the authentication user and password, because Chrome returns the error reported by you (because I tried to do the inline authentication).

  • The first way to solve the problem:

Create a pipe, as shown below (adapt the part of the authentication header):

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'authImage'
})
export class AuthImagePipe implements PipeTransform {

  constructor(
    private http: HttpClient
  ) { }

  async transform(src: string, authBasic: string): Promise<string> {
    const headers = new HttpHeaders({ 'Authorization': `Basic ${authBasic}` });
    const imageBlob = await this.http.get(src, { headers, responseType: 'blob' }).toPromise();

    const reader = new FileReader();
    return new Promise((resolve, reject) => {
      reader.onload = () => resolve(reader.result as string);
      reader.onerror = () => reject("");
      reader.readAsDataURL(imageBlob);
    });
  }
}
  • Use it like this:

<img [src]="'https://somewhere.com/image.png' | authImage | async"/>

But, in my case, it didn’t solve it, because I needed to order images sequentially, so I did exactly the process executed by pipe, but directly in my service, capturing the image and updating the variable that is directly linked to the template.

Reference: Loading images with JWT Authorization | by Armen Vardanyan | JavaScript in Plain English