CSP Issue – Unable to Load Image in Atlassian App (Base64 & Blob)

Forge
1

We are facing an issue with loading images in our Atlassian Forge app due to Content Security Policy (CSP) restrictions. Despite trying multiple approaches, including using base64-encoded images and Blob URLs, the images fail to load inside the Atlassian app.

Steps Taken:

1. Base64 Approach:

Converted the image to a base64-encoded string.

Used it as a source (src=“data:image/jpeg;base64,…”).

Error Log: Refused to load the image ‘data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSg…AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB//Z’ because it violates the following Content Security Policy directive: “default-src * ‘unsafe-inline’ ‘unsafe-eval’”. Note that ‘img-src’ was not explicitly set, so ‘default-src’ is used as a fallback. Note that ‘*’ matches only URLs with network schemes (‘http’, ‘https’, ‘ws’, ‘wss’), or URLs whose scheme matches self’s scheme. The scheme ‘data:’ must be added explicitly.

2. Blob URL Approach:

Created an object URL using URL.createObjectURL(blob).

Assigned it to the src attribute of an tag.

Error Log: Refused to load the image ‘blob:http://localhost:8000/2ed809a2-3263-475c-bdf7-dca0637ba1af’ because it violates the following Content Security Policy directive: “default-src * ‘unsafe-inline’ ‘unsafe-eval’”. Note that ‘img-src’ was not explicitly set, so ‘default-src’ is used as a fallback. Note that ‘*’ matches only URLs with network schemes (‘http’, ‘https’, ‘ws’, ‘wss’), or URLs whose scheme matches self’s scheme. The scheme ‘blob:’ must be added explicitly.

Issue Observed:
In both cases, the image does not render inside the Atlassian Forge app due to CSP violations.
The browser console logs CSP errors preventing inline image rendering.
Expected Behavior:
The image should be displayed correctly within the Atlassian app without CSP blocking it.
Request for Support:
Is there a recommended way to display images inside a Forge app while adhering to Atlassian’s CSP policies?
Are there specific CSP directives we need to configure in the manifest.yml to allow base64 or Blob URLs?
Any guidance on resolving this issue would be greatly appreciated!

manifest.yml for reference

security:
csp:
content: >
default-src ‘self’ blob:;
img-src ‘self’ data: blob: https://*.s3.amazonaws.com http://localhost:8000/;
media-src ‘self’ data: blob:;

2

Hi @LakshmiNarayananND,

Thanks for raising this issue. Is this a local image or is it being loaded from an external source? If it’s the latter, have you added the following into your manifest file (see manifest permissions for img-src):

permissions:
  external:
    images:
      - '<ImageURL>'
3

Thanks for your response.

The backend provides the S3 object in base64 format, which I use to render the image in the Atlassian Forge app on the frontend.

I have tried both approaches: data: and blob:.

I also followed the documentation and updated the manifest.yml file in multiple ways, but the image is still being blocked due to Atlassian’s CSP.

Overriding certain CSP rules in manifest.yml does not seem to work within the Atlassian Forge app’s iframe.

Additionally, the S3 bucket is private, and the only way to access the object is through a secure API exposed by the backend. Since the backend is already providing the object in base64 format, we need to handle it in a way that does not compromise security.

4

Hi @LakshmiNarayananND,

Thanks for the reply and apologies for the delayed response. Could we have a snippet of your manifest.yml?

data: and blob: is added by default to a Forge app’s img-src and media-src CSP.

Looking at the the reference that was provided in earlier responses the manifest.yml should be:

permissions:
  external:
    images:
      - "https://*.s3.amazonaws.com"
      - "http://localhost:8000/"

Then, after running forge deploy and forge install --upgrade the app should have the following custom csp: img-src ‘self’ data: blob: https://*.s3.amazonaws.com http://localhost:8000/;.

5

Hi @NadyaFelissa Thanks for the response. I have tried some other approach to handle that issue. Any way I will try to change the manifest.yml as you mentioned like below.

permissions:
  external:
    images:
      - "https://*.s3.amazonaws.com"
      - "http://localhost:8000/"
6

Sorry to raise this post from the dead, but the "http://localhost:8000/" does not work:

forge lint does not like it:

image
image2561×185 66.9 KB

Any other hint to be able to display Blob in the Image UIKit component ?