Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

csp_nonce() is empty

See original GitHub issue

Hi, I might be doing something really stupid but I can’t find much documentation or examples, other than the main page on GitHub and the example about CSP.

My issue is that csp_nonce() is evaluating to an empty string. What am I doing wrong?

I include the relevant parts of my code (it is a much bigger project so I am trying to post only relevant parts, but if you need anything more, please let me know).

<!doctype html>
<html lang="en">
<head>
    [...]
    <link href="/static/css/main.68b8b5e7.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>[...] </script>
<script src="/static/js/2.389a3736.chunk.js" nonce="{{ csp_nonce() }}"></script>
<script src="/static/js/main.f39b6155.chunk.js" nonce="{{ csp_nonce() }}"></script>
</body>
</html>

While the CSP header does contain the nonce:

Content-Security-Policy | style-src ‘self’ https://fonts.googleapis.com ‘nonce-XleICcqjjVeXsgKoEn6gLA’; font-src ‘self’ https://fonts.gstatic.com; img-src ‘self’ data:; script-src ‘self’ ‘nonce-XleICcqjjVeXsgKoEn6gLA’

Flask app:

man = Talisman()
man.init_app(app, content_security_policy={
            "style-src": ["\'self\'", 'https://fonts.googleapis.com'],
            "font-src": ["\'self\'", 'https://fonts.gstatic.com'],
            "img-src": "'self' data:",
            "script-src":  ["\'self\'"],
        }, content_security_policy_nonce_in=['script-src', 'style-src']) 

@app.route('/')
def index():
       return render_template('index.html')

Page in the browser (notice how the nonce is empty):

<html lang="en">
<head>
    <link href="/static/css/main.68b8b5e7.chunk.css" rel="stylesheet">
<style data-jss="" data-meta="MuiGrid" nonce=""> [...]</style>
<style data-jss="" data-meta="MuiBox" nonce=""></style>
<style data-jss="" data-meta="MuiBox" nonce=""></style>
<style data-jss="" data-meta="makeStyles" nonce="">[...]</style>
</head>
<body>
<div id="root"></div>
<script nonce="">[...]</script>
<script src="/static/js/2.389a3736.chunk.js" nonce=""></script>
<script src="/static/js/main.f39b6155.chunk.js" nonce=""></script>
</body></html>