Content-Security-Policy error 'Refused to execute inline script because it violates the following Content Security Policy directive': how do I fix it without 'unsafe-inline'?

Cause: if a policy contains script-src (or default-src), inline JavaScript is blocked unless explicitly allowed. That covers inline script elements, inline event handlers such as onclick="..." and javascript: URLs; eval-style code is blocked too. The console error names the violated directive. Fix (best first): 1. Move code into external script files served from an origin your policy allows (for example script-src 'self'), and replace inline handlers with addEventListener. 2. For inline scripts you must keep, use a nonce: generate an unpredictable value for every response, send Content-Security-Policy: script-src 'nonce-<value>' and add nonce="<value>" to each trusted script element. Insert it through your templating layer, never in a static file, and never reuse a value across responses. 3. For static pages, use a hash: put the base64 SHA-256 (or 384/512) of the exact script text in the policy. Any whitespace change breaks the hash. Inline event handlers need 'unsafe-hashes', so refactoring them out is better. 4. Avoid 'unsafe-inline': it re-allows every inline script, including attacker-injected ones, and it is ignored anyway when a nonce or hash is present in the same directive. 5. Roll out safely with Content-Security-Policy-Report-Only first; it reports violations without blocking, then switch to the enforcing header. 6. If a framework or tag manager injects scripts, check its CSP guidance; with 'strict-dynamic', trust propagates from a nonce'd script to the scripts it loads, and allowlists are ignored. Verify: reload with the console open and no CSP violations appear, the page still works, and a quick test shows an un-nonced injected inline script is still refused. Sources: https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP