React app served with express and helmet cannot make API requests - node.js

Question

I am serving a react app build using express.
const root = path.join(__dirname, 'build/');
app.use(express.static(root));
app.use((req, res, next) => {
if (req.method === 'GET' && req.accepts('html') && !req.is('json') && !req.path.includes('.')) {
res.sendFile('index.html', { root });
} else next();
});
Everything works as intended. However as soon as i add helmet (NOT react-helmet) to the express app, I get issues (styles and scripts didn't load).
After searching several resources I was able to come up with a solution to make it work.
The below code shows the fix i did to make the styles and scripts load.
app.use(helmet());
app.use(helmet.contentSecurityPolicy({
defaultSrc: [
'\'self\'',
'https://api.domain.tld/*',
'https://domain.tld',
],
styleSrc: [
'\'self\'',
'\'unsafe-inline\'',
'https://*.googleapis.com',
'https://api.domain.tld/*',
'https://domain.tld',
],
scriptSrc: [
'\'self\'',
'\'unsafe-inline\'',
'https://api.domain.tld/*',
'https://domain.tld',
],
contentSrc: [
'\'self\'',
'\'unsafe-inline\'',
'https://api.domain.tld/*',
'https://domain.tld',
],
}));
Additionally I also included INLINE_RUNTIME_CHUNK=false in the .env file.
The issue I have currently is that the API calls I am making to api.domain.tld does not work. It gets blocked and the following errors show up on firefox.
Content Security Policy: The page’s settings blocked the loading of a resource at https://api.domain.tld/endpoint (“default-src”).
Chrome shows the following error.
Refused to connect to 'https://api.domain.tld/endpoint' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
Please note that the react app is on domain.tld and the API is on api.domain.tld
How can if fix this issue so I can make API calls?

Answer 1

There is 2 issues:
Do fix a syntax error: contentSrc: -> connectSrc:
CSP spec does not allow using * (wildcard) in the path-part, therefore do fix 'https://api.domain.tld/* -> 'https://api.domain.tld/'. Also in the path-part you can use:
a folder name: 'https://api.domain.tld/real_path_here/' (with trailing slash /) - will allow any subfolders and any files in specified folder and subs.
file name: 'https://api.domain.tld/endpoint' or 'https://api.domain.tld/some_path/script.js' (without trailing slash /) - will allow specified file_name only.

Answer 2

According to the Documentation, You should specify sources inside the directives
app.use(helmet.contentSecurityPolicy({
useDefaults: false, // you can change it to `true` if you want.
directives:{
defaultSrc: [
'\'self\'',
'https://api.domain.tld/',
'https://domain.tld',
],
styleSrc: [
'\'self\'',
'\'unsafe-inline\'',
'https://*.googleapis.com',
'https://api.domain.tld/',
'https://domain.tld',
],
'image-src': [
'\'self\'',
'\'unsafe-inline\'',
'data:',
'https://api.domain.tld/',
'https://domain.tld',
],
scriptSrc: [
'\'self\'',
'\'unsafe-inline\'',
'https://api.domain.tld/*',
'https://domain.tld',
],
contentSrc: [
'\'self\'',
'\'unsafe-inline\'',
'https://api.domain.tld/',
'https://domain.tld',
],
}
}));
Update
To fix the image not loading issue, Add the following.
imageSrc: [
'\'self\'',
'\'unsafe-inline\'',
'data:',
'https://api.domain.tld/',
'https://domain.tld',
],