0 votes

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.

in Engine by (367 points)

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? =(

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>

Please log in or register to answer this question.

Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to [email protected] with your username.