Forums

Articles
Create
cancel
Showing results for 
Search instead for 
Did you mean: 

Refused to execute inline script in CSP Error

David Lee June 2, 2021 edited

Hi, Everyone.
I'm tunneling Forge and React to develop an add-on.

Manifest.yml

resources:
- key: main
path: static/hello-world/build
tunnel:
port: 3000

 

However, using the Form tag from @atlaskit/form library results in the following error:

Refused to execute inline script because it violates the following Content Security Policy directive:
"script-src 'self' https://forge.cdn.prod.atlassian-dev.net". Either the 'unsafe-inline' keyword, a hash
('sha256-QAj9SgqS0tkqFXsMg6gbHzN3KfNnrPW0N0FCdMzN3MI='), or a nonce ('nonce-...') is required to
enable inline execution.

CSP violation detected for 'script-src-elem' while serving content at http://localhost:8001/
For an app to share data with external resources or use custom CSP, follow the steps in: http://go.atlassian.com/forge-content-security-and-egress-controls

 

So I had been add the following to the meta tag.

<meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline'" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'" />

However, the error has not been resolved, so I added the following to Manifest.yml by referring to the [Permission document](https://developer.atlassian.com/platform/forge/manifest-reference/permissions/#content-permissions).

permissions:
content:
styles:
- 'unsafe-inline'
scripts:
- 'unsafe-inline'


And we proceeded with the deployment and installation.

forge deploy -e development
forge install --upgrade


And I tried a lot, but I couldn't solve it. 😥
How can I solve it?

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import '@atlaskit/css-reset';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

App.js

import React, { useEffect, useState } from 'react';
import Button from '@atlaskit/button';
import TextField from '@atlaskit/textfield';
import Form, { Field } from '@atlaskit/form';

import { invoke } from '@forge/bridge';


function App() {

const [formData, setFormData] = useState(null);

useEffect(() => {
invoke("getText", {}).then((data) => {
document.getElementById('textField').value = data;
setFormData(data);
});
}, [])

const onClick = async (e) => {
e.preventDefault();
const textField = document.getElementById('textField').value;
invoke("setText", { textField }).then((data) => console.log(`setText : ${data}`));
}

return (
<Form>
<TextField id='textField' style={styles.textField}></TextField>
<Button type="submit" appearance="primary" onClick={onClick} style={styles.button}>
Submit
</Button>
</Form>
);
}

const styles = {
button: {
marginTop: 10
}
}

export default App;

 

4 answers

3 votes
Ksawery Buczkowski
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
April 28, 2022

I had this issue, modified the Manifest.yml then ran 
`npm run build`
in the static/app folder 
After that re-run the `forge tunnel` and it worked...

0 votes
Abraham - New Verve Consulting
Contributor
May 13, 2022

I can confirm @Ksawery Buczkowski's  answer. Thanks Ksawery!

After making sure you have added the relevant permissions to manifest.yml:

permissions:
content:
styles:
- 'unsafe-inline'
scripts:
- 'unsafe-inline'

You need to re-deploy, upgrade app and re-build the static content as follows (It didn't accept the changes for me without doing that):

modify manifest.yml as above and save

run forge deploy

run forge install --upgrade

in your static folder (static/app or whatever name you gave it), rebuild with `npm run build`

run forge tunnel and open the app in your browser

 

PS: this (the permissions for the inline stuff when using Atlaskit components in custom UI) is a very important detail explained here but easily  skippable if you are not paying extra attention: https://developer.atlassian.com/platform/forge/manifest-reference/permissions/#content-permissions

0 votes
Brandon Belikoff
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
April 21, 2022

Also having a issue with this with Forge and Custom UI. @Brian Moran Did you find a solution to this?

Brandon Belikoff
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
April 21, 2022

Update: had the permissions in the wrong place in my yml file. Fixing that resolved my issue.

0 votes
Brian Moran
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
March 4, 2022

I also am having issues with this.  Using Forge + Custom UI (which is leveraging create-react-app) + Tunneling.  Is there a working example of this?

Suggest an answer

Log in or Sign up to answer
TAGS
atlassian, loom, loom for training, loom for teaching, video training, async learning, online education, screen recording, loom tutorials, loom use cases, atlassian learning, team training tools, instructional video, virtual training tools

🛗 Elevate Your Training and Enablement with Loom

Join us June 26, 11am PT for a webinar with Atlassian Champion Robert Hean & Loom’s Brittany Soinski. Hear tips, stories, and get your burning questions answered. Learn how Loom makes training and enablement easier. Don’t miss it!

Register today
AUG Leaders

Atlassian Community Events