Start using design tokens in your apps, and try dark theme in Jira Cloud

Hi @JulianLundman ,
I’ve got a question about theming and security. It seems theming nudges us vendors to use an inline script to initialize theming.
However the recommended security policies are to NOT use an inline script.

Any advice on how to resolve this?

1 Like

I guess this is relevant to this topic, so i ask here.
At the moment I am constantly using the dark theme and love it. But it does not affect our Forge apps since quite some time.
The iframe’s html tag always includes the attribute data-color-mode="light". This seems a like a bug in Forge.

Hey @lkimmel, this is a known issue, we’re currently waiting for a deployment to happen so we can publish a fix for this. We will update this thread once it’s back up and operational. Should be roughly 1-2 weeks away.

Just noting that Forge Custom UI is still behind a feature flag so end-users are not being impacted at the moment. Once this fix is deployed and we confirm everything is working (with your help), we will get ready to rollout the capability to expose themed experiences via Forge in prod, similar to what we recently did for Connect.

Thanks,
Dan

Hey @marc, is this an Atlassian security policy? If so could you link me to the page that mentions this? Or is this an internal CSP requirement?

You can actually allowlist certain inline scripts. We have a one-line inline script and then we allow this using the hash of that script, see: CSP Hash Examples and Guide
Is a bit of a pain to manage, but it’s not our first inline script, since we need this for handling the issue content click events as well…

1 Like

Hi @DanielDelCore ,
In the Atlassian security requirements ( https://developer.atlassian.com/platform/marketplace/security-requirements/ ), the following is listed for Connect applications:

" Do not use unsafe-inline or unsafe-eval directives in script-src when possible. This will make the policy ineffective against XSS vulnerabilities."

@tobias.viehweger I’m aware of the CSP hashes, however I think they are a hassle to use and also go against the spirit of the Atlassian security policy.

Also Forge Custom UI doesn’t allow inline scripts in the CSP (to my knowledge).

1 Like

Atlassian security policy does not require to not use inline script, as the requirement states here. It only requires not using unsafe-eval or unsafe-inline directives, which it is not necessary to use as you can use inline scripts with CSP hash.

Hi everyone!

We’re very happy to announce that our theming solution for Forge Custom UI apps is now available for everyone to use!

Please have a look at our updated API documentation here and here to learn how to use it.

If you’ve already used our theming solution in Connect, it’ll look very familiar. In the case of Forge, you’ll need to call the new view.theme.enable() method to apply Jira’s current theme and reactively apply any theme changes that occur.

With regard to the questions around CSP’s, we’ve implemented it differently in Forge so there won’t be any need to update CSP’s in your apps. Instead of injecting <style> elements, it’ll load the stylesheets via <link> elements.

3 Likes

Hey @JulianLundman

can you verify that this works in Forge? When I use the new view.theme.enable() method, the following url (which is broken, mind the undefined) is embedded and the theming doesn’t work.

https://forge.cdn.undefined.atlassian-dev.net/atlaskit-tokens_dark.css

Update:
Even after fixing the url (replacing undefined with prod) CSP Rules are violated

Update 2:
This error seems to only affect forge tunnel mode.

1 Like

Hey @JulianWolf, thanks for the heads-up!

That looks odd, we’ll have a look and get back to you ASAP.

unpkg should be completely removed from Forge now, which makes me think some of our updates are yet to completely propagate :thinking:

To get Forge Tunnel working again, I suspect you need to upgrade your local version of @forge/cli. It’s based on Docker so it might also require an update or restart.

When running without forge tunnel are you seeing any errors or is it functional?

Cheers,
Dan.

2 Likes

@DanielDelCore – it works when deployed to production. The CSP headers are also updated and do not contain unpkg anymore. After updating the tunnel package the error is also resolved locally. I think we are good now :slight_smile:

2 Likes

Fantastic! Glad it helped!
Let us know if you come across anything else, enjoy!

Hi folks, now with support enabled in Jira for themed apps built using Forge

Confluence is joining the dark side too!

Do you also build apps for Confluence? Be sure to check this out, and share your feedback with our Confluence teammates:

This is a collaboration right across Atlassian products, and you should expect a familiar experience using the Atlassian Design System colours, design tokens and theming.

(And in case you missed it… how about Power Ups for Trello? Join the color theme early access program for Power-Up developers too!)

Cheers,
Stephen
Engineering Manager, Atlassian Design System

2 Likes

Hey guys, can I have some clarification on the Jira Theme option: “Original”?
What is it really? And why is it different from Light theme?

1 Like

Hello, were you able to solve this problem? If yes could you share how you fixed it?

@stephenmok Could you provide any information on how to handle the app icons in the navbar or project sidebar?

1 Like

Is there a chance that @atlassianlabs/jql-editor can be upgraded to depend on latest @atlaskit/tokens?

1 Like

I’m calling window.AP.theming.initializeTheming(); but no changes are made to the HTML tag. Can you tell me where to go from here? How do I find out why it’s not working?

Here’s my HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>
        <script src="https://connect-cdn.atl-paas.net/all.js"></script>
        <script>
            window.AP.theming.initializeTheming();
        </script>
    </head>
    <body>
        <p>Testing design tokens</p>
    </body>
</html>

Hey David, I had the same problem, put the script in the body

1 Like

Sadly, putting the script in the body didn’t work for me.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>
        <script src="https://connect-cdn.atl-paas.net/all.js"></script>
    </head>
    <body>
        <script>
                window.AP.theming.initializeTheming();
        </script>
        <h1>Testing design tokens</h1>
    </body>
</html>