web-dev-qa-db-ja.com

入力パターン= '[a-zA-Z]'はReactアプリケーションで機能していません

私が取り組んでいるのは、ユーザーが入力する<option>の<select>を絞り込むテキストinputです。それは機能していますが、私の懸念はセキュリティ、ユーザーが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>
    ); 
}
javascriptregexhtmlreactjsreact-redux
10
eox.dev

簡単だ。君は：

  1. パターン属性を削除してください。
  2. onInputChangeイベント（onInput={event => this.onInputChange(event.target.value)}）ではなく、inputイベントのchangeメソッドを登録します。
  3. 状態を変更する前に、onInputChangeで受信した値をクリーンアップします。
2
Luka Žitnik

現在、ユーザーが入力する<select>のオプションを絞り込む機能があり、ユーザーが入力として送信できるものを制限することにより、セキュリティを強化することが懸念されています。

この懸念への答えはクライアント側の検証で入力を保護することは不可能です。サーバー側の検証で行う必要がありますです。

クライアント側のセキュリティチェックは簡単に回避できます。悪意のないものであることを確認するために、サーバーが入力を受け取ったときに入力をチェックする必要があります。

0
Josh Withee