Search code examples
reactjsbuildcross-domaincreate-react-appcontent-security-policy

React app hosted on IPFS gives "default-src 'self'". 'connect-src' was not explicitly set, so 'default-src' is used as a fallback error

I have a react app here https://github.com/ChristianOConnor/spheron-react-api-stack. I'm trying to host it on IPFS. I deployed this with 2 main steps: 1) cd frontend, npm run build and 2) upload the build folder to pinata.cloud. Before it works on IPFS I had to make a few changes such as converting the paths in the manifest.json to include a ./, for example I changed "main.js": "/static/js/main.HASH_HERE.js", to "main.js": "./static/js/main.HASH_HERE.js". But 1 problem still remains.

The react site loads just fine.
enter image description here

But when I click the "click this to call API" button, I get this in my console.
enter image description here

The error is: Refused to connect to 'https://<MY API'S DOMAIN NAME>/hello' because it violates the following Content Security Policy directive: "default-src 'self'". Note that App.tsx: 17 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

I tried to fix this with a meta tag in the index.html file created in the root of the build directory. It looks like this now:

<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src https://<MY API'S DOMAIN NAME>/hello" />
    <meta charset="utf-8" />
    <link rel="icon" href="./favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="./logo192.png" />
    <link rel="manifest" href="./manifest.json" />
    <title>React App</title>
    <script defer="defer" src="./static/js/main.<HASH HERE>.js"></script>
    <link href="./static/css/main.<HASH HERE>.css" rel="stylesheet">
</head>

Notice <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src https://<MY API'S DOMAIN NAME>/hello" /> in the above code. I re-deployed this build folder to IPFS and got exactly the same error when I clicked the "click this to call API" button. So what am I doing wrong? I added default-src and connect-src to the meta tag.

Solution

  • The problem is likely that another Content-Security-Policy is set in a response header by another component. Adding another CSP in a meta tag can only make the total policy stricter. You will need to identify where the header is being set and modify or remove that header, not add a meta tag.