I'm learning javascript and trying to run some inline javascript code. I'm using the electron quick start guide and the code works fine before I try to add some inline javascript. Here's my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<script>
console.log("Hello World"); // <-- this is the line causing problems
</script>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>
When I try to load the webpage with the console.log("Hello World") added, I get the error:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-m/hGOmrcpR2CLf5ZFUFQux1kBtD2znXvM4R5xVpagmI='), or a nonce ('nonce-...') is required to enable inline execution.
The error message tells me that I can add an 'unsafe-inline keyword. Exactly how do I do that?
I have tried searching for examples, like this example on SO, or this guide on content-security-policy.com. But all the examples just tells me to add 'unsafe-inline' to the content security policy, without actually showing how that's done.
You can add unsafe-inline by changing your meta tag to the following. However I'd suggest keeping it the same and just load JS via a separate file since changing the tag adds some security risks. It's called unsafe for a reason.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'">
<title>Hello World!</title>
</head>
<body>
<script>
console.log("Hello World"); // <-- this is the line causing problems
</script>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>