Connect Framework Global Page is not working

MertcanKaraba · August 8, 2024, 8:47am

Hello,
I created a jira project with atlas-connect new project-name. Later, when I upload this to Jiram and enter the Hello World page on the Global Page, I receive an error as follows.
Refused to load the stylesheet ‘https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display= swap’ because it violates the following Content Security Policy directive: “default-src ‘self’ https://cdn.ngrok.com ‘unsafe-eval’ ‘unsafe-inline’”. Note that ‘style-src-elem’ was not explicitly set, so ‘default-src’ is used as a fallback.
As a solution to this error, I added the code below to my app.js file using app.use.

app.use(helmet.contentSecurityPolicy({
 useDefaults: true,
 directives: {
 'default-src': [
 "'self'",
 'https://cdn.ngrok.com'
 ],
 'style-src': [
 "'self'",
 'https://fonts.googleapis.com/*',
 "'unsafe-inline'"
 ],
 'style-src-elem': [
 "'self'",
 'https://fonts.googleapis.com/*',
 "'unsafe-inline'"
 ],
 'script-src': [
 "'self'",
 "'unsafe-eval'",
 "'unsafe-inline'"
 ],
 // Add other directives as necessary
 }
}));

But I still get the same error. How do I solve this problem?

JamesByun · August 9, 2024, 12:07am

Hi!

To clarify your process:

You created a Connect app using the atlas-connect command followed by your app name.
You then added a specific module to render your Hello World page.
Subsequently, you encountered a Content Security Policy violation error.

To confirm, you haven’t performed any steps related to the Forge platform, correct? It seems this issue is strictly related to the Connect app, with no involvement of Forge.

Based on my understanding, the error message related to https://cdn.ngrok.com suggests a problem originating from ngrok’s end. It appears that the additional contentSecurityPolicy in app.use is unnecessary.

Could you please review this comment to check if there’s a step you might have missed in setting up your ngrok account?

Looking forward to hearing about your progress!

James

MertcanKaraba · August 12, 2024, 11:25am

Hello!

First of all, based on the steps you mentioned, yes, the first point is correct. However, in the second point, I didn’t add an extra module. When creating an app with atlas-connect, it automatically adds the globalPage module as well. The third point is also correct. I don’t think there’s anything wrong with my Ngrok setup. When I rechecked the steps, everything seems correct. My Ngrok authtoken is in the credentials.json file. I also saved it by running ngrok authtoken <token>. Was there anything else I needed to do?

Best regards.

JamesByun · August 13, 2024, 2:27am

Hi, Mertcan!

Thanks for your update.

There are couple of things to check up:

Which product did you choose for your connect app as a part of atlas-connect new command (jira, confluence or something else)? I believe generalPages are the default module as a part of sample template, cause I don’t believe globalPages does exist in this Connect modules list for Jira or Confluence. Sharing your atlassian-connect.json file would be helpful
Once you run your app (before installing your app), can you confirm https://<some ID>.ngrok-free.app/ is loading your atlassian-connect.json result properly in the browser according to this page
Can you confirm which atlas-connect version (atlas-connect -V) and node version (node -v) you are using

Looking forward to hearing from you

James

MertcanKaraba · August 13, 2024, 9:38am

Hello,

{
    "key": "my-app",
    "name": "My app",
    "description": "My very first app",
    "baseUrl": "{{localBaseUrl}}",
    "authentication": {
        "type": "jwt"
    },
    "lifecycle": {
        "installed": "/installed"
    },
    "scopes": [
        "READ"
    ],
    "apiMigrations":{
        "signed-install": true
    },
    "modules": {
        "generalPages": [
            {
                "key": "hello-world-page-jira",
                "location": "system.top.navigation.bar",
                "name": {
                    "value": "Hello World"
                },
                "url": "/hello-world",
                "conditions": [{
                    "condition": "user_is_logged_in"
                }]
            },
            {
                "key": "hello-world-page-confluence",
                "location": "system.header/left",
                "name": {
                    "value": "Hello World"
                },
                "url": "/hello-world",
                "conditions": [{
                    "condition": "user_is_logged_in"
                }]
            }
        ]
    }
}

This is my atlassian-connect.json file.
2. Yes.
3. atlas-connect version is 0.9.1 and node version is v20.5.0

JamesByun · August 14, 2024, 6:58am

Hi, Mertcan!

Thanks for your update.

Would you try node 18, as instructed in .nvmrc

As a example,

run brew install nvm (only if you don’t have nvm)
run atlas-connect new (let’s start from the scratch)
run nvm install 18.14.2 (or, you can create .nvmrc, specifying 18.14.2 then run nvm install)
run npm install
then run npm start (along with your credentials.json filling up)

Please let me know how this goes.

James

MertcanKaraba · August 15, 2024, 10:33am

Hi James,

Thank you for your help, but I’m still encountering the same error. I followed all the steps you mentioned. I installed nvm, created a new app with atlas-connect, ran npm install and npm start, but I’m still getting the same error.

Best regards.

JamesByun · August 15, 2024, 1:19pm

Hi, Mertcan,

Thank you for your update!

It’s interesting! So, did you also run nvm install 18.14.2?

If this doesn’t work, I have published my sample repository here. I tested this out, and I’m quite confident that it is working on my end.

Clone it.
(If you want auto-registration) Rename credentials.json.sample to credentials.json and fill in your credentials.
Run nvm install.
Run npm install.
Start with npm start.

I’m sorry to hear that it’s not working on your side, but let’s see how it goes!

By the way, Mertcan,

Just out of curiosity, have you considered the Forge platform? If you are at the very beginning stage of building your app, I’m quite certain it’s worth trying out Forge as well!

Looking forward to hearing about your progress.

James

MertcanKaraba · August 15, 2024, 2:39pm

Hi James,

Thank you so much for the update. I cloned the repo you created, modified my own credentials.json file, ran nvm install and then npm install. After that, I started the application with npm start, but I’m still getting the same error. I’m really curious about the cause of this issue. Also, I’m very grateful for all the effort you’ve put in.

I used the Forge platform and made a few improvements on it. However, for the property application I’m working on, Forge has a 30 value limit, which doesn’t meet my needs, so I had to switch to ACE.

Best regards.

JamesByun · August 15, 2024, 11:38pm

Hi, Mertcan!

Yeh, I am also so curious what the root cause is!

by the way, with the second screenshot, what is the log after that ? can you see some payload of incoming install lifecycle hook something like this ?

James

MertcanKaraba · August 16, 2024, 12:59pm

Hi James!

Yes i can see like this.

JamesByun · August 19, 2024, 8:40am

Hi Mertcan,

Thank you for checking. After reviewing all our conversations, I can’t identify any issues with the Connect framework itself.

However, there was one instance where a certain organization did not permit the use of ngrok. Perhaps you could consider some alternatives to ngrok?

It’s possible to run your Connect app without relying on the ngrok solution by using your own tunneling tool, such as Cloudflare Tunnel or Localtunnel.

Could you attempt this method as described here?

Please let us know how this goes.

Ah, one minor additional check, please drop which browser you are using.

Cheers!
James

Rahulsarkar · September 3, 2024, 12:44pm

Hello janes

I am facing the same issue. Could you please help me with that?

Thank you
Rahul

MertcanKaraba · September 3, 2024, 1:54pm

Hello @Rahulsarkar, @JamesByun,

I resolved the issue with npm build by updating the package.json scripts as follows:

"build-jsx-browser": "parcel build --log-level 1 --global __root_component --out-dir views views/*.jsx",
"build-jsx-node": "parcel build --log-level 1 --no-minify --target node --out-dir views/node views/*.jsx",
"build": "concurrently -i 'npm:build-*'"

These changes fixed the problem I was facing. I hope this solution might be helpful for you as well.

Rahulsarkar · September 3, 2024, 2:22pm

I have updated package.json file and run cmd
npm run build-jsx-browser,
npm run build-jsx-node,
npm run build

after that run npm start but still facing same issue

JamesByun · September 5, 2024, 3:04pm

Hi, @MertcanKaraba

Glad to here your one is resolved!
By the way, the package.json you mentioned seems exactly same as what atlas-connect new command for me.

James

JamesByun · September 5, 2024, 3:10pm

by the way, just curious @MertcanKaraba
were you setting up your hello-world page with *.jsx file ?

JamesByun · September 5, 2024, 3:28pm

Hi, @Rahulsarkar

Are you also running with *.jsx files for your views ?

if you keep getting the error, please try

delete package-lock.json (to start from the scratch)
rm -rf node_modules (to start from the scratch)
nvm use v18.14.2 (you would need nvm though if you don’t have)
npm install
npm run build
npm start

Rahulsarkar · September 6, 2024, 11:43am

Hi @JamesByun
I am running hbs
still getting same error after runing above cmd

MertcanKaraba · September 6, 2024, 12:27pm

Hi, @JamesByun
Yes, I were setting up with *.jsx file.