当前位置：文江博客话题详情

如何在不违反CSP的情况下使用HTML onselect？

发布于 2025-01-11 04:11:44 字数 2085 浏览 0 评论 0原文

所以我想做的是，当有人选择 'select' 表单的元素时，执行脚本部分的“showPost()”函数中定义的操作。并且 CSP 一直拒绝我的操作:(

我已经尝试了 CSP hash 和 CSP nonce。但两者都不起作用。

如果我应用 'unsafe inline' 它会起作用，所以该函数没有问题

应该出什么问题了？

PS：我在 HTML(EJS) 文件中使用了自定义 CSS 样式，因此我也在 CSP styleSrc 设置上对其进行了 CSP 哈希工作，并且效果很好。

1. 错误信息

2. 我的选择表单

3.

HTML(EJS) 文件的代码部分

<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>

index.js 文件的部分

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/`],
      },
    })
  );

原文

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/`],
      },
    })
  );

分享到QQ

分享到微博