Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,293,800
Community Members
 
Community Events
165
Community Groups

Refused to execute inline script in CSP Error

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

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

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

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

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

0 votes

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

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you