1. APPROACHAPPROACH
TO WRITING SECURE FRONTEND INTO WRITING SECURE FRONTEND IN
CONTEXT OF REACTCONTEXT OF REACT
Ivan Elkin
Application Security Expert, Qiwi
2. PLANPLAN
1. Client Side vulnerabilities
2. Prevention of vulners
3. Prevention of vulners in ReactJS
1
28. DETECT KEYWORDSDETECT KEYWORDS
var forbidden = [
'onerror',
'onmouseover',
'onclick'
];
if (attribute in forbidden) {
return false;
}
What about onblur, onchange, onselect, etc. ?
Black Lists
27
29. var allowed = [
'title',
'class',
'hidden',
....
];
if (attribute in allowed) {
add(attribute);
}
BE ON A WHITE SIDEBE ON A WHITE SIDE
28
34. REACT-JSREACT-JS
dangerouslySetInnerHTML
Improper use of the innerHTMLcan open you up to a
attack. Sanitizing user input for display is notoriously error-prone, and failure to properly sanitize is one
of the on the internet.
cross-site scripting
(XSS)
leading causes of web vulnerabilities
Google told me:
33
36. REACT-JSREACT-JS
/**
* @param {DOMElement} node
* @param {string} html
* @internal
*/
var setInnerHTML = function(node, html) {
node.innerHTML = html;
};
if you use dangerouslySetInnerHTML ...
w3c
returns a serialization of the node's children using
the HTML syntax
35
37. REACT-JSREACT-JS
/**
* @param {DOMElement} node
* @param {string} text
* @internal
*/
var setTextContent = function(node, text) {
node.textContent = text;
};
otherwise...
w3c
returns the text content of this node and its
descendants...
< == < > == >
36
39. REACT-JS ATTRIBUTESREACT-JS ATTRIBUTES
<div data-reactid=".0">A long time ago · in a galaxy far, <br/> far away...</div>
render: function () {
return (
;
}
<div class="article text-header text-bold" onmouseenter={this.fadeIn} onmouseleave={this.fadeOut}>
{this.state.data}
</div>
)
WAT !? 0_o
38
40. REACT-JS ATTRIBUTESREACT-JS ATTRIBUTES
SUPPORTED ATTRIBUTESSUPPORTED ATTRIBUTES
React supports all data-* and aria-* attributes as well as every attribute in the
following lists.
“ Note:
All attributes are camel-cased and the attributes class and for are
className and htmlFor, respectively, to match the DOM API specification.
39
42. REACT-JS SEVERAL SIMPLE RULESREACT-JS SEVERAL SIMPLE RULES
Use safe user input by default
Use unsafe input only for special forms
Allow only known attributes
Doesn't allow inline attribute data
41