![DETECT KEYWORDSDETECT KEYWORDS
var forbidden = [
'onerror',
'onmouseover',
'onclick'
];
if (attribute in forbidden) {
return false;
}
What about onblur, onchange, onselect, etc. ?
Black Lists
27](https://image.slidesharecdn.com/43534ac8-3d66-4952-9055-4ae21f574b31-161116210957/85/mjs-28-320.jpg)
![var allowed = [
'title',
'class',
'hidden',
....
];
if (attribute in allowed) {
add(attribute);
}
BE ON A WHITE SIDEBE ON A WHITE SIDE
28](https://image.slidesharecdn.com/43534ac8-3d66-4952-9055-4ae21f574b31-161116210957/85/mjs-29-320.jpg)
![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](https://image.slidesharecdn.com/43534ac8-3d66-4952-9055-4ae21f574b31-161116210957/85/mjs-41-320.jpg)
mjs
- 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
- 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
- 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
- 13. STORED XSSSTORED XSS Attack injection, when malicious code has been stored on server in advance 12
- 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
- 19. DOM-BASED XSSDOM-BASED XSS Unlike Reflected and Stored XSS, can work without interaction with the server 18
- 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> "<script>alert(1)</script> <a id="btn-back" href=""<script>alert(1)</script>">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 & --> & < --> < > --> > " --> " ' --> ' / --> / 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
- 33. REACT-JSREACT-JS <div class="article" data-reactid=".0"> A long time ago in a galaxy far,<br> 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... < == < > == > 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
- 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>