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;
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Also having a issue with this with Forge and Custom UI. @Brian Moran Did you find a solution to this?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Update: had the permissions in the wrong place in my yml file. Fixing that resolved my issue.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.