web-dev-qa-db-fra.com

motif d'entrée = '[a-zA-Z]' ne fonctionne pas dans l'application React

Ce sur quoi j'ai travaillé est un texte input qui réduit <option> dans un <select> lorsque l'utilisateur le tape. Cela fonctionne, mais je me préoccupe maintenant de la sécurité, de ce qu'un utilisateur transmet dans la variable input et des entrées malveillantes potentielles.

J'ai pensé que je pouvais faire quelque chose comme <input placeholder='[a-zA-Z]' />, mais cela permet toujours de saisir d'autres caractères dans la zone de texte.

Qu'est-ce que je fais de mal ici, et quelle serait une alternative qui permettrait de n'inscrire que des caractères alphanumériques?

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>
    ); 
}
javascriptregexhtml5reactjsreact-redux
7
sockpuppet

C'est facile. Vous:

  1. Supprimez l'attribut pattern.
  2. Enregistrez votre méthode onInputChange pour les événements input à la place des événements change (onInput={event => this.onInputChange(event.target.value)}).
  3. Nettoyez la valeur reçue dans la onInputChange avant de changer l'état.
2
Luka Žitnik

Donc, vous avez actuellement la possibilité de réduire les options du <select> au fur et à mesure que l'utilisateur tape, et maintenant, votre préoccupation est d'accroître la sécurité en limitant ce que l'utilisateur peut soumettre en entrée. 

La réponse à cette préoccupation est que il n’est pas possible de sécuriser les entrées avec une validation côté client; cela doit être fait avec une validation côté serveur . 

Les contrôles de sécurité côté client peuvent facilement être contournés. L'entrée doit être vérifiée à la réception par le serveur afin de s'assurer qu'elle n'est pas malveillante. 

0
Marathon55