Refused to execute inline script in CSP Error

[David Lee]

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;

[Ksawery Buczkowski]

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...

[Abraham - New Verve Consulting]

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

[Brandon Belikoff]

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

[Brandon Belikoff]

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

[Brian Moran]

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?