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

[bjornbrynjar]

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:

However even though I use:

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

Where initials = “AC”

It renders as follows in my app:

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:

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?

[kchan]

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.

[kchan]

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?

[paul]

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"/>

[bjornbrynjar]

Hi there @kchan

@kchan

Does it get passed through in the ...props part of your code perhaps?

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:

Site Accelerator

http://i1.wp.com and Mixed Content Error

Cheers
Björn Brynjar

[bjornbrynjar]

Hi there,

I noticed this problem still exists. Here is how the Avatar looks in our app when the user has not added a profile image:

While on the same screen, Jira renders these avatars in the following way, defaulting to an auto-generated image, based on the user’s initials:

Notice the image URL is exactly the same, however the problem is the following Content Security Policy error as can be seen in the Browser console:

What is worse is that in Safari browsers the Avatar isn’t displayed at all when this happens, only the tooltip shows on mouse-over:

I am considering @pauls workaround but it doesn’t make sense opening up access to all images on these servers.

@paul

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

Because the purpose of CSP is to restrict access to only what is needed by the app and I don’t want users to have to accept “exchanging data” with all of the following services when going through the “Allow access” - prompt.

@danielwinterw or @kchan can you look into this?
This is similar to this issue resolved previously and it seems the solution is to whitelist all URLs necessary, so the ‘@atlaskit/avatar’ component works as expected for all Forge apps - rather than adding these URLs to every app manifest’?

[bjornbrynjar]

@rwhitbeck can you follow up on this?

From a security perspective, I think it doesn’t make sense to add the following URLs to every Forge app manifest using “@atlaskit/avatar” package, as it seems to be the only solution currently available:

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

Thanks!

[marc]

@kchan The usage of gravatar and e.g. wp.com is documented here: IP addresses and domains for Atlassian cloud products | Atlassian Support

This is a feature of the Atlassian platform.