Taking front-end security seriously
summary
Firefox OS is a web‑based phone UI so client‑side code runs with native‑level APIs; about 20 front‑end security bugs appear during development and roughly 19 trace back to misuse of innerHTML. Practical rules: avoid innerHTML, never pass strings to eval or setTimeout, use textContent or createElement/setAttribute. Use vetted sanitizers like DOMPurify or bleach JS for workers, enable Angular’s CSP mode or Knockout’s secure bindings, and enforce Content Security Policy to block inline scripts, eval and remote script injection.
AI-written summary · about
chapters (21)
- 0:00Intro
- 1:40Web apps (client-side, HTML, JavaScript) are changing.
- 2:48CLIENT-SIDE == SRS BSNS
- 6:08Sources
- 9:03Execution Sinks
- 9:49HTML Element Sinks
- 10:36Location Sink
- 11:59Control Flow Sink
- 13:00Minimise Attack Surface
- 15:04Template Approach
- 17:24HTML Input
- 19:10Sanitizers
- 21:17Frameworks
- 22:30jQuery?
- 23:44KnockoutJS 3.0.0
- 25:06Angular 1.1.5
- 29:56CSP 101
- 30:48Firefox OS Apps CSP
- 33:21Handlebars + CSP
- 33:35Knockout + CSP ?
- 34:22Angular + CSP
related talks
11mWhat your browser can teach you about software security
48mSecurity Risk: Single-Page Applications.
52mDemystifying Front-End Security
15mLocking Down PII: Why a Strong Frontend is Your First Defense
48mSecure Development on the Frontend
31mVue Fortified: Best Practices for Web App Security
37mFront-end Security
59mThe Final Frontier: Security APIs in Modern Browsers