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>'
1 Like
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.