Attention | Topic was automatically imported from the old Question2Answer platform. | |
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