With index.html :
<html>
<head>
<meta charset="UTF-8">
<meta
http-equiv="Content-Security-Policy" content-src='static2.sharepointonline.com';
script-src-elem 'static2.sharepointonline.com';
img-src 'static2.sharepointonline.com';
style-src 'static2.sharepointonline.com';
font-src 'https://static2.sharepointonline.com;
connect-src https: http:"
>
</head>
<body>
<div id="app" style="height: 100%;" style-src="../../assets/fonts/" 'self' data:></div>
</body>
</html>
In index.tsx :
import { initializeIcons } from "@fluentui/react/lib/Icons"
initializeIcons("https://static2.sharepointonline.com/files/fabric/assets/icons/", { disableWarnings: true })
I get this message:
Refused to load the font '' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.
"@fluentui/react": "^8.80.0"
"react": "^18.1.0"
node: v16.15.1
O.S. : Ubuntu 20.04
Update 1)
I've found in the Electron docs this suggestions:
https://www.electronjs.org/docs/v14-x-y/tutorial/security#csp-http-header
I then added this snippet into main :
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
callback({
responseHeaders: {
...details.responseHeaders,
'Content-Security-Policy': ['default-src \'none\'', 'script-src-elem \'static2.sharepointonline.com\'']
}
})
})
But I get this errors:
Refused to load the script 'http://localhost:3000/main_window/index.js' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
Refused to load the script 'http://localhost:3000/main_window/index.js' because it violates the following Content Security Policy directive: "script-src-elem 'static2.sharepointonline.com'
Update 2):
Now in index.html :
<meta
http-equiv="Content-Security-Policy" content-src=static2.sharepointonline.com;
script-src-elem static2.sharepointonline.com;
img-src static2.sharepointonline.com;
style-src static2.sharepointonline.com;
font-src https://static2.sharepointonline.com;
connect-src https: http:"
>
Here: https://content-security-policy.com/#source_list
I read : * : Wildcard, allows any URL except data: blob: filesystem: schemes.
So... I tried to put in main:
session.defaultSession.webRequest.onHeadersReceived((details,
callback) => {
callback({
responseHeaders: {
...details.responseHeaders,
'Content-Security-Policy': ['default-src \'*\'', 'style-src-
attr \'*\'', 'script-src-elem \'*\'' ]
}
})
})
the previous error disappear but the app doesnt work and I get these two errors, which I tried, without succeeding, to solve :
Update 3)
As in https://webpack.js.org/guides/csp/#examples I tried to set __webpack_nonce__ in webpack.main.config.js (I'm using Electron Forge ) .
I've put in this way:
const rules = require('./webpack.rules');
const plugins = require('./webpack.plugins');
rules.push({
test: /\.ts$/,
use: [{ loader: 'ts-loader' }],
});
module.exports = {
/**
* This is the main entry point for your application, it's the
first file
* that runs in the main process.
*/
entry: {
main: './src/main/index.ts',
},
__webpack_nonce__ =
'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=',
// Put your normal webpack config below here
module: {
//rules: require('./webpack.rules'),
rules,
},
plugins: plugins,
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
fallback: {
fs: false,
'stream': require.resolve('stream-browserify'),
'buffer': require.resolve('buffer'),
'util': require.resolve('util'),
'assert': require.resolve('assert'),
'http': require.resolve('stream-http'),
'url': require.resolve('url'),
'https': require.resolve('https-browserify'),
'os': require.resolve('os-browserify'),
'path': require.resolve('path-browserify')
},
},
};
In index.html :
session.defaultSession.webRequest.onHeadersReceived((details,
callback) => {
callback({
responseHeaders: {
...details.responseHeaders,
//'Content-Security-Policy': ['default-src \'*\'', 'style-src-attr \'*\'', 'script-src-elem \'*\'' ]
'Content-Security-Policy0: [
'default-src \'nonce-c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=\'',
'style-src-attr \'nonce-c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=\'',
'script-src-elem \'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=\''
]
}
})
})
But I get
An unhandled error has occurred inside Forge:
Invalid shorthand property initializer
/home/raphy/FPlayground/webpack.main.config.js:18
__webpack_nonce__ =
'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=',
SyntaxError: Invalid shorthand property initializer
Update 4)
Now... I'm having a real strange error and situation.
With in main:
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
callback({
responseHeaders: {
...details.responseHeaders,
'Content-Security-Policy': [
'default-src \'nonce-c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=\'',
'style-src-attr \'nonce-c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=\'',
'script-src-elem \'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=\''
]
}
})
in webpack.plugins.js :
new webpack.LoaderOptionsPlugin({
options: {
__webpack_nonce__ : 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=',
},
}),
and in index.html :
<meta http-equiv="Content-Security-Policy"
content-src 'nonce-c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';
script-src-elem 'nonce-c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';
img-src 'nonce-c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';
style-src 'nonce-c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';
font-src 'nonce-c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';
connect-src https: http:"
>
Where to specify Content-Security-Policy? In package.json as suggested here: React Electron App - React Leaftlet Content Security Policy errors ? or in webpack.plugins.js ?
How to make it work?
