THAT Conference Notes: Frontend Security, Object Mapping, S’mores, and So Much More!

THAT Conference, held at the Kalahari Resort in Wisconsin Dells, Wisconsin, was an unbelievable experience filled with great people, useful sessions, and fun activities. I was thrilled to be able to represent Brilliance at THAT Conference and had a fantastic time connecting with hundreds of developers and technical professionals throughout the event. 

THAT Conference is the "Summer Camp for Geeks" that combines technology, networking, social events and exposure to trends. Over four days, folks of diverse technology backgrounds and expertise levels gather to take advantage of multiple learning mediums. In short, it is a tech conference for developers, rooted in community, exploring the internet of things, and all technologies used for mobile, web & cloud. 

THAT Conference had a variety of attendees and topics such as: 

  • Domain experts 

  • New and continuing users, designers and practitioners of frameworks, processes, and tools 

  • Community and mindfulness 

In addition to talks, attendees can organize Open Space circles on any topic they’re interested in as experts or as novices for more direct communication. I found these ad hoc gatherings led to great discussions because of the enthusiasm of participants and the small group setting. 

Although there were many fantastic sessions and keynote speakers, here are some of my key takeaways and notes from the “Embracing Object-Oriented UX for better products (and happier teams)” and “Demystifying Front-End Security” sessions. Don’t hesitate to contact me if you have any specific questions, I’d be happy to steer you in the right direction.  

Embracing Object-Oriented UX for better products (and happier teams) 

Presented by: Caroline Sober-James, Director of User Experience, Acumium 

OVERVIEW 

OOUX is a design methodology that helps us define usable, consistent products that naturally align with end-users’ mental models. Similar to OOP, it asks us to define the objects in the real-world problem domain and design the information and relationships in each object before designing how the user might manipulate them. It's a powerful tool for any digital team because it's relatively easy to do for tech, product, stakeholders, and users. 

OOUX in four parts:  

  1. Complexity analysis  

  1. Requirements definition  

  1. Prioritization  

  1. Sketching 

 

 MY NOTES 

Sketch initial object relationships  

Core object relationship model 

2. Previews navigation design 

3. E.g. B2B Distributor site :

        • Brands 

        • Products 

        • Categories 

        • Search results 

        • RMA 

        • Orders 

 

CTA Inventory 

Begin to stub out user stories in Trello or a spreadsheet 

●  Describe the who, what, why, when, where, and how for each interaction 

 

 

Digital packaging that’s consistent and recognizable 

Now, we can avoid scary UI pitfalls: 

●  Shapeshifter modules 

●  Masked, broken, isolated objects 

 

Let’s start working on UI: 

  1. Package objects into modules and detail screens 

  1. Show how a user would navigate from screen to screen 

  1. Map out and test task flows 

  1. Create list and landing pages 

 

Storyboard the task flows: 

  • Evaluate your top CTAs 

  • Think about all the steps in a procedure – Where is the conditional logic? 

  • Ask your users what they’d expect to happen if they initiated one of these flows? 

 

 

Demystifying Front-End Security 

Presented by: Ilya Verbitskiy, Security Consultant & Co-Founder, WebStoating s.r.o. 

 

OVERVIEW 

JavaScript development is not about building web-applications anymore: JavaScript can be used for building native mobile and desktop applications as well. It brings bigger responsibilities to front-end engineers to make sure that our applications are secure. 

 

 

MY NOTES 

Cross Site Scripting (Xss) Impact 

●  Account hijacking (eg. session cookie)  

 ●  Steal credentials (eg. last pass spoof)  

 ●  Drive-by downloads (eg. bulletin board comments 

 ●  Crypto mining (run crypto mining software on customer machines)  

  • Keyloggers  

  • Port scan (timings -> is there a server behind a firewall?)  

  • Site Defacement  

 

BeEF – Browser Exploitation Framework Project 

●  Open source browser exploitation framework  

●  beefproject.com  

●  Contains 100+ modules  

●  Antivirus detects default installation, BeEF can be modified to avoid fingerprinting 

 

Vectors  

  • Reflected XSS   

  • Stored XSS  

    • Was mitigated by browser XSS protection, but too many false positives  

  • DOM based XSS   

○  Attacker creates DOM node client side  

○  URL hash vector  

○  Renders waf meaningless  

 ○  Check params when reading hash  

  • JS in SVG  

    • Eg, image uploader; Can have js in svg definition.  

    • Browsers don't exec js in <img>, background-image; do exec in inline or <embed>, <object>, <iframe>  

    • Webpack renders svg inline  

  • Markdown  

    • Still need to strip tags from markdown  

  • Frameworks  

    • React: dangerouslySetInnerHTML  

  • React: does good job of html sanitation  

  • User-entered text can be exploited  

    • Angular: [innerHTML 

    • VueJS: v-html 

 Click here for more session information. 

 

For more information on THAT Conference, please visit https://www.thatconference.com/.  

Want more information on a specific topic not covered? Let us know 

Drew Douglas

Lead Developer

About

Drew Douglas

Drew is an Episerver Certified, as well as a Microsoft Certified Professional (Microsoft HTML5 with JavaScript & CSS3 Certification).  As a Lead Developer at Brilliance, Drew serves as a technical lead and architect on Episerver projects.  During his career, his development work has utilized many technologies, including ASP.NET Forms and MVC, NServiceBus and React.  His current focus is B2B eCommerce development with ERP integrations.

Related Articles