Web Components and Security

1. Web Component Security Concerns What’s Better And What To Look Out For Tyler Peterson October 12, 2016

2. Introduction: You Are Here ☜ Point Of View, What To Do, What You’re In For

3. Web Components: Security View • Student Of Web Components • Student Of Web Security • Ask Yourself: What Does This Change?

4. Bottom Line up Front • Don’t Use iFrames • Add Response Header To Block Loading Into An iFrame • Use HTML Import and Shadow Dom For Large And Small Components • Use HTML 5 Templates And A Bespoke Data Binding Lib • Strongly Discourage Assigning To innerHtml

5. Where We Are Going: Web Components • HTML Imports • Shadow DOM • Custom Element • HTML 5 Template

6. What Has Changed • How Do These Standards Impact Security

7. Where We’ve Been • iFrames • String Building

8. We’ve Had Problems • Clickjacking • Cross-Site Scripting

9. Part 1: Html Imports & Shadow DOM Modularity, iFrames, Clickjacking, and Framebusting

10. iFrames As Module Strategy #bion “The humble iframe (short for inline frame) is one of the most powerful elements in HTML. It is the ultimate modularization tool, allowing you to break up content, seamlessly display content from other sources, and better manage loading. It's a must-have for any web designer's arsenal.” -- http://www.dwuser.com/education/content/the-magical-iframe-tag-an-introduction/ • E.g. Drupal “… you'd want to use this is when you have entities in a system that are objects for use in other systems (think youtube).” -- https://www.drupal.org/project/entity_iframe

11. What About Security? • iFrames Are Hamfisted For Modularity • (Imagine a Datepicker Component Implemented As An iFrame) • Even When They Fit, How Do They Impact Security?

12. Clickjacking – How It Works

13. Clickjacking – What It Can Do • Can Your Users Stay Logged In? • Can They Take Actions With A Single Click? • Clickjacking Can Trick Users Into Taking Those Actions

14. Clickjacking – Example

15. Clickjacking – Code

16. Clickjacking – How To Stop It • Add respnse header X-Frame-Options=“deny” or “sameorigin” • Don’t Try Code Defenses Such As “Frame Busting”

17. Replace iFrame With New Standards • HTML Imports Provide Wholesale Inclusion Of A Page • Shadow Dom Provides Isolation • (This Is Half Of The Web Component Standards)

18. iFrames • Full Page Content • Isolation Web Components • HTML Imports • Shadow DOM • Custom Element • HTML 5 Template Upgrade To Web Components

19. Part 2: HTML5 Templates String Building, Cross Site Scripting, Inert Templates, and Data Binding

20. DHTML (Where We’ve Been) • Build Strings • Put Into Page Response • Put Into Element InnerHTML • Normal Dom, Hidden • Dom In A Script Tag

21. What About Security? • Traditional Templating Works Well Enough • How Does It Impact Security? • Cross Site Scripting (Mismatched Magic) • What Is Changing?

22. Replace innerHtml With New Standards • HTML 5 Template Creates An Inert Template • Loading The Template Has No Side Effects • ”Stamping Out” The Template Is Terribly Safe • No XSS Vulnerability • No Data Binding At All • Use A Bespoke Templating Library

23. A Safer Starting Point • The Standard Doesn’t Solve Data Binding • It Does Carve Out A More Limited Starting Point • XSS Errors Are Often Triggered By Mismatched Escaping “The most fundamental safe way to populate the DOM with untrusted data is to use the safe assignment property, textContent. ” – OWASP DOM Based XSS Prevention Cheat Sheet • Pick A Lib Built On HTML 5 Template That Doesn’t Allow HTML Values

24. HTML 5 Templates’ Strengths el.innerHTML = “<p>” + content + “</p>”; // DANGER! Versus <template id=“mine”><p>[[content]]</p></template> • HTML 5 Template + A Bespoke Binding Library • Polymer’s bindings don’t support innerHTML by default. • Libraries Built For These Templates Will Be More Easily Secured – Fewer Magic Realms

25. Wrap Up Progress & Buzz Kills

26. Let’s Note The Progress • In What Ways Do “Web Components” Generally Improve Security?

27. HTML Import & Shadow Dom Strengths • Allows Us To Ditch iFrame • Hard Block Clickjacking (When Used As Part Of This Nutritious Breakfast)

28. HTML 5 Templates Can Reduce XSS • Templates Are Inert, But You Still Need Some Databinding • Choose A Library That Does Text Only Binding By Default • Override To Include HTML Data Values Should Be Painful And Obvious

29. Are They “Secure?” • Security Problems Solved • Clickjacking • Some Dom Based XSS • Things You Still Need To Get Right • Data Binding (Or You Still Have XSS Problems) • Block Frames (Or You Still Have Clickjacking) • All The Other Problems (In Many Ways, It’s All Still Just Code)

30. Vulnerabilities • If You Use “Web Components” You Can Get Some Easy Wins • You Must Correctly Enable Security Improvements Afforded, Else Your Site Is No More Secure On Web Components • Code Is Code. Lot’s Of Risks Remain.

31. Use Them Wisely • Clearly A Step Forward • Clearly Still Pitfalls

32. Tyler Peterson • Web Development Manager at FamilySearch • PetersonTB@FamilySearch.org • @ManagerJS • http://ManagerJS.com