Keycloak for Angular not sending bearer authentication for Images

Question

I am running an Angular application with a Spring Boot MVC API in combination with Keycloak. I configured Angular following the instruction found under https://www.npmjs.com/package/keycloak-angular and it generally works fine.

In my Angular components I use the img tag to include Images, which are served by my Spring Boot application

The MVC endpoint looks like this :

@GetMapping(value = "profile/image/{id}")
    public @ResponseBody byte[] getProfileImage(@AuthenticationPrincipal Jwt jwt, @PathVariable String id)
            throws IOException {
            ...
            }

The problem is that I receive a 401 Response Code on the first load of the image.

Here are my key findings:

The load of the image does (never) contain the "authorization: bearer ..." request header (as opposed to requests, that are sent via the HttpClient)
The first failing request will have a set-cookie response Header
Consecutive Requests will contain the cookie as part of the Request Header and will work

Can anybody point out, what I can do? Can keycloak be configured in a way, that the load of Images will contain the bearer authetication header?

user_3348604 · Answer

This kind of image is loaded by the browser and not by HttpClient. And HttpClient is already configured to inject Authorization header in your case, not the browser so that is a root cause of the issue.

You may load image content from the URL api/v1/profile/image/{{id}} with HttpClient and then do a inlining of that image content into HTML with base64 encoding:



e.g.:

It is good solution for small images (this approach is used for social icons usually).

Or you can save authorization into cookie in the same format as your service provider is expecting before you create image). Then browser will send that authorization cookie in the each request. Of course there can be a problem with cross domain cookies.

user_1743997 · Answer

Angular is powerful enough to satisfy your server requirements. You can force the img tag to request the image via an HttpClient.

So start with Writing a pipe that accepts an image url and performs the HTTP request while putting on the Authorization header.

The pipe can look like this:

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

  constructor(
    private http: HttpClient,
    private auth: AuthService, // your service that provides the authorization token
  ) {}

  async transform(src: string): Promise {
    const token = this.auth.getToken();
    const headers = new HttpHeaders({'Authorization': `Bearer ${token}`});
    const imageBlob = await this.http.get(src, {headers, responseType: 'blob'}).toPromise();
  }

}

You also need to Transform the blob response to a base64 string so it can be passed to the src attribute. Then put the base64 string into a Promise, so that it can be passed to the async pipe in its turn. Here we provide them plus error handling (server errors like 40X, 50X) using fallback image altogether:

async transform(src: string): Promise {
  const token = this.auth.getToken();
  const headers = new HttpHeaders({'Authorization': `Bearer ${token}`});
  try {
    const imageBlob = await this.http.get(src, {headers, responseType: 'blob'}).toPromise();
    const reader = new FileReader();
    return new Promise((resolve, reject) => {
      reader.onloadend = () => resolve(reader.result as string);
      reader.readAsDataURL(imageBlob);
    });
  } catch {
    return 'assets/fallback.png';
  }
}

In this way, you can use sth like this:

You can also write an additional component for the new version of img tag like this :

@Component({
  selector: 'image',
  template: '',
})
export class ImageComponent {

  @Input() src: string;
  @Input() alt = '';
}

And then use it like this :

Keycloak for Angular not sending bearer authentication for Images

2 Answers