HTML export has too many inline code. CSP wont let it run

Archive
1
:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Surtarso

I exported a couple of games to HTML5 and there are MANY inline code on styles, scripts etc… is there a way to export with a more CSP friendly way?

Btw they work fine with inline code enabled.

I painfully removed all inline styles and scripts from the main html and moved to new css and js files, that made it advance a bit, now CSP is blocking something else… in the pre-built js file. May be something to do with wasm?

Uncaught (in promise) CompileError: call to WebAssembly.instantiateStreaming() blocked by CSP

adding " script-src ‘wasm-unsafe-eval’ " to the CSP rule seems to fix the issue, but as it is named… I just made CSP unsafe.

So the game is working… but the question remains…
Is there a way to export to HTML with CSP safe code? (no inline script/styles etc) or will I have to do this labor every time? =(

Surtarso | 2022-07-21 00:23

in case anyone has a similar problem trying to host html5 exports with inline CSP rules:

cut everything between <style></style> and paste in a new file “style.css”, then delete those 2 style tags from the html file.

cut the 3 “status-” inline style and paste on their respective ID in the css file you created

#status-progress{
   display:none;
}

add: <link type='text/css' rel="stylesheet" href="style.css"> inside you <meta> cluster.

now you have to remove the inline scripts… similarly, cut everything between the last <script> </script> tags and paste them in a new file “game.js”

change that same script tag to <script type='text/javascript' src="game.js"></script>

last but not least, you have to deal with both inline scripts on the status divs

delete the “oncontextmenu” inline statements inside the status div’s, open the pre-build .js that game created with the export and add these 2 lines to the top of the file:

document.getElementById('status-progress').addEventListener('oncontextmenu', function(e){e.preventDefault});
document.getElementById('status-indeterminate').addEventListener('oncontextmenu', function(e){e.preventDefault});

that should be default to be honest! web security people! <3
and you end up with and html file like this, CSP friendly =)

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
<head>
	<meta charset='utf-8' />
	<meta name='viewport' content='width=device-width, user-scalable=no' />
	<link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' />
	<link type='text/css' rel="stylesheet" href="style.css">
</head>
<body>
	<canvas id='canvas'>
		HTML5 canvas appears to be unsupported in the current browser.<br />
		Please try updating or use a different browser.
	</canvas>
	<div id='status'>
		<div id='status-progress'><div id ='status-progress-inner'></div></div>
		<div id='status-indeterminate'>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div id='status-notice' class='godot'></div>
	</div>

	<script type='text/javascript' src='pre-built-your-game.js'></script>
	<script type='text/javascript' src="game.js"></script>
</body>
</html>

Surtarso | 2022-07-21 01:10