The issue is caused by CSP blocking inline event handlers (like onclick="") and inline styles (like style="") unless you explicitly allow them. Since you are using nonces for script-src and style-src, 'unsafe-inline' is ignored, and hashes do not apply to event handlers or style attributes unless you use 'unsafe-hashes'.
Why the Flux Toast can't be closed:
Flux (or your Toast implementation) likely uses inline event handlers (e.g., <button onclick="closeToast()">X</button>) or sets inline styles (e.g., element.style.display = 'none'). With your current CSP, these are blocked.
Solution
1. Avoid Inline Event Handlers
Change your Toast component to use event listeners in JavaScript, not inline HTML attributes.
Bad (blocked by CSP):
<button onclick="closeToast()">X</button>
Good (allowed by CSP):
<button id="toast-close">X</button>
<script nonce="BHEGmdju4S7Ht635wxYdsWZjbJtIUyz0">
document.getElementById('toast-close').addEventListener('click', function() {
// Close the toast
});
</script>
Make sure the <script> tag has the correct nonce, matching your CSP.
2. Avoid Inline Styles
Do not use style="..." attributes. Instead, use CSS classes and toggle them via JavaScript.
Bad (blocked by CSP):
<div id="toast" style="display: none;">...</div>
Good (allowed by CSP):
<style nonce="BHEGmdju4S7Ht635wxYdsWZjbJtIUyz0">
.hidden { display: none; }
</style>
<div id="toast" class="hidden">...</div>
<script nonce="BHEGmdju4S7Ht635wxYdsWZjbJtIUyz0">
// To show the toast
document.getElementById('toast').classList.remove('hidden');
// To hide the toast
document.getElementById('toast').classList.add('hidden');
</script>
3. If Using a JS Framework
If you are using a framework (like Vue, React, Alpine, etc.), make sure your build output does not use inline event handlers or inline styles. Most modern frameworks do not, but double-check.
4. If You Can't Change the Library
If Flux or your Toast library is injecting inline event handlers or styles, you have a few options:
- Patch or fork the library to use event listeners and CSS classes.
- Switch to a CSP-compatible toast library.
- As a last resort, you can add
'unsafe-hashes'to your CSP and specify the hashes of the inline event handlers/styles, but this is cumbersome and not recommended for dynamic content.
5. Example CSP Update (if using hashes)
If you absolutely must allow a specific inline handler, you can add 'unsafe-hashes' and the correct hash to your script-src:
script-src 'self' 'nonce-BHEGmdju4S7Ht635wxYdsWZjbJtIUyz0' 'unsafe-hashes' 'sha256-...';
But again, this is not recommended for dynamic content.
Summary
- Refactor your Toast code to avoid inline event handlers and styles.
- Use external scripts with nonces and CSS classes for show/hide logic.
- Make sure your CSP nonces match those in your HTML.
- If using a third-party library that can't be changed, consider alternatives.
If you share your Toast component code, I can help you refactor it for CSP compliance.