Shields Up! Securing React Apps

Information about Shields Up! Securing React Apps

Published on December 10, 2017

Author: zak89s

Source: slideshare.net

Content

1. SECURING REACT APPS SHIELDS UP December 8, 2017

2. SHIELDS UP - SECURING REACT APPS ABOUT US ▸ Me: Zachary Klein ▸ Based in St Louis, MO ▸ Web dev at Object Computing, ▸ Specialize in Grails & frontend development

3. SHIELDS UP - SECURING REACT APPS ABOUT US ▸ My company: Object Computing, Inc ▸ Based in St Louis, MO ▸ Consulting and training provider (24+ years experience) ▸ Corporate sponsor to the Grails framework and Groovy language ▸ https://objectcomputing.com

4. SHIELDS UP - SECURING REACT APPS ABOUT US ▸ Grails: A dynamic, flexible web application framework ▸ Built on top of Spring Boot ▸ First-class support for REST APIs ▸ Profiles for building applications using React, Angular, Webpack, and RESTful backends ▸ Powerful persistence layer with GORM - supports Hibernate, MongoDb, Neo4J, GraphQL, and more ▸ Rich plugin ecosystem: 200+ plugins and growing ▸ Active community and commercial support available. ▸ https://grails.org

5. SHIELDS UP - SECURING REACT APPS

6. HTTP://START.GRAILS.ORG SHIELDS UP - SECURING REACT APPS

7. HTTP://GUIDES.GRAILS.ORG SHIELDS UP - SECURING REACT APPS

8. SHIELDS UP - SECURING REACT APPS ABOUT US ▸ You: ▸?

9. SHIELDS UP - SECURING REACT APPS OVERVIEW ▸ Security in the world of SPAs ▸ Client-side security ▸ Cross-site-scripting Prevention ▸ Role-based Routing ▸ Server-side security* ▸ Stateless Authentication ▸ Third-party authentication

10. SHIELDS UP - SECURING REACT APPS WHAT ARE WE PREVENTING? ▸ Unauthorized access to data ▸ Unauthorized access to UI ▸ Unexpected input

11. SHIELDS UP - SECURING REACT APPS WHAT ARE WE PREVENTING? ▸ Unauthorized access to data ▸ API authentication ▸ Local storage ▸ Unauthorized access to UI ▸ Unexpected input

12. SHIELDS UP - SECURING REACT APPS WHAT ARE WE PREVENTING? ▸ Unauthorized access to data ▸ API authentication ▸ Local storage ▸ Unauthorized access to UI ▸ Role-based Routing ▸ Unexpected input

13. SHIELDS UP - SECURING REACT APPS WHAT ARE WE PREVENTING? ▸ Unauthorized access to data ▸ API authentication ▸ Local storage ▸ Unauthorized access to UI ▸ Role-based Routing ▸ Unexpected input ▸ Cross-site scripting (XSS)

14. SHIELDS UP - SECURING REACT APPS WHAT ARE WE PREVENTING? ▸ Unauthorized access to data ▸ API authentication ▸ Local Storage ▸ Unauthorized access to UI ▸ Role-based Routing ▸ Unexpected input ▸ Cross-site scripting (XSS)

15. SHIELDS UP - SECURING REACT APPS WHAT ARE WE PREVENTING? ▸ Unauthorized access to data ▸ API authentication ▸ Local Storage ▸ Unauthorized access to UI ▸ Role-based Routing ▸ Unexpected input ▸ Cross-site scripting (XSS)

16. SHIELDS UP - SECURING REACT APPS CROSS SITE SCRIPTING & REACT ▸ React is XSS-safe by default ▸ Potential loopholes - href, formaction ▸ Server-side rendered content ▸ dangerouslySetInnerHTML

17. SHIELDS UP - SECURING REACT APPS CROSS SITE SCRIPTING & REACT ▸ React is XSS-safe by default ▸ Potential loopholes - href, formaction ▸ Server-side rendered content ▸ dangerouslySetInnerHTML ▸ Third-part JavaScript

18. SHIELDS UP - SECURING REACT APPS LOCAL STORAGE ▸ Local storage by design is only available to the same domain ▸ If an XSS attack is successful, storage is compromised ▸ Alternative is to use cookies with secure & httpOnly flags for storage ▸ But… cookies are vulnerable to Cross-Site-Request-Forgery attacks ▸ https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs- html5-web-storage ▸ Node CSRF Token generator: https://www.npmjs.com/package/csurf

19. SHIELDS UP - SECURING REACT APPS CROSS SITE SCRIPTING & REACT DEMO

20. SHIELDS UP - SECURING REACT APPS ROLE-BASED AUTHORIZATION & ROUTING ▸ Routing allows SPAs to expose “URLS” within the app ▸ Most popular JavaScript frameworks either include a router or support third-party libraries ▸ React-Router, Ng-Router, UI-Router, Vue-Router, etc ▸ Based on the URL, query params, and other criteria, different content will be rendered ▸ Either hash-based history or HTML 5 browser history http://myapp.com/#/my/route http://myapp.com/my/route

21. SHIELDS UP - SECURING REACT APPS ROLE-BASED AUTHORIZATION & ROUTING ▸ User authorization vs authentication ▸ Some content should only be available to certain users ▸ E.g, admin screens, payroll management… ▸ Resources need to be secured at the server ▸ UI functionality and routes may still need to be secured

22. SHIELDS UP - SECURING REACT APPS ROLE-BASED AUTHORIZATION & ROUTING ▸ Simple Approach ▸ Store current user roles in state ▸ Wrap routes/components in a container component ▸ Container component accepts list of required roles & conditionally renders component

23. SHIELDS UP - SECURING REACT APPS ROLE-BASED AUTHORIZATION & ROUTING import React from ‘react' import { array, bool } from ‘prop-types‘ const Authorized = {roles, allowedRoles, requireAll, children} => { const matchesRoles = required => { roles.indexOf(required) >= 0; } const show = requireAll ? allowedRoles.every(matchesRoles) : allowedRoles.some(matchesRoles); return show ? children : null } Authorized.propTypes = { roles: array, allowedRoles: array, requireAll: bool }; export default Authorized;

24. SHIELDS UP - SECURING REACT APPS WITH REDUX import React from ‘react’ import {connect} from ‘react-redux‘ const Authorized = {roles, allowedRoles, requireAll, children} => { const matchesRoles = required => { roles.indexOf(required) >= 0; } const show = requireAll ? allowedRoles.every(matchesRoles) : allowedRoles.some(matchesRoles); return show ? children : null } //.. const mapStateToProps = (state) => { return { allowedRoles: state.user.roles } }; Authorized = connect(mapStateToProps, null)(RequiresRole); export default Authorized;

25. SHIELDS UP - SECURING REACT APPS ROLE-BASED AUTHORIZATION & ROUTING <Authorized allowedRoles={[‘ROLE_ADMIN', 'ROLE_ADMIN', 'ROLE_USER']}> <Profile user={user} /> </Authorized> <Authorized allowedRoles={['ROLE_ADMIN', 'ROLE_MANAGER']}> <ManageEmployees /> </Authorized> <Authorized allowedRoles={['ROLE_ADMIN', ‘ROLE_MANAGER']} requireAll={true}> <ManageDatabase /> </Authorized>

26. SHIELDS UP - SECURING REACT APPS ROLE-BASED AUTHORIZATION & ROUTING ▸ Advanced Approach ▸ Encapsulate role evaluation in a Higher Order Component ▸ Slightly more complex to implement ▸ More reusable code

27. SHIELDS UP - SECURING REACT APPS HIGHER ORDER COMPONENTS ▸ Not a “true” component ▸ “… a function that takes a component and returns a new component.” (React docs) ▸ Used to avoid cross-cutting concerns in components (e.g., accessing external data stores, such as Redux)

28. SHIELDS UP - SECURING REACT APPS HIGHER ORDER COMPONENTS // This function takes a component... function withExternalLogic(WrappedComponent, inputFunction) { // ...and returns another component... return class ExternalLogic extends React.Component { constructor(props) { super(props); this.state = { //set up some state }; } componentDidMount() { //perform external logic by calling `inputFunction()` } render() { // ... and renders the wrapped component with the fresh data! return <WrappedComponent data={this.state.data} {...this.props} />; } }; } const MyComponentWithExtLogic = withExternalLogic( MyComponent, (external) => external.doSomething() ); https://reactjs.org/docs/higher-order-components.html

29. SHIELDS UP - SECURING REACT APPS HIGHER ORDER COMPONENTS https://reactjs.org/docs/higher-order-components.html https://hackernoon.com/role-based-authorization-in-react-c70bb7641db4 import React, {Component} from 'react'; const Authorized = (allowedRoles, user) => { return (WrappedComponent) => { return class WithAuthorization extends Component { render() { const {role} = user; if (allowedRoles.includes(role)) { return <WrappedComponent {...this.props} /> } else { return <h1>No page for you!</h1> } } } } } export default Authorized;

30. SHIELDS UP - SECURING REACT APPS HIGHER ORDER COMPONENTS https://reactjs.org/docs/higher-order-components.html import Authorized from "./Authorized"; render() { const {user, loggedIn} = this.state; const withAdminRole = Authorized(['admin'], user); const withUserRole = Authorized(['user', 'admin'], user); return ( <Router> <Route path="/restricted" component={withUserRole(Restricted)}/> <Route path="/admin" component={withAdminRole(Admin)}/> </Router> );

31. SHIELDS UP - SECURING REACT APPS API AUTHENTICATION ▸ Once data makes it to the UI, it’s too late to secure ▸ Authorization needs to be checked at every endpoint ▸ In a microservice architecture, each service boundary should be secured ▸ Always use HTTPS

32. SHIELDS UP - SECURING REACT APPS SESSION AUTHENTICATION ▸ Session-based security relies on the server to store state ▸ Usually a session cookie is provided to the client ▸ Ensures that sensitive data is stored only on the server ▸ Server controls session lifetime, timeouts, etc ▸ Typically requires interaction with data layer to verify user identity, session state, etc

33. SHIELDS UP - SECURING REACT APPS SESSION AUTHENTICATION via auth0.com

34. SHIELDS UP - SECURING REACT APPS STATELESS AUTHENTICATION ▸ Stateless authentication typically relies on encrypting session details in a token ▸ Token is provided to client upon successful login ▸ Token can contain its own expiration date, user details, roles (scopes) ▸ Client includes token in API requests ▸ Server can verify client’s identity/authorization via token

35. SHIELDS UP - SECURING REACT APPS STATELESS AUTHENTICATION via auth0.com

36. SHIELDS UP - SECURING REACT APPS STATELESS AUTHENTICATION ▸ Unauthorized request is made to API ▸ Responds with 401 ▸ Client POSTs to login endpoint ▸ Responds with authorization token ▸ Token included in subsequent request ▸ Responds with resource

37. SHIELDS UP - SECURING REACT APPS JSON WEB TOKENS ▸ https://jwt.io ▸ Open, industry-standard method for representing claims securely between two parties ▸ Typically consist of a header, payload, and signature

38. SHIELDS UP - SECURING REACT APPS JSON WEB TOKENS https://jwt.io/introduction/

39. SHIELDS UP - SECURING REACT APPS STATELESS AUTH WITH JWT DEMO

40. SHIELDS UP - SECURING REACT APPS OAUTH2 & THIRD-PARTY AUTHENTICATION ▸ OAuth2 is a standard for authentication and secured resource access w/o sharing credentials https://developer.okta.com/blog/2017/06/21/what-the-heck-is-oauth

41. SHIELDS UP - SECURING REACT APPS OAUTH2 & THIRD-PARTY AUTHENTICATION ▸ OAuth2 is a standard flow for authentication and secured resource access w/o sharing credentials ▸ Many third party authentication providers on the market ▸ Doesn’t usually make sense to stand up your own ▸ https://hackernoon.com/authentication-as-a-service-an- honest-review-of-auth0-315277abcba1 ▸ https://hackernoon.com/dev-rant-stop-reinventing-user- auth-1193b138772

42. SHIELDS UP - SECURING REACT APPS AUTH0 ▸ https://auth0.com/docs/quickstart/spa/react/01-login ▸ https://auth0.com/blog/reactjs-authentication-tutorial

43. SHIELDS UP - SECURING REACT APPS OKTA ▸ https://developer.okta.com/blog/2017/03/30/react-okta- sign-in-widget ▸ https://developer.okta.com/blog/2017/12/06/bootiful- development-with-spring-boot-and-react

44. SHIELDS UP - SECURING REACT APPS THIRD-PARTY AUTHENTICATION DEMO

45. SHIELDS UP - SECURING REACT APPS SUMMARY ▸ React is largely very safe client-side attacks ▸ Always validate user input ▸ Plan routing strategies ▸ Secure your API first ▸ Don’t re-invent the wheel - leverage existing platforms for authentication/authorization ▸ Keep checking behind your back

46. SHIELDS UP - SECURING REACT APPS LINKS ▸ http://www.jamesward.com/2013/05/13/securing-single-page-apps-and- rest-services ▸ http://guides.grails.org/react-spring-security/guide ▸ https://hackernoon.com/authentication-as-a-service-an-honest-review-of- auth0-315277abcba1 ▸ https://hackernoon.com/dev-rant-stop-reinventing-user-auth-1193b138772 ▸ https://medium.com/dailyjs/exploiting-script-injection-flaws-in- reactjs-883fb1fe36c1 ▸ https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web- storage

47. THANK YOU Twitter: @ZacharyAKlein. Github: @ZacharyKlein. Email: [email protected]

Related presentations


Other presentations created by zak89s

Groovy for Java Devs
08. 03. 2019
0 views

Groovy for Java Devs

Grails 4: Upgrade your Game!
01. 10. 2020
0 views

Grails 4: Upgrade your Game!