<!--#include virtual="../s5/commontop.html" -->
<title>Lecture 20: Security & Browser Compatibility — INFO 343 Autumn 2012</title>
</head>
<body>
<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1>INFO 343 Lecture 20</h1>
<h2>Security & Browser Compatibility</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1>Security & Browser Compatibility</h1>
<h3>Lecture 20</h3>
<!-- <h4>
Reading: 12.1–12.2;<br/>
<a href="http://css3.bradshawenterprises.com/"><cite>Using CSS3 Transitions, Transforms, and Animation</cite></a> by Rich Bradshaw
</h4> -->
<p class="license">
Except where otherwise noted, the contents of this presentation are Copyright 2010–11 Marty Stepp, Jessica Miller, Morgan Doocy.
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="../s5/images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="../s5/images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<div class="slide titleslide">
<h1>Web Security</h1>
<ul>
<li><strong>Web Security</strong></li>
<li>Browser Compatibility</li>
</ul>
</div>
<div class="slide">
<h1>The “Security Mindset”</h1>
<!-- <div>
<img src="images/group_hug.jpg" alt="group hug" style="float: right; margin-left: 1em" />
</div> -->
<p>Often in learning we assume:</p>
<ul>
<li>valid, non-malicious input</li>
<li>our programs will be used as intended</li>
<li>users are competent and don’t indent harm</li>
</ul>
<div>
<img src="images/orcs.jpg" alt="orcs" style="float: right; margin-left: 1em" />
</div>
<p>This is unrealistic. In writing code we must <strong>always</strong> assume:</p>
<ul>
<li>malicious input</li>
<li>untrusted, evil users</li>
<li>everything that can go wrong, will</li>
</ul>
</div>
<div class="slide">
<h1>A Basic Vulnerability</h1>
<div class="example">
<pre class="examplecode html">
Question: <em><input type="text" id="questioninput" /></em> <button id="ask">Ask!</button>
You asked: <em><span id="questionoutput"><span class="comment"><!-- question goes here -- ></span></span></em>
</pre>
<pre class="examplecode js">
<span class="comment">// executed when 'OK' button is clicked</span>
var question = $('#questioninput').val(); <span class="comment">// get question in field</span>
$('#questionoutput').html(question); <span class="comment">// show the question asked</span>
</pre>
</div>
<ul>
<li>How is this insecure?
<ul>
<li class="incremental">What if the user enters bad data?</li>
<li class="incremental">What kinds of bad data could they enter?</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>HTML Injection Vulnerability</h1>
<p class="description">Injecting user-supplied text into the page without sanitizing.</p>
<p><strong>Attack vector:</strong></p>
<ul>
<li>User-supplied text is injected directly into page.</li>
</ul>
<p><strong>Vulnerability:</strong></p>
<ul>
<li>Injected text could contain HTML code, which could contain or load JavaScript code.</li>
<li>JavaScript code could inspect and report sensitive information the user enters on the page.</li>
</ul>
<p><strong>Resolution:</strong></p>
<ul>
<li><em>Sanitize</em> all text injected into the page.</li>
</ul>
</div>
<div class="slide">
<h1>Sanitizing data</h1>
<p class="description">Escaping or removing code from user-supplied input.</p>
<div class="example">
<pre class="examplecode js">
<span class="comment">// manual sanitization:</span>
question = question.replace('<', '&lt;');
question = question.replace('>', '&gt;');
question = question.replace('"', '&quot;');
question = question.replace("'", '&apos;');
<span class="comment">// all HTML has now been escaped; we can inject it into the page safely</span>
document.getElementById('questionoutput').innerHTML = question;
</pre>
<pre class="examplecode js">
<span class="comment">// "automatic" sanitization:</span>
<del>$('#questionoutput').html(question);</del> <span class="comment">// jQuery's .html() does not sanitize!</span>
$('#questionoutput').text(question); <span class="comment">// jQuery's .text() sanitizes automatically</span>
</pre>
</div>
<ul>
<li>Remove all potential for data to be interpreted as the type of code you’re injecting into.
<ul>
<li>Injection vulnerabilities also apply to SQL, JavaScript, PHP, etc. — with different sanitizing requirements for each.</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Automatic Parameter Injection</h1>
<div class="example">
<pre class="examplecode js">
<span class="comment">// was a 'question' parameter passed?</span>
var matches = location.search.match(/question=([^&]+)/));
if (matches) {
<span class="comment">// it was; inject the value into 'questionoutput'</span>
var question = matches[1];
$('#questioninput').val(question);
$('#questionoutput').html(question);
}
</pre>
</div>
<p>This page automatically prepopulates the question (both input and output) with the value passed as a query parameter.</p>
<ul>
<li>How could this be taken advantage of?</li>
</ul>
</div>
<div class="slide">
<h1>Cross-Site Scripting (XSS)</h1>
<p class="description">a flaw allowing injection and execution of arbitrary JavaScript code in your page</p>
<ul>
<li>automatic HTML injection → loading JavaScript from untrusted source</li>
<li><code>script</code> tags do not need to comply with same-origin rules
<ul>
<li>can load JavaScript code malicious user has control of, e.g. from <code>evildomain.com/hax.js</code></li>
</ul>
</li>
<li>if query parameters are used, can send malicious link to naive user
<ul>
<li>user clicks link, views page with exploit injected from query string</li>
<li>user enters sensitive information</li>
<li>malicious JavaScript code inspects page for sensitive information and “phones home” to report it</li>
</ul>
</li>
<li>XSS vulnerabilities likely to be found 64% of the time in 2009 (down from 80% (!) in 2007)
<ul>
<li>most common software vulnerability</li>
<li><a href="http://cwe.mitre.org/top25/#Listing">fourth-most dangerous software error</a></li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Preventing XSS</h1>
<ul>
<li>simple fix: sanitize HTML input
<pre class="examplecode js">
question = question.replace(/</g, '&lt;');
question = question.replace(/>/g, '&gt;');
question = question.replace(/'/g, '&#x27;');
question = question.replace(/"/g, '&quot;');
</pre>
</li>
<li>comprehensive fix: sanitize based on injection context
<ul>
<li>text content? attribute name? attribute value? tag name? comment? CSS string? JavaScript string? function? object? etc.</li>
</ul>
</li>
<li>more info: <a href="https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet">XSS prevention cheat-sheet</a></li>
</ul>
</div>
<div class="slide titleslide">
<h1>Browser Compatibility</h1>
<ul>
<li>Web Security</li>
<li><strong>Browser Compatibility</strong></li>
</ul>
</div>
<div class="slide">
<h1>Browser Compatibility</h1>
<ul>
<li>browsers have varying features and completeness</li>
<li>most browsers adhere to standards to some degree (HTML, CSS, JS, DOM)</li>
<li>but most also vary in small ways from those standards
<ul>
<li>experimental enhancements</li>
<li>“the standard way is dumb; we’ll do it this way”</li>
<li>older, grandfathered implementations before standard was introduced</li>
</ul>
</li>
<li>browsers getting much better at complying with standards</li>
<li>but there are still older, quirky browsers :-/</li>
</ul>
</div>
<div class="slide">
<h1>Browser Market Share (by version)</h1>
<div style="text-align: center">
<p style="font-size: smaller">December, 2008–November, 2011:</p>
<p><img src="images/version_trend_0911.gif" alt="Chart showing market share of major browser versions, 2009–2011" /></p>
<p style="font-size: smaller">November, 2007–October, 2010:</p>
<p><img src="images/version_trend_0710.gif" alt="Chart showing market share of major browser versions, 2007–2010" /></p>
</div>
</div>
<div class="slide">
<h1>Browser Market Share (combined)</h1>
<div style="text-align: center">
<img src="images/browser_share.png" alt="Chart showing market share of major browsers, 2004–2011" style="height: 80%"/>
</div>
</div>
<div class="slide">
<h1>What browser(s) should I write for?</h1>
<ol>
<li>Identify target audience browser stats
<ul>
<li>Geeky/elite audiences tend to use Chrome/FF more</li>
<li>Mainstream audiences tend to use IE</li>
</ul>
</li>
<li>Give stats to stakeholders, agree upon oldest supported browser version
<ul>
<li>Consider providing simplified but useable page to oldest browsers</li>
<li>Balance of current/future features and compatibility</li>
<li>FYI: many companies still internally use software dependent on IE6</li>
</ul>
</li>
<li>Develop with this target in mind
<ul>
<li>Identify range of technologies to use</li>
<li>Degrade gracefully</li>
</ul>
</li>
</ol>
</div>
<div class="slide">
<h1>Writing compatible pages</h1>
<p>General approach:</p>
<ul>
<li>Use JavaScript libraries
<ul>
<li>Develop quickly using a single, easy interface</li>
<li>Let library accommodate browser differences</li>
</ul>
</li>
<li>CSS: develop on middle-of-the-road browser/version, then adapt for other/older browsers
<ul>
<li>Firefox is good for development: gets most things right, but incorporates a few compatibility issues into development</li>
<li>Check for major issues on other browsers, catch big problems early</li>
<li>Eventually you’ll learn to anticipate CSS bugs and incorporate fixes into development</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Adapting to browsers</h1>
<ol>
<li><strong>Choose supported code</strong> for your target browsers. Use feature tables to see which CSS/DOM features you can use:
<ul>
<li><a href="http://quirksmode.org/">quirksmode.org</a> (CSS2, standard DOM, HTML5, CSS3, etc.)</li>
<li><a href="http://caniuse.com/">caniuse.com</a> (HTML5, CSS3, SVG)</li>
</ul>
</li>
<li><strong>Use libraries and polyfills</strong> to adapt to older/non-working browsers:
<ul>
<li>JavaScript libraries provide a single interface that adapts behind the scenes for different browsers (when they support the same thing different ways)</li>
<li><em>polyfills</em> are snippets of JavaScript that add newer standard functionality to an older browser that doesn’t support it (many libraries contain lots of polyfills)</li>
</ul>
</li>
</ol>
</div>
<div class="slide">
<h1>Adapting to browsers (cont’d)</h1>
<ol start="3">
<li><strong>Manually probe JS/DOM</strong> to see if features exist:
<ul>
<li>practice <em>conditional loading</em>: loading different code under different circumstances (different browsers, versions, JS on/off, etc.)</li>
<li><a href="http://www.modernizr.com/">Modernizr</a> (HTML5, CSS3 feature testing)</li>
<li><a href="http://yepnopejs.com/">yepnope.js</a> (microlibrary for any conditional loading)</li>
<li><a href="http://requirejs.org/">RequireJS</a> (modular “include” script loader)</li>
<li>IE conditional comments (see next slide)</li>
</ul>
</li>
<li><strong>Fall back</strong> to most basic features for oldest browsers:
<ul>
<li>manually inspect the User-Agent string (<code>Navigator.AppName</code>)</li>
<li>consider sending no styles at all, or only CSS1 (no floating, positioning, layout) to really old browsers to keep content accessible</li>
</ul>
</li>
</ol>
</div>
<div class="slide">
<h1>Adapting to browsers: Example</h1>
<pre class="eamplecode html">
<span class="comment"><!-- extremely basic stylesheet, compatible with all browsers --></span>
<link rel="stylesheet" href="/css/main.css" media="all" />
<span class="comment"><!-- adapt it nicely for print --></span>
<link rel="stylesheet" href="/css/print.css" media="print">
<span class="comment"><!-- add styles when screen is at least a certain size (CSS media query) --></span>
<link rel="stylesheet" href="/css/layout.css" media="screen and (min-width: 48em)">
<span class="comment"><!-- conditional comments to apply different styles to different versions of IE --></span>
<span class="comment"><!-- order and conditions are important: first IE5–IE9 excl mobile, then all IE, then
IE5–IE6. later stylesheets probably overwrite earlier ones in some parts --></span>
<span class="comment"><!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="/css/layout.css" media="all">
<![endif]--></span>
<span class="comment"><!--[if IE]>
<link rel="stylesheet" href="/css/ie.css" media="all">
<![endif]--></span>
<span class="comment"><!--[if lt IE 7]>
<link rel="stylesheet" href="/css/ie6.css" media="all">
<script src="/js/iepngfix_tilebg.js"></script>
<![endif]--></span>
</pre>
</div>
<div class="slide">
<h1>Adapting to devices</h1>
<pre class="codetemplate html">
<link rel="stylesheet" type="text/css" href="<var>filename</var>" <em>media="<var>mediatype</var>"</em> />
</pre>
<ul>
<li><var>mediatype</var> = <code>screen</code> (default), <code>print</code>, <code>handheld</code> (ignored by some handheld devices), <code>all</code>
<ul>
<li><a href="http://www.w3schools.com/tags/att_link_media.asp">list of all values</a></li>
</ul>
</li>
<li>CSS3: <a href="http://www.w3.org/TR/css3-mediaqueries/">media queries</a></li>
</ul>
</div>
<div class="slide">
<h1>Version/platform/device testing</h1>
<ul>
<li><a href="http://www.my-debugbar.com/wiki/IETester/HomePage">IETester</a>: test all IE versions side-by-side in tabs, even in Win7! (free!)</li>
<li>Virtual machines (paid):
<ul>
<li><a href="http://spoon.net/">spoon.net</a></li>
<li><a href="http://crossbrowsertesting.com/">CrossBrowserTesting</a></li>
</ul>
</li>
</ul>
</div>
<!--#include virtual="../s5/commonbottom.html" -->