The document discusses approaches to writing secure frontend code in the context of ReactJS. It begins by outlining common client-side vulnerabilities like XSS, including reflected, stored, and DOM-based XSS. It then discusses how to prevent vulnerabilities in ReactJS by escaping HTML, attributes, JS data, and JSON data. It also recommends using a whitelist of allowed attributes rather than a blacklist of forbidden ones. Finally, it outlines some simple rules for ReactJS like using safe user input by default, only unsafe input for special forms, allowing only known attributes, and not allowing inline attribute data.

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

3. CLIENT SIDE VULNERABILITIESCLIENT SIDE VULNERABILITIES
Smth what goes wrong in a client-side code
2

4. XSSXSS
3

5. XSSXSS
In a common cases is a type of WEB-attack where malicious code
injected in a client-side code
4

6. XSS TYPESXSS TYPES
Reflected
Stored
DOM-based
5

7. REFLECTED XSSREFLECTED XSS
Attack injection when malicious code has been injected
after single HTTP request
6

8. REFLECTED XSSREFLECTED XSS
onResponse: function(response) {
var url = document.location;
var username = getQueryParam(url, 'username');
var tpl = '<span>Hello {username} !</span>';
document.write(tpl.replace(/{username}/, username));
}
http://socialnetwork.com/UserSearch?query=asd%22%3Cscript%3Ealert(1)%3C/script%3E
7

9. REFLECTED XSSREFLECTED XSS
8

10. $.get('/search?query=' + query) {
success: function(user) {
$('.search-list')
.append('<div>username: ' + data.user.name + '</div>')
.append('<div>username: ' + data.user.email + '</div>')
}
failure: function(error) {
$('.search-list')
.html('<div>There is nothing found for query: ' + error.query + '</div>');
}
}
REFLECTED XSSREFLECTED XSS
9

11. asdasdasd"<script>alert(1)</script>"
.html('<div>There is nothing found for query: ' + error.query + '</div>');
REFLECTED XSSREFLECTED XSS
10

12. REFLECTED XSSREFLECTED XSS
11

13. STORED XSSSTORED XSS
Attack injection, when malicious code has
been stored on server in advance
12

14. STORED XSSSTORED XSS
Samy...
13

15. STORED XSSSTORED XSS
14

16. <script type="text/javascript">
$.get('user_list', function(data) {
var data = JSON.parse(data);
$.each(data, function(key, user) {
$('.list-group').append(
'<div class="user">' +
'<div>User Name: ' + user.name + '</div>' +
'<div>User e-mail: ' + user.email + '</div>'
'</div>'
);
});
});
</script>
STORED XSSSTORED XSS
15

17. STORED XSSSTORED XSS
16

18. STORED XSSSTORED XSS
17

19. DOM-BASED XSSDOM-BASED XSS
Unlike Reflected and Stored XSS, can work without
interaction with the server
18

20. http://bank.com/payment?backUrl=http://market.com"
DOM-BASED XSSDOM-BASED XSS
19

21. $(document).ready(function() {
$('#btn-back').attr('href', getURLParameterByName('backUrl'))
});
DOM-BASED XSSDOM-BASED XSS
20

22. DOM-BASED XSSDOM-BASED XSS
http://bank.com/payment?backUrl="<script>alert(1)</script>
&quot;&lt;script&gt;alert(1)&lt;/script&gt;
<a id="btn-back" href="&quot;&lt;script&gt;alert(1)&lt;/script&gt;">Back to Shop</a>
21
$('#btn-back').attr('href', getURLParameterByName('backUrl'))

23. http://bank.com/payment?backUrl=data:text/html;base64,PHNjcmlwdD5hbGVydCgxKTwvc2NyaXB0Pg==
<a id="btn-back" href="data:text/html;base64,PHNjcmlwdD5hbGVydCgxKTwvc2NyaXB0Pg==">Back to Shop</a>
atob('PHNjcmlwdD5hbGVydCgxKTwvc2NyaXB0Pg== ')
"<script>alert(1)</script>"
DOM-BASED XSSDOM-BASED XSS
Base64
22

24. HOW TO PROTECT MY SITE?HOW TO PROTECT MY SITE?
Escaping HTML
Escaping Attributes
Escaping JS data
Escaping JSON data
Escaping CSS data
23

25. ESCAPINGESCAPING
& --> &amp;
< --> &lt;
> --> &gt;
" --> &quot;
' --> &#x27;
/ --> &#x2F;
24

26. SAFE TEMPLATINGSAFE TEMPLATING
<div class="json-data">
<%= data.to_json %>;
</div>
btw, don't make such mistakes
25

27. DETECT KEYWORDSDETECT KEYWORDS
<div class="avatar">
<img alt={{avatar.name}} src={{avatar.image}}>
</div>
<div class="avatar">
<img alt= onerror=alert(1) src=>
</div>
avatar: {
name: ' onerror=alert(1)'
image: ''
}
avatar: {
name: 'Me in Italy'
image: '/images/aajkdshf2347jk/avatar.jpg'
}
Handlebars, XTemplate and some others...
26

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

30. REACT-JSREACT-JS
one more JS framework...
...but it uses .jsx
29

31. REACT-JSREACT-JS
componentDidMount: function() {
this.setState({
data: 'A long time ago in a galaxy far,<br/> far away...'
})
},
render: function () {
return (
<Article className="article">
{this.state.data}
</Article>
);
}
30

32. REACT-JSREACT-JS
31

33. REACT-JSREACT-JS
<div class="article" data-reactid=".0">
A long time ago in a galaxy far,&lt;br&gt; far away...
</div>
32

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

35. FACEBOOK TELLSFACEBOOK TELLS
function createMarkup() {
return {
__html: 'First · Second'
};
};
<div dangerouslySetInnerHTML={createMarkup()} />
34

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...
< == &lt; > == &gt;
36

38. REACT-JS ATTRIBUTESREACT-JS ATTRIBUTES
37

39. REACT-JS ATTRIBUTESREACT-JS ATTRIBUTES
<div data-reactid=".0">A long time ago &middot; in a galaxy far, &lt;br&#x2F;&gt; 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

41. REACT-JS ATTRIBUTESREACT-JS ATTRIBUTES
var HTMLDOMPropertyConfig = {
isCustomAttribute: RegExp.prototype.test.bind(
/^(data|aria)-[a-z_][a-zd_.-]*$/
),
Properties: {
/**
* Standard Properties
*/
accept: null,
acceptCharset: null,
accessKey: null,
action: null,
allowFullScreen: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE,
allowTransparency: MUST_USE_ATTRIBUTE,
alt: null,
async: HAS_BOOLEAN_VALUE,
autoComplete: null,
// autoFocus is polyfilled/normalized by AutoFocusMixin
// autoFocus: HAS_BOOLEAN_VALUE,
autoPlay: HAS_BOOLEAN_VALUE,
cellPadding: null,
cellSpacing: null,
charSet: MUST_USE_ATTRIBUTE,
checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
classID: MUST_USE_ATTRIBUTE,
40

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

43. <EndFrame onQuestions={this.doAnswer}>
<Title>
Thanx for your attention!
</Title>
</EndFrame>