Question

我一直在努力的是一个文字input，可以在用户输入的<option>缩小<select>。它正在运行，但我现在关注的是安全性，用户传递给input的内容以及潜在的恶意条目。

我想我可以做<input placeholder='[a-zA-Z]' />之类的事情，但它仍然允许在文本框中输入其他字符。

我在这里做错了什么，以及只允许输入字母数字的替代方案？

onInputChange(term) {
    this.setState({ term });
}

renderOptionsSelect(term) {
    return _.map(this.props.pos_list, p => {
        var searchTerm = this.state.term.toLowerCase();
        if (p.pos_code.toLowerCase().match(searchTerm)) {
            return (
                <option key={p.pos_code} value={p.pos_code}>{p.pos_code}</option>
            );                        
        }
    });
}

// render the main element of the container
render() {
    return (
        <div className='panel panel-default'>
            <div className='panel-heading'>
                <h4><strong>Basic Query</strong></h4>
            </div>

            <div className='panel-body'>
                <input 
                    pattern='[a-zA-Z]'
                    className='form-control' 
                    placeholder='Enter Keyword or Position Code' 
                    value={this.state.term}
                    onChange={event => this.onInputChange(event.target.value)}
                />

                <hr />
                <h4>Position:</h4>
                <select className='form-control'>
                    <option></option>
                    {this.renderOptionsSelect()}
                </select>
                <br />
                <h4>Data Cut:</h4>
                <select className='form-control' disabled={true} />

            </div>
        </div>
    ); 
}

Answer 1

这很容易。你：

删除模式属性。
为onInputChange个活动而不是input个活动（change）注册onInput={event => this.onInputChange(event.target.value)}方法。
在更改状态之前清除onInputChange中收到的值。

Answer 2

因此，您目前的功能是缩小用户键入的<select>选项，现在您的关注点是通过限制用户可以作为输入提交的内容来提高安全性。

这个问题的答案是无法通过客户端验证来保护输入;必须使用服务器端验证。

可以轻松绕过客户端安全检查。服务器收到输入时必须检查输入，以确保它不是恶意的。

Answer 3

在此处详细查看我的答案： https://stackoverflow.com/a/68052651/13607767

这里是简要的-

状态

const [tagInputVal, setTagInputVal] = useState("");

输入标签

<input id="tag-input" type="text" placeholder="Add a tag" value={tagInputVal} onChange={(e) => onChangeTagInput(e)}></input>

处理函数

function onChangeTagInput(e) {
    setTagInputVal(e.target.value.replace(/[^a-zA-Z\d]/ig, ""));
}

输入模式=＆＃39; [a-zA-Z]＆＃39;在React应用程序中不起作用

3 个答案: