Image rendering issues on Forge platform due to missing WP domain in img-src permissions

Forge Forge Platform and Tools
, ,
1

I am encountering an issue on the Forge Platform related to rendering Icons/Images, which are fetched using REST APIs. Occasionally, the console throws an error indicating that the path “https://i0.wp.com/…” has not been added to the “img src” permissions, resulting in the image not being displayed. This problem occurs randomly and not for all fetched images.

The Icon URLs provided, obtained from API responses, do not include the (wp) domain part. It seems this wp path is internally used by Forge/Atlassian for routing or caching purposes. Currently, Forge automatically includes several domains (the current instance, https://secure.gravatar.com, https://avatar-management--avatars.us-west-2.prod.public.atl-paas.net, https://api.atlassian.com) in the “img src” permissions, but it does not include WP by default, which appears to be necessary. This is not explicitly mentioned in the documentation for adding permissions (IP addresses and domains for Atlassian cloud products), and it may have been overlooked for Forge.

The workaround involves adding *.wp.com to the image permissions within the manifest. However, this addition will be publicly displayed on the app installation page under “Share data with domains outside of Atlassian,” as shown in the attached screenshot.

Screenshot 2024-06-14 at 1.05.11 PM
Screenshot 2024-06-14 at 1.05.11 PM624×636 68.5 KB

2

Hi @ajay ,

That looks a bit like a WordPress URL. Are you using a library or something that may be causing this?

Dugald

3

Hi @dmorrow ,

The wp site seems to be accessed by Forge platform and is not related to our App libraries

Refused to load the image 'https://i0.wp.com/avatar-management--avatars.us-west-2.prod.public.atl-paas.net/initials/PG-3.png?ssl=1' because it violates the following Content Security Policy directive: "img-src 'self' data: blob: <>-paul.atlassian.net https://secure.gravatar.com https://avatar-management--avatars.us-west-2.prod.public.atl-paas.net https://api.atlassian.com"
4

Hi @ajay ,
Could you please show a code sample where you’re using the image?

5

If a user hasn’t uploaded a custom avatar, the avatar endpoints redirect to Gravatar (which is owned by Automattic/WordPress), which in turn redirects to a i[number].wp.com URL. Therefore, all Forge apps that want to display avatars have to include *.wp.com in their external image permissions. This issue is tracked in FRGE-957.

3 Likes
6

@AndreiPisklenov

Basically the issue is that when trying to render Icons/Images (whose URLs I have fetched using REST APIs) sometimes the console errors out saying that the " https://i0 . wp.com/…" path has not been added to the “img src” and this leads to the image not being fetched. The thing is that it does not happen for all the images I fetched but only to some random ones.

...
const response = await requestJira(
    `/rest/agile/1.0/board/${boardId}/backlog?maxResults=5000&fields=status,parent,priority,assignee,creator,issuetype,project,created,summary,description,subtask`,
      {
        method: "GET",
        headers: {
          Accept: "application/json",
        },
      }
    );

const data = await response.json();
...
// using iconUrl in component
<img
    src={issue.fields.issuetype.iconUrl}
    alt="issuetype-icon"
    style={{ paddingRight: "10px" }}
/>