Skip to content
This repository has been archived by the owner on Sep 5, 2018. It is now read-only.

Commit

Permalink
Merge pull request #65 from neraliu/new-portal
Browse files Browse the repository at this point in the history 
importing the portal for safe js templating.
  • Loading branch information
@adon-at-work
adon-at-work committed Jun 12, 2015
2 parents 16f8b4f + 75c259a commit f315a09
Show file tree
Hide file tree
Showing 28 changed files with 2,051 additions and 0 deletions.
106 changes: 106 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="0; url=http://yahoo.github.io/secure-handlebars/www/index.html">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Safe JavaScript Templating</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.13.0/build/cssbase/cssbase-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.13.0/build/cssreset/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.13.0/build/cssfonts/cssfonts-min.css">
<link rel="stylesheet" href="www/stylesheets/security.css" type="text/css" />

<!-- Bootstrap -->
<link href="www/stylesheets/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<link href="www/stylesheets/blog.css" rel="stylesheet">
<link href="www/stylesheets/carousel.css" rel="stylesheet">

<!-- jquery -->
<script src="www/javascripts/jquery.min.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
<div class="header">
<h1 class="header-logo">
</h1>
</div>

<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="/">Safe JS Templating</a>
<a class="blog-nav-item " href="/safejstemplating">Getting Started</a>
<a class="blog-nav-item " href="/demosContextParserHandlebars">Demos</a>
<a class="blog-nav-item " href="/bugBounty">Bug Bounty</a>
</nav>
</div>
</div>

<div class="container">
<!-- grid system: http://getbootstrap.com/css/#grid -->
<div class="row">
<div class="col-md-12 blog-main">
<h2 class="header-badge">Safe JavaScript Templating</h2>
<p class="text-center">Our novel approach to defend JavaScript Templating solutions against Cross-site Scripting (XSS).</p>
<div class="security-cta">
<form action="/safejstemplating" method="get">
<button type="submit">Get started</button>
</form>
</div>
<p class="text-center"><a href="/demosContextParserHandlebars">Try our demo!</a></p>
</div> <!-- blog main -->

<div>&nbsp;</div>

<div class="col-md-12 blog-post">
<h2>Filtering is HARD!</h2>
<p><a href="http://en.wikipedia.org/wiki/Cross-site_scripting">Cross Site Scripting</a> (a.k.a. XSS) has long been ranked among Top 3 in the <a href="https://owasp.org/index.php/Top_10_2013">OWASP Top 10</a> for more than a decade. Web applications taking untrusted user inputs, keeping them intact without proper validations, and sending them back as part of the HTML are vulnerable to XSS. Nevertheless, why is XSS still being ranked among consistently high in OWASP Top 10? <a href="/filteringishard">more...</a></p>
</div><!-- blog-post -->

<div class="col-md-12 blog-post">
<h2>Existing JavaScript (JS) Templating is UNSAFE!</h2>
<p><a href="http://en.wikipedia.org/wiki/JavaScript_templating">JS Templating</a> refers to the data binding method implemented with the JavaScript language. In general, a placeholder such as &lbrace;&lbrace;key&rbrace;&rbrace; is used to bind values of the given key from data files, often JSON objects. To name a few, popular JS templating libraries include AngularJS, Dust.js, Handlebars.js, and Mustache.js. </p>

<p>Intended to defend aganist Cross-Site Scripting (XSS), the JS Templating libraries are defaulted to apply automatic HTML escaping on the untrusted binding outputs. However, it is known to be still VULNERABLE to XSS! <a href="/autoescaping">more...</a></p>
</div><!-- blog-post -->

<div class="col-md-12 blog-post">
<h2>Context Parser & Safe JavaScript Templating</h2>
<p>We propose a novel approach to defend JavaScript Templating libraries against XSS by our
<a href="/contextparser">HTML5 compilant context parser and filters</a>.</p>
</div><!-- blog-post -->

</div><!-- row -->
</div><!-- container -->

<div class="footer">
<a href="http://info.yahoo.com/privacy/us/yahoo/" target="_blank">Privacy</a> |
<a href="http://info.yahoo.com/legal/us/yahoo/utos/en-us/" target="_blank">Legal</a>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="www/javascripts/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="www/javascripts/bootstrap.min.js"></script>

<script src="www/javascripts/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="www/javascripts/ie10-viewport-bug-workaround.js"></script>

</body>
</html>

172 changes: 172 additions & 0 deletions www/autoescaping.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>What is Auto Escaping?</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.13.0/build/cssbase/cssbase-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.13.0/build/cssreset/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.13.0/build/cssfonts/cssfonts-min.css">
<link rel="stylesheet" href="stylesheets/security.css" type="text/css" />

<!-- Bootstrap -->
<link href="stylesheets/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<link href="stylesheets/blog.css" rel="stylesheet">
<link href="stylesheets/carousel.css" rel="stylesheet">

<!-- jquery -->
<script src="javascripts/jquery.min.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
<div class="header">
<h1 class="header-logo">
</h1>
</div>

<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item " href="./">Safe JS Templating</a>
<a class="blog-nav-item active" href="./safejstemplating.html">Getting Started</a>
<a class="blog-nav-item " href="./demosContextParserHandlebars.html">Demos</a>
<a class="blog-nav-item " href="./bugBounty.html">Bug Bounty</a>
</nav>
</div>
</div>

<div class="container">
<!-- grid system: http://getbootstrap.com/css/#grid -->
<div class="row">
<div class="col-md-12 blog-main">
<h2 class="header-badge">What is Auto Escaping?</h2>
<p class="text-center">It is the default strategy in JavaScript Templating by auto HTML escaping the output to defend aganist cross site scripting (XSS)</p>
</div> <!-- blog main -->

<div class="col-md-12 blog-post">&nbsp;&nbsp;</div>

<div class="col-md-8 blog-post">
<div class="col-md-12 blog-post">
<h2>What is Auto Escaping?</h2>
<p class="text-justify">Auto Escaping is applied by JS Templating engines to mitigate Cross-Site Scripting (XSS). It works by encoding all harmful characters originated from untrusted inputs, and thus preventing browsers from interpreting them as HTML entities, which otherwise could lead to malicious script injections and executions.</p>
<p class="text-justify">Here we summarize those characters that are considered dangerous by the Auto Escaping approach:
<table class="table table-bordered">
<tbody>
<tr><td><b>Characters</b></td><td>&gt;</td><td>&lt;</td><td>&quot;</td><td>&apos;</td><td>&amp;</td></tr>
<tr><td><b>Characters (encoded)</b></td><td>&amp;gt;</td><td>&amp;lt;</td><td>&amp;quot;</td><td>&amp;apos;</td><td>&amp;amp;</td></tr>
</tbody>
</table>
</p>
<p class="text-justify">While the approach can defend against some XSS vulnerabilities, it may give a false sense of security that the XSS problem is solved.</p>
</div><!-- blog-post -->

<div class="col-md-12 blog-post">
<h2>What's wrong?</h2>
<p class="text-justify">Some JS templating engines miss characters that could lead to XSS. Taking DustJS and Handlerbars as examples, the table below summerizes which dangerous characters are encoded by their auto escaping implementations.</p>
<table class="table table-bordered">
<tbody>
<tr><td>Characters</td><td>&gt;</td><td>&lt;</td><td>&quot;</td><td>&apos;</td><td>&amp;</td><td>SPACE</td></tr>
<tr><td><b>DustJS</b></td><td>&amp;gt;</td><td>&amp;lt;</td><td>&amp;quot;</td><td>&amp;apos;</td><td>&amp;amp;</td><td><font color="red">SPACE</font></td></tr>
<tr><td><b>Handlebars</b></td><td>&amp;gt;</td><td>&amp;lt;</td><td>&amp;quot;</td><td>&amp;apos;</td><td>&amp;amp;</td><td><font color="red">SPACE</font></td></tr>
</tbody>
</table>

<p class="text-justify">The dangerous characters are blindly encoded without considering the output execution contexts. According to the encoding character sets, both DustJS and HandlebarsJS do not encode space (&nbsp;) characters, which are arguably legitimate user inputs. However, it could be used as a XSS attack vector depending on the output context.</p>
<blockquote>
<h3>Example of Vulnerability</h3>
<ul>
<li>Visit <a href="http://linkedin.github.io/dustjs/test/test.html">the official DustJS demo page</a></li>
<li>Use &lt;input value={untrusted}/&gt; as template</li>
<li>Use {&quot;untrusted&quot;: &quot;<span style="color:#F00">break_the_context</span> <span style="color:#F00"> onblur=alert(1)</span>&quot;} as data input</li>
<li>After data binding, the output becomes &lt;input value=<span style="color:#F00">break_the_context onblur=alert(1)</span>/&gt;</li>
<li>Again, when rendered by browsers, you will see the alert prompt when the input box is out of focus.</li>
</ul>
</blockquote>
</div><!-- blog-post -->

<div class="col-md-12 blog-post">
<h2>Our Context-aware Solution</h2>
<p class="text-justify">The solution is to (1) parse the HTML template files to analyze the output execution context, and (2) apply context-sensitive encoding accordingly.</p>
</div><!-- blog-post -->
</div><!-- col-md-8 blog-post -->

<div class="col-md-3 col-md-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>What's JavaScript Templating?</h4>
<p>JavaScript templating refers to the client side data binding method implemented with the JavaScript language.</p>
</div>

<div class="sidebar-module">
<h4>Quick Links</h4>
<ol class="list-unstyled">
<li><a href="./safejstemplating.html">Getting Started</a></li>
</ol>

<h4>Source Code</h4>
<ol class="list-unstyled">
<li><a href="https://github.com/yahoo/xss-filters">XSS Filters</a></li>
<li><a href="https://github.com/yahoo/context-parser">Context Parser</a></li>
<li><a href="https://github.com/yahoo/secure-handlebars">Secure Handlebars</a></li>
<li><a href="https://github.com/yahoo/secure-handlebars-helpers">Secure Handlebars Helpers</a></li>
<li><a href="https://github.com/yahoo/express-secure-handlebars">Express Secure Handlebars</a></li>
</ol>

<h4>References</h4>
<ol class="list-unstyled">
<li><a href="http://en.wikipedia.org/wiki/JavaScript_templating">JavaScript Templating</a></li>
</ol>

<h4>Related Articles</h4>
<ol class="list-unstyled">
<li><a href="./filteringishard.html">Filtering is Hard!</a></li>
<li><a href="./autoescaping.html">What is Auto Escaping?</a></li>
<li><a href="./contextparser.html">Our Context Parser</a></li>
</ol>
</div>

<a class="back-to-top" href="#top">
Back to top
</a>
</div><!-- col-md-3 col-md-offset-1 blog-sidebar-->

<div class="col-md-12 blog-post">
<div class="security-cta">
<form action="./contextparser.html" method="get">
<button type="submit">Continue</button>
</form>
</div>
<p class="text-center"><a href="./filteringishard.html">Back</a></p>
</div> <!-- blog post -->

</div><!-- row -->
</div><!-- container -->

<div class="footer">
<a href="http://info.yahoo.com/privacy/us/yahoo/" target="_blank">Privacy</a> |
<a href="http://info.yahoo.com/legal/us/yahoo/utos/en-us/" target="_blank">Legal</a>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="javascripts/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="javascripts/bootstrap.min.js"></script>

<script src="javascripts/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="javascripts/ie10-viewport-bug-workaround.js"></script>

</body>
</html>
85 changes: 85 additions & 0 deletions www/bugBounty.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Yahoo Bug Bounty Special Program 2.0</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.13.0/build/cssbase/cssbase-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.13.0/build/cssreset/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.13.0/build/cssfonts/cssfonts-min.css">
<link rel="stylesheet" href="stylesheets/security.css" type="text/css" />

<!-- Bootstrap -->
<link href="stylesheets/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<link href="stylesheets/blog.css" rel="stylesheet">
<link href="stylesheets/carousel.css" rel="stylesheet">

<!-- jquery -->
<script src="javascripts/jquery.min.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
<div class="header">
<h1 class="header-logo">
</h1>
</div>

<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item " href="./">Safe JS Templating</a>
<a class="blog-nav-item " href="./safejstemplating.html">Getting Started</a>
<a class="blog-nav-item " href="./demosContextParserHandlebars.html">Demos</a>
<a class="blog-nav-item active" href="./bugBounty.html">Bug Bounty</a>
</nav>
</div>
</div>

<div class="container">
<!-- grid system: http://getbootstrap.com/css/#grid -->
<div class="row">
<div class="col-md-3 blog-main"></div>

<div class="col-md-6 blog-main text-justify">
<h2 class="header-badge">Yahoo Bug Bounty Special Program 2.0</h2>
<p>Hello Security Researchers!<br /><br /> Recently, we are working on two security projects - <a href="https://www.npmjs.com/package/xss-filters">Secure XSS Filters</a> on HTML5 and Safe JavaScript Templating on <a href="https://www.npmjs.com/package/secure-handlebars">Secure Handlebars</a>. And we are pleased to invite external reviewers to test the security design principle of these two products under our Bug Bounty Program to make our product safe! <br /><br />Please click the link to join our program. We look forward to working with you!</p>
<div class="security-cta">
<form action="./bugBountyRules.html" method="get">
<button type="submit">Continue</button>
</form>
</div>
</div><!-- blog-main -->

<div class="col-md-3 blog-main"></div>
</div><!-- row -->
</div><!-- container -->

<div class="footer">
<a href="http://info.yahoo.com/privacy/us/yahoo/" target="_blank">Privacy</a> |
<a href="http://info.yahoo.com/legal/us/yahoo/utos/en-us/" target="_blank">Legal</a>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="javascripts/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="javascripts/bootstrap.min.js"></script>

<script src="javascripts/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="javascripts/ie10-viewport-bug-workaround.js"></script>

</body>
</html>
Loading

0 comments on commit f315a09

Please sign in to comment.