So what I'm trying to do is when someone select an element of 'select' form, does something that has been defined on "showPost()" function on script section. and CSP is keep rejecting my operation :(

I've tried both CSP hash and CSP nonce. and both doesn't work.

If I apply 'unsafe inline' it works, so the function has no problem.

What should be wrong?

P.S. : I'm using custom CSS style inside the HTML(EJS) file, so I did CSP hash work on that too on CSP styleSrc setup. and it works just fine.

1. Error Message

2. My Select Form

3. Code

Part of HTML(EJS) File

<select class="form-select" aria-label="Order of Aboutme" id="aboutmeOrder" onchange="showPost()">
                <option selected>글 순서를 정해주세요..</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>

....
....
  <script nonce="example">
  function showPost(){
    var select = document.getElementById("aboutmeOrder").value;
    console.log(select);
  }
  </script>

Part of index.js FIle

const csp = require('helmet-csp');

app.use(helmet());
app.use(
    csp({
      directives: {
        defaultSrc: ["'self'"],
        styleSrc: ["'self' 'sha256-uts7zrnGYAKZNfvBc7PYcShvKP4t10vo5qemd5Yp0lc=' https://cdn.jsdelivr.net/"],
        scriptSrc: [`'self' 'sha256-RemzkHuAMqaMxa/UriyGSEioInZdZJpm6lnkGuugweU=' 'nonce-example' https://cdn.jsdelivr.net/`],
      },
    })
  );