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, jira product discovery, jpd premium, product management, idea management, product discovery, jira premium, product planning, atlassian community, product development, roadmap planning, product prioritization, feature management

Introducing Jira Product Discovery Premium ✨

Jira Product Discovery Premium is now available! Get more visibility, control, and support to build products at scale.

Learn more
AUG Leaders

Atlassian Community Events