Session V CSS Precompilers and Vulnerabilities 8/1/2014Copyright © Carl M. Burnett1

Class Outline Why precompile? Precompile Languages CSS Vulnerabilities Types of Cross-Site Scripting 8/1/2014Copyright © Carl M. Burnett2

Why Precompile? Less code Easier to read Easier to maintain More Power to……….... 8/1/2014Copyright © Carl M. Burnett3 Wait!

Why Precompile? - Variable 8/1/2014Copyright © Carl M. Burnett4 h1 { font-size: 18px; line-height: 2em; color: #FFF0000; border-bottom: solid 1px #FFF0000; } p { font-size: 14px; line-height: 1.3em; color: #FFF0000; }

Why Precompile? - Variable 8/1/2014Copyright © Carl M. Burnett5 same-color: #FFF0000; h1 { font-size: 18px; line-height: 2em; color: [same-color]; border-bottom: solid 1px [same-color]; } p { font-size: 14px; line-height: 1.3em; color: [same-color]; }

Why Precompile? - m ixins 8/1/2014Copyright © Carl M. Burnett6.container { -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.8); -ms-box-shadow: 0 2px 3px rgba(0,0,0,0.8); -o-box-shadow: 0 2px 3px rgba(0,0,0,0.8); -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.8); box-shadow: 0 2px 3px rgba(0,0,0,0.8); }.image-wrap { -moz-box-shadow: -2px 5px 10px #383838; -ms-box-shadow: -2px 5px 10px #383838; -o-box-shadow: -2px 5px 10px #383838; -webkit-box-shadow: -2px 5px 10px #383838; box-shadow: -2px 5px 10px #383838; }

Why Precompile? - mixins 8/1/2014Copyright © Carl M. Burnett7 mixin: box-shadow([variable]) { -moz-box-shadow: [variable]; -ms-box-shadow: [variable]; -o-box-shadow: [variable]; -webkit-box-shadow: [variable]; box-shadow: [variable]; }.container { mixin: box-shadow(0 20px 3px rgba(0,0,0,0.8); }.image-wrap { mixin: box-shadow(-2px 5px 10px #383838); }

Why Precompile? - Inheritance 8/1/2014Copyright © Carl M. Burnett8.primary-button { border-radius: 20px; border: solid 1px lightsteelblue; background: blue; color: white; font-size: 16px; padding: 5px 15px; text-decoration: none; }.secondary-button { border-radius: 20px; border: solid 1px grey; background: white; color: grey; font-size: 16px; padding: 5px 15px; text-decoration: none; }

Why Precompile? - Inheritance 8/1/2014Copyright © Carl M. Burnett9.primary-button,.secondary-button { border-radius: 20px; border: solid 1px lightsteelblue; background: blue; color: white; font-size: 16px; padding: 5px 15px; text-decoration: none; }.secondary-button { border: solid 1px grey; background: white; color: grey; }

Why Precompile? - Inheritance 8/1/2014Copyright © Carl M. Burnett10.primary-button { border-radius: 20px; border: solid 1px lightsteelblue; background: blue; color: white; font-size: 16px; padding: 5px 15px; text-decoration: none; }.secondary-button { inherit:[,primary-button]; border: solid 1px grey; background: white; color: grey; }

Why Precompile? - Nesting 8/1/2014Copyright © Carl M. Burnett11 ul { padding-left: 20px; list-style: none; } #my-container { background: #ccc; border: solid 1px #383838; padding: 20px; } #my-container ul { list-style: disc; padding-right: 40px; color: hotpink; } #my-caontainer ul li { border-bottom: solid 1px red; }

Why Precompile? - Nesting 8/1/2014Copyright © Carl M. Burnett12 ul { padding-left: 20px; list-style: none; } #my-container { background: #ccc; border: solid 1px #383838; padding: 20px; ul { list-style: disc; padding-right: 40px; color: hotpink; li { border-bottom: solid 1px red; } #my-caontainer ul li { border-bottom: solid 1px red; }

CSS Languages CreatedLanguageLicenseReleaseWebsite SASS 2006RubyMIT LESS2009JavaScriptApache2.5.3 Stylus2010 Jade / node.js MIT CSS-Crush2012php/jsonMIT2.4.0 Rework2013 node.js MIT1.0.1rework Myth2015 JavaScript / CLI MIT1.5.9 Myth 8/1/2014Copyright © Carl M. Burnett13

CSS Vulnerabilities CSS Injection XSS inside of CSS Injection 8/1/2014Copyright © Carl M. Burnett14

Types of Cross-Site Scripting Stored XSS (AKA Persistent or Type I) Stored XSS Reflected XSS (AKA Non-Persistent or Type II) Reflected XSS DOM Based XSS (AKA Type-0) DOM Based XSS Server XSS Client XSS 8/1/2014Copyright © Carl M. Burnett15

Types of Cross-Site Scripting 8/1/2014Copyright © Carl M. Burnett16 XSSServe-SideClient-Side Stored Stored Server-Side XSS Stored Client-Side XSS Reflected Server-Side XSS Reflected Client-Side XSS Where Untrusted Data is Used Data Persistence DOM Based XSS is a subset of Client-Side XSS (Data is DOM only)

Class Review Why precompile? Precompile Languages CSS Vulnerabilities Types of Cross-Site Scripting 8/1/2014Copyright © Carl M. Burnett17