Avatars not rendering correctly (edge case) - Missing img-src CSP entry on Atlassian side?

Hi there,

I am using Forge and “@atlaskit/avatar”: “^20.3.3” which in general works fine since here: Use Attachment Images in Custom UI - #11 by bjornbrynjar

I just noticed an edge case when it doesn’t work. This happens when users haven’t selected an avatar image. In these cases Jira renders user’s Avatars like this:

Screenshot 2021-08-17 at 18.05.04

However even though I use:

<Avatar
    appearance="circle"
    alt={initials}
    {...props} />

Where initials = “AC”

It renders as follows in my app:
Screenshot 2021-08-17 at 18.11.30

The problem seems to be a “Content Security Policy” problem:

Because when opening the url given:
https://i1.wp.com/avatar-management–avatars.us-west-2.prod.public.atl-paas.net/initials/AC-6.png?ssl=1

I find the missing avatar image my app can’t render:
AC-6

So it seems the https//i1.wp.com/ url needs to be whitelisted in the same way ‘http://gravatar.com/’ was added to the img-src part of the CSP on the atlassian side - for this to work.

@danielwinterw is this a similar case we encountered here before?

3 Likes

Hey @bjornbrynjar, sorry for the delayed response!

This seems like an issue we need to fix. I’ll have a look into it and get back to you soon.

Hey @bjornbrynjar, I’m trying to work out where the i1.wp.com URL comes from but I can’t seem to find in the Atlaskit Avatar code where that would come from. Does it get passed through in the ...props part of your code perhaps?

If so, where did you get it from?

My Forge app also accesses that. I added in my manifest permissions

permissions:
  external:
    images:
      - '*.gravatar.com'
      - '*.wp.com'
      - '*.atl-paas.net'
      - '*.atlassian.com'

and CSP to get around the problem

    <meta http-equiv="Content-Security-Policy" content="img-src 'self' data: blob: https://secure.gravatar.com https://avatar-management--avatars.us-west-2.prod.public.atl-paas.net https://api.atlassian.com https://i2.wp.com https://forge.cdn.prod.atlassian-dev.net"/>
1 Like

Hi there @kchan

No I am not passing this url through the ‘…props’.

It seems the Avatar component is calling this url indirectly through Jetpack image CDN:

More info on this can be found here:

Cheers
Björn Brynjar

1 Like