HTML5時代の安全なエスケープ手法 Secure Escaping method for the age of HTML5 Yoshinori TAKESAKO @takesako Cybozu Labs, Inc. 

about:TAKESAKO OWASP JAPAN Advisory Board  2008: Microsoft MVP "Developer Security" 2011: SC22/ECMAScript (ISO/IEC 16262) 2012: HTML5 technical review (coauthor) 2013: ECMA-262 Edition 5.1 (en2ja) 

Today's agenda XSS is a threat consistently listed in the OWASP Top 10  1. to prevent XSS, it is necessary to different appropriate escaping 2. but it cause human error and easily lead to careless mistakes 3. contextual automatic HTML escaping method became a realistic solution with popularization of HTML5 Syntax 

ESCAPE, TO BE SECURE エスケープを、 確かなものに。 

ESCAPE, TO BE SECURE 1. History of HTML escaping method  "PHP" of the good old days  template engines got default escaping 2. Modern HTML escaping method  "contextual" automatic escaping  AngularJS, Closure Templates … 3. HTML5 syntax  parser bugs 4. Excursus Excluding - How to prevent SQL injection - New solution of DOM based XSS 

PHP 1. History of HTML ESCAPE 

Simple XSS alert(1) [Input] $x alert(1) [Output] XSS...  

(1) htmlspecialchars alert(1) [Input] $x <script>alert(1)</script> [Output] secure?  

%27 ... single quote ' onfocus=alert(1) autofocus ' [Input] $x ...value='' onfocus=alert(1) autofocus ''> [Output] XSS...  

(2) ENT_QUOTES ' onfocus=alert(1) autofocus ' [Input] $x ' onfocus=alert(1) autofocus ' [Output] secure?  

%82 ... a multi-byte char

(3) valid charset encoding '>

Smarty 1. History of HTML ESCAPE 

Smarty {$x} alert(1) [Input] $x alert(1) [Output] XSS  

Smarty|escape:"html" {$x|escape:"html"} alert(1) [Input] $x </title><script>alert(1)<... [Output] secure  

Default all ESCAPE setting {$str} == {$str|escape:"html"} Smarty 2 {$inner_html|smarty:nodefaults} Smarty 3 {$inner_html nofilter} $smarty = new Smarty(); $smarty->default_modifiers = array('escape:"html"'); 

Quiz How to ESCAPE ? 

Q. How to ESCAPE ? $x1, $x2, $x3, $x4, $x5, $x6, $x7 {$x3} var x = '{$x4}'; var y = {$x5}; body { background:url(/path?q={$x6}); } div { font-family: "{$x7}"; } 

Smarty|escape:"TYPE" TYPE {$str|escape:"TYPE"} 1 html htmlspecialchars($str, ENT_QUOTES, $charset); 2 htmlall htmlentities($str, ENT_QUOTES, $charset); 3 quotes '  ¥' 4 url rawurlencode($str); 5 urlpathinfo str_replace('%2F','/',rawurlencode($str)); 6 hex ABC  %41%42%43 7 hexentity ABC  ABC 8 mail str_replace('@',' [AT] '), str_replace('.',' [DOT] '), $str)); 9 javascript ¥¥¥, '¥', "¥", ¥r¥¥r, ¥n¥¥n,

escaping-craftworker [要]エスケープ職人 

There are no "Swiss Army Knife" URL encode HTML escape 図：彩画職人部類（天明4年）大正期復刻版 より CSS escape 

AngularJS 2. Modern HTML ESCAPE method 

AngularJS Open-source JavaScript MVC framework originally developed in 2009 by Miško Hevery and Adam Abrons. 

A[ng]ularJS ng-app Declares an element as a root element of the application allowing behavior to be modified through custom HTML tags. ng-bind ng-bind-html Automatically changes the text of an HTML element to the value of a given expression. ng-model Similar to ng-bind, but allows two-way data binding between the view and the scope. ng-class Allows class attributes to be dynamically loaded. ng-controller Specifies a JavaScript controller class that evaluates HTML expressions. ng-repeat Instantiate an element once per item from a collection. ng-show ng-hide Conditionally show or hide an element, depending on the value of a boolean expression. Show and hide is achieved by setting the CSS display style. ng-switch Conditionally instantiate one template from a set of choices, depending on the value of a selection expression. ng-view The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers. ng-if Basic if statement directive which allow to show the following element if the conditions are true. When the condition is false, the element is removed from the DOM. When true, a clone of the compiled element is re-inserted. 

AngularJS: ng.$sce SCE = Strict Context Escaping {{x}} 

AngularJS: ng.$sce  demo 

AngularJS: ng.$sce 

docs.angularjs.org/api/ng/service/$sce Context Notes $sce.HTML For HTML that's safe to source into the application. The ngBindHtml directive uses this context for bindings. $sce.URL For URLs that are safe to follow as links. Currently unused (

[FYI] AngularJS security 30分かも… 

Closure Templates 2. Modern HTML ESCAPE method 

Closure Templates Java & JavaScript templating tools 

example.soy (1/2) {namespace example autoescape="contextual"} /** * example of autoescape contextual * @param x1 * @param x2 * @param x3 * @param x4 * @param x5 * @param x6 * @param x7 */ {template .render} ... {/template} example.soy (2/2) 

example.soy (2/2) {template .render} {$x3} var x = '{$x4}'; var y = {$x5}; body{lb} background:url(/path?q={$x6});{rb} div {lb} font-family: "{$x7}"; {rb} 

Closure Templates SoyToJsSrcCompiler.jar [INPUT] example.soy [OUTPUT] example.js Compiled to JavaScript source code > java -jar SoyToJsSrcCompiler.jar --outputPathFormat example.js --srcs example.soy 

Result ??? soy.$$escapeHtml(opt_data.x1); soy.$$escapeHtml(opt_data.x2); soy.$$escapeHtml(opt_data.x3); soy.$$escapeHtml(opt_data.x4); soy.$$escapeHtml(opt_data.x5); soy.$$escapeHtml(opt_data.x6); soy.$$escapeHtml(opt_data.x7); 

Result : example.js // This file was automatically generated from example.soy. // Please don't edit this file by hand. if (typeof example == 'undefined') { var example = {}; } example.render = function(opt_data, opt_ignored) { return '' + soy.$$escapeHtml(opt_data.x3) + '' + 'var x = ¥'' + soy.$$escapeJsString(opt_data.x4) + '¥'; var y = ' + soy.$$escapeJsValue(opt_data.x5) + ';<¥/script>' + '<style>body{ ' + 'background:url(/path?q=' + soy.$$escapeUri(opt_data.x6) + '); }' + 'div { font-family: "' + soy.$$escapeCssString(opt_data.x7) + '"; }' + '</style>'; }; 

Result (autoescape="contextual") soy.$$escapeHtmlAttribute( soy.$$filterNormalizeUri(opt_data.x1) ); soy.$$escapeHtmlAttribute( soy.$$escapeJsValue(opt_data.x2) ); soy.$$escapeHtml(opt_data.x3); soy.$$escapeJsString(opt_data.x4); soy.$$escapeJsValue(opt_data.x5); soy.$$escapeUri(opt_data.x6); soy.$$escapeCssString(opt_data.x7); 

Result (autoescape="contextual") {$x3} var x = '{$x4}'; var y = {$x5}; body{lb} background:url(/path?q={$x6});{rb} div {lb} font-family: "{$x7}"; {rb} 

Result (autoescape="contextual") {$x3} var x = '{$x4}'; var y = {$x5}; body{lb} background:url(/path?q={$x6});{rb} div {lb} font-family: "{$x7}"; {rb} soy.$$escapeHtmlAttribute( soy.$$filterNormalizeUri(opt_data.x1) ); 

Result (autoescape="contextual") {$x3} var x = '{$x4}'; var y = {$x5}; body{lb} background:url(/path?q={$x6});{rb} div {lb} font-family: "{$x7}"; {rb} soy.$$escapeHtmlAttribute( soy.$$escapeJsValue(opt_data.x2) ); 

Result (autoescape="contextual") {$x3} var x = '{$x4}'; var y = {$x5}; body{lb} background:url(/path?q={$x6});{rb} div {lb} font-family: "{$x7}"; {rb} soy.$$escapeHtml(opt_data.x3); 

Result (autoescape="contextual") {$x3} var x = '{$x4}'; var y = {$x5}; body{lb} background:url(/path?q={$x6});{rb} div {lb} font-family: "{$x7}"; {rb} soy.$$escapeJsString(opt_data.x4); 

Result (autoescape="contextual") {$x3} var x = '{$x4}'; var y = {$x5}; body{lb} background:url(/path?q={$x6});{rb} div {lb} font-family: "{$x7}"; {rb} soy.$$escapeJsValue(opt_data.x5); null, true, false, 3.14, 'toString()' 

Result (autoescape="contextual") {$x3} var x = '{$x4}'; var y = {$x5}; body{lb} background:url(/path?q={$x6});{rb} div {lb} font-family: "{$x7}"; {rb} soy.$$escapeUri(opt_data.x6); 

Result (autoescape="contextual") {$x3} var x = '{$x4}'; var y = {$x5}; body{lb} background:url(/path?q={$x6});{rb} div {lb} font-family: "{$x7}"; {rb} soy.$$escapeCssString(opt_data.x7); 

Substitutions in URLs Entity-escape and filter out bad protocols 1 "http://foo/" → 2 "/foo?a=b&c=d" → 3 "javascript:alert(1337)" → Just entity-escape 4 "bar" → 5 "bar&baz/boo" → Percent encode inside query 6 "bar&baz=boo" → 7 new soydata.SanitizedUri ("bar&baz=boo") → 8 "A is #1" → https://developers.google.com/closure/templates/docs/security 

Substitutions in CSS div#{$id} { } Classes and IDs 1 "foo-bar" → div#foo-bar { }

[FYI] autoescape="contextual" 

However, HTML parser is valid? {$x3} <!-- -- broken HTML--- -><!-!> var x = '{$x4}'; var y = {$x5}; body{lb} background:url(/path?q={$x6});{rb} div {lb} font-family: "{$x7}"; {rb} 

Parser bugs 3. HTML syntax 

HTML syntax 

HTML syntax checker [demo] HTML5 Syntax Checker

Your Browser is...

---

http://www.w3.org/TR/html5/syntax.html



Opera8.54 

Internet Explorer 8 

Netscape6.23 

Netscape7.1 

Safari 4.0.3 (531.9.1) 

Firefox 3.6.12 

Lynx2.8.5 

HTML 45 3. HTML syntax 

HTM5 Syntax (W3C) 

defined HTML5 Syntax

Your Browser is...



Safari 5.1.1+ 

Google Chrome7.0.517.44+ 

Firefox 10.0.2 + 

Shazzer 3. HTML syntax 

Shazzer - shared online fuzzing 

fuzz.shazzer.co.uk test 

Characters-allowed-after-slash test 

JS Parser 3. HTML syntax 

ECMA-262 (5th Edition) 

ISO/IEC 16262:2011 

ECMAScript 5 Conformance Suite 

No content

No content

No content

CSS Hacks 4. Excursus 

CSS Hacks CSS Hacks must die ...  body { color: red; /* all browsers */ color: green¥9; /* IE6,7,8 */ *color: yellow; /* IE6,7 */ _color: orange; /* IE6 */ } 

Data-Taint Security 4. Excursus 

JavaScript Data-Taint security 

Netscape Navigator 2.0 / 3.0 

set NS_ENABLE_TAINT=1 taint(), untaint() Object Tainted properties and methods document cookie, domain, forms[], lastModified, links[], location, referrer, title, URL form action all form input elements: button, checkbox, fileupload, hidden, password, radio, reset, select, submit, text, textarea checked, defaultChecked, defaultValue, name, selectedIndex, toString(), value history current, next, previous,toString(), all array elements location, link, area hash, host, hostname, href, pathname, port, protocol, search, toString() option defaultSelected, selected, text, value window defaultStatus, status 

Netscape Navigator 2.0+ navigator.taintEnabled() Mozilla Firefox 28 Opera 15  no method Internet Explorer 11 Historical reasons: removed in JavaScript version 1.2 

MooTools 1.2.6 browser detect Browser = $merge({ Engine: {name: 'unknown', version: 0}, Engines: { presto: function(){ return (!window.opera) ? false : ((arguments.callee.caller) ? 960 : ((document.getElementsByClassName) ? 950 : 925)); }, trident: function(){ return (!window.ActiveXObject) ? false : ((window.XMLHttpRequest) ? ((document.querySelectorAll) ? 6 : 5) : 4); }, webkit: function(){ return (navigator.taintEnabled) ? false : ((Browser.Features.xpath)?((Browser.Features.query) ? 525 : 420) : 419); }, gecko: function(){ return (!document.getBoxObjectFor && window.mozInnerScreenX == null) ? false : ((document.getElementsByClassName) ? 19 : 18); } }, 

温故知新 Taking a lesson from the past ! 

References AngularJS  http://angularjs.org/ Closure Templates  https://code.google.com/p/closure-templates/ Shazzer  http://shazzer.co.uk/ teppeis blog (ja)  http://teppeis.hatenablog.com/ 

Conclutions 5. Conclusions 

Conclusions 1. Contextual automatic HTML escaping became a new solution to prevent XSS 2. HTML5 Syntax HTML5 Parser can be implemented same algorithm in the server-side and client-side 3. Broken HTML5 parser is browser's bug If you find a parse error, please report it  4. Static analysis is very useful But it can not solved the DOM based XSS Needs dynamic data-tainting security model 

Thank you ご清聴ありがとうございました