Headless Drupal and Security

"The front-end moves faster than Drupal, whether Drupal likes it or not" This reference from "The state of the Front-end" session at DrupalCon Amsterdam explains that we need different ways to retrieve content from a Drupal site for an easy integration with new front-end frameworks and other 3rd-party applications. This allows non-experienced front-end developers to start theming Drupal using the tools they are used to, providing at the same time multiple integrations with other platforms through APIs. Currently there is a debate about how to achieve this and what direction Drupal will take in the future. In this workshop there will be explained different approaches to solve common problems and what possible solutions are provided by Drupal and its contributed modules. You can join this discussion, share your thoughts and experiences with others, and help Drupal to go on the right track. The session will also include a case study of a React application and what authentication methods are suitable for decoupled apps and Drupal.

Transcript

1. Headless Drupal
   #HeadlessDrupal
   

   View Slide

2. Ruben
   Teijeiro
   @rteijeiro
   Drupal Hero
   

   View Slide

3. drupalhero.es
   

   View Slide

4. 1xINTERNET.de
   

   View Slide

5. Conil
   

   View Slide

6. Front-end technologies evolve
   faster than Back-end technologies
   

   View Slide

7. View Slide

8. Web Applications
   Software Evolution
   

   View Slide

9. Custom Development from
   Scratch
   

   View Slide

10. Popular CMSs
    

    View Slide

11. Web Applications
    Architecture Evolution
    

    View Slide

12. Corporative Website
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. Monolithic Application
    

    View Slide

17. View Slide

18. Microservices
    

    View Slide

19. Web Trends
    

    View Slide

20. Mobile Web/Apps
    

    View Slide

21. Browserless Devices
    

    View Slide

22. Internet of Things
    

    View Slide

23. Market Trends
    

    View Slide

24. Content Repositories
    https://www.acquia.com/products-services/acquia-content-hubvid
    

    View Slide

25. Digital Assets Management
    

    View Slide

26. Commercial API-frst CMSs
    https://www.contentful.com
    

    View Slide

27. Open Source API-frst CMSs
    https://getdirectus.com
    

    View Slide

28. What is Drupal
    doing to catch up
    with this trends?
    

    View Slide

29. Loosely Coupled Architecture
    

    View Slide

30. I love Twig!! Drupal 8 Front-end is
    @mortendk Certifed
    

    View Slide

31. Dynamic Page Cache
    https://www.drupal.org/docs/
    8/core/modules/dynamic-
    page-cache/overview
    

    View Slide

32. Big Pipe
    https://www.drupal.org/docs/8/core/modules/bigpipe/overview
    

    View Slide

33. Big Pipe
    https://www.drupal.org/docs/8/core/modules/bigpipe/overview
    

    View Slide

34. UX
    

    View Slide

35. Accessibility
    

    View Slide

36. Multilingual
    

    View Slide

37. Security
    

    View Slide

38. Drupalgeddon III
    

    View Slide

39. Major remote code execution vulnerability
    CVE-2018-7600
    https://www.drupal.org/sa-core-2018-002
    CVE-2018-7602
    https://www.drupal.org/sa-core-2018-004
    

    View Slide

40. View Slide

41. View Slide

42. API-First
    Drupal
    

    View Slide

43. Headless Drupal
    

    View Slide

44. Decoupling
    

    View Slide

45. Decouple Frontend
    

    View Slide

46. Visitor-facing Experience
    

    View Slide

47. View Slide

48. View Slide

49. View Slide

50. Accessible Solutions
    

    View Slide

51. https://www.drupal.org/project/alexa
    https://www.youtube.com/watch?v=pZ-tBUdmzpo
    

    View Slide

52. Artifcial Intelligence
    

    View Slide

53. Chatbots
    https://www.youtube.com/watch?v=n7XyB1BoDF4
    

    View Slide

54. Mixed Reality
    

    View Slide

55. Augmented Reality
    https://www.youtube.com/watch?v=ZroFBG7-P7Q
    https://www.youtube.com/watch?v=t_5ZaC8YQ_8
    

    View Slide

56. Editorial Experience
    

    View Slide

57. https://developer.wordpress.com/calypso
    

    View Slide

58. Drupal 9?
    

    View Slide

59. Drupal
    Initiatives
    

    View Slide

60. API-First Initiative
    Making Drupal API-frst means making the data stored and
    managed by Drupal available for other software.
    https://www.drupal.org/node/2757967
    

    View Slide

61. JSON API
    Generate an API server that implements the {json:api}
    specifcation.
    https://www.drupal.org/project/jsonapi
    https://www.drupal.org/project/jsonapi_extras
    

    View Slide

62. GraphQL
    https://www.drupal.org/project/graphql
    http://graphql.org/swapi-graphql
    @thefubhy
    

    View Slide

63. RELAXed Web Services
    https://www.drupal.org/project/relaxed
    @dickolsson
    

    View Slide

64. Workfow Initiative
    https://www.drupal.org/node/2721129
    

    View Slide

65. http://www.drupaldeploy.org
    

    View Slide

66. Progressive Web Apps
    @nod_
    https://www.drupal.org/project/pwa
    

    View Slide

67. @prestonso
    https://github.com/acquia/waterwheel.js
    https://github.com/acquia/waterwheel.swift
    

    View Slide

68. @wimleers
    https://github.com/acquia/reservoir
    

    View Slide

69. Contenta CMS
    http://www.contentacms.org
    Contenta is an API-First Drupal distribution
    

    View Slide

70. Enhanced Editorial Experiences
    With Drupal and React
    

    View Slide

71. Decoupled In-Place Editing App
    Drupal 8 + JSON API + React
    

    View Slide

72. ●
    Full inline editing (WYSIWYG)
    ●
    Zero latency editing
    ●
    No page reloads
    ●
    Instant previewing
    ●
    “App feeling” for editor experience
    ●
    Easy access to information for visitors
    (aka non-editors) like in a standard
    decoupled scenario
    

    View Slide

73. View Slide

74. ●
    Page – Content Entity
    ●
    Fields - Entity references to
    Paragraphs
    ●
    Accordion
    ●
    Moodboard
    ●
    Text
    ●
    Image
    ●
    …
    

    View Slide

75. View Slide

76. View Slide

77. Pain Points
    

    View Slide

78. Performance
    Complex data structure for JSON-
    API
    Possible Solution: GraphQL
    

    View Slide

79. Content lock for collaborative editing
    Possible solutions:
    ●
    Middleware: Nodejs instance
    ●
    Entity reference revisions
    

    View Slide

80. UX Limitations
    Possible solutions:
    ●
    Improve editorial experience
    

    View Slide

81. Security
    

    View Slide

82. JOSE
    JSON Object Signing and Encryption
    JWT – JWS – JWE
    https://jwt.io
    https://speakerdeck.com/rdegges/jwts-suck-and-are-stupid
    

    View Slide

83. JWT - JSON Web Tokens
    Avoid server-side storage for sessions but
    any kind of session implementation will be
    interceptable if you don't use TLS, including
    JWT
    http://cryto.net/~joepie91/blog/2016/06/13/stop-using-jwt-for-sessions
    http://cryto.net/~joepie91/blog/2016/06/19/stop-using-jwt-for-sessions-part-2-why-
    your-solution-doesnt-work/
    

    View Slide

84. JWS - JSON Web Signatures
    A standard that is supposed to provide message authentication or
    digital signatures.
    Two ways to attack a standards-compliant JWS library to achieve
    trivial token forgery:
    ●
    Send a header that specifes the none algorithm be used
    ●
    Send a header that specifes the HS256 algorithm when the
    application normally signs messages with an RSA public key.
    https://auth0.com/blog/critical-vulnerabilities-in-json-web-token-libraries/
    

    View Slide

85. JWE - JSON Web Encryption
    Encryption leaves a lot of room for
    potential implementation errors, especially
    when asymmetric (a.k.a. public-key)
    encryption is involved. Public-key
    cryptography should be avoided if possible.
    https://blogs.adobe.com/security/2017/03/critical-vulnerability-uncovered-in-json-
    encryption.html
    

    View Slide

86. What should we use then?
    

    View Slide

87. PASETO
    Platform-Agnostic SEcurity Tokens
    Specifcation and reference
    implementation for secure stateless
    tokens
    https://github.com/paragonie/paseto
    

    View Slide

88. (local): Tamper-proof, short-lived immutable
    data stored on client machines.
    e.g. remember me on this computer
    cookies, which secure a unique ID that are
    used in a database lookup upon successful
    validation to provide long-term user
    authentication across multiple browsing
    sessions.
    

    View Slide

89. (public): Transparent claims provided by a
    third party.
    e.g. Authentication and authorization
    protocols (OAuth 2, OIDC).
    

    View Slide

90. Demo?
    

    View Slide

91. More about Security at
    Drupal HackCamp
    

    View Slide

92. Friday 15:30 – Room Softescu
    

    View Slide

93. Saturday 11:00 – Room Softescu
    

    View Slide

94. Saturday 12:00 – Room Optaros
    

    View Slide

95. Saturday 14:00 – Room Softescu
    JS and Security
    

    View Slide

96. Sunday 14:00 – Room Optaros
    

    View Slide

97. Resources
    https://dri.es/working-toward-a-javascript-driven-drupal-
    administration-interface
    https://www.drupal.org/project/drupal/issues/2926656
    https://github.com/jsdrupal/drupal-admin-ui
    https://wimleers.com/blog/api-first-drupal-two-big-maintainability-
    milestones
    https://www.lullabot.com/articles/drupal-javascript-initiative-the-road-
    to-a-modern-administration-ui
    https://www.drupal.org/project/jsdrupal
    

    View Slide

98. Join the Code Sprints!!
    

    View Slide

99. drupalsurfcamp.com
    

    View Slide

100. View Slide

101. View Slide

102. View Slide

103. Questions?
     ?
     

     View Slide

104. What did you think?
     Please rate this session
     https://www.surveymonkey.com/r/QTLXNVQ
     

     View Slide

105. Thanks!
     

     View Slide