- changed CSS

- add marked up sources to correct parent
- added information
- added Google news widget

.gitignore

@@ -2,4 +2,5 @@
 lib/
 index.yaml
 gae_utils.py
-static/js/lib/
+static/js/lib/
+static/css/lib/

main.py

@@ -45,12 +45,13 @@ def get_domxss_sinks(self, text):
 
 class MainHandler(BaseHandler):
     def get(self):
-        self.set_template_value('title', 'DOMXSS Scanner')
+        self.set_template_value('title', 'DOMXSS Scanner - Find DOM based XSS Security Vulnerabilities')
         self.generate('text/html', 'index.html')
 
 class ScanHandler(BaseHandler):
     def get(self):
-        self.set_template_value('title', 'DOMXSS Scanner')
+        title = 'DOMXSS Scanner - Scan %s'
+
         url = self.get_param('url', '', 'url')
         if url:
             self.set_template_value('url', url)
@@ -61,6 +62,11 @@ def get(self):
                 self.set_template_value('response_text', html)
                 script_urls = self.get_script_urls(url, html)
                 self.set_template_value('script_urls', simplejson.dumps(script_urls))
+        else:
+            url = ''
+
+        self.set_template_value('title', title % url)
+
         if self.is_ajax():
             self.generate('text/javascript', 'response.html')
         else:

static/css/style.css

@@ -59,27 +59,6 @@ input, select { vertical-align:middle; }
 
 /* END RESET CSS */
 
-
-/* font normalization inspired by  from the YUI Library's fonts.css: developer.yahoo.com/yui/ */
-body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to preserve specificity */
-select, input, textarea, button { font:99% sans-serif; }
-
-/* normalize monospace sizing
- * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
-pre, code, kbd, samp { font-family: monospace, sans-serif; }
-
-/*
- * minimal base styles
- */
-
-
-body, select, input, textarea {
-  /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
-  color: #444;
-  /* set your base font here, to apply evenly */
-  /* font-family: Georgia, serif;  */
-}
-
 /* always force a scrollbar in non-IE: */
 html { overflow-y: scroll; }
 
@@ -155,52 +134,93 @@ button {  width: auto; overflow: visible; }
 .ie7 img { -ms-interpolation-mode: bicubic; }
 
 /* Ramiro Gomez */
+select, input, textarea, button { font:99% sans-serif; }
+pre, code, kbd, samp { font-family: monospace, sans-serif; }
+body, select, input, textarea {
+  color: #444;
+  font-family: Cabin, serif;
+}
 body {
-color:#205020;
-min-height:900px;
+font-size:1.1em;
+color:#3d5c3d;
 background: #000; /* old browsers */
 background: -moz-linear-gradient(top, #000 0%, #0a0a0a 100%); /* firefox */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#0a0a0a)); /* webkit */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#0a0a0a',GradientType=0 ); /* ie */
 }
-
 /* headers (h1,h2,etc) have no default font-size or margin. define those yourself. */
-h1,h2,h3,h4,h5,h6 { font-weight: bold; font-size:1.2em;}
+h1,h2,h3,h4,h5,h6 {
+font-weight: bold;
+font-size:1.2em;
+}
 h1 { font-size:2em;}
 h2 { font-size:1.2em;}
 textarea {width:100%;height:300px;}
+hr {
+color:#000;
+border-color: #222;
+background-color: #222;
+height:1px;
+border:1px;
+}
+blockquote {
+margin: .5em 1em;
+padding-left: 1em;
+font-family: monotype;
+font-style: oblique;
+}
+.title a {
+font-size:1.3em;
+text-decoration:none;
+color:#3d5c3d;
+}
 
 #container {width:960px; margin:0 auto;}
-#page_header {
+#page_header,
+#page_footer {
 text-align:center;
+margin:10px 0 0 0;
+}
+#featured .grid_4 {
+padding:5px 0;
+}
+#page_footer {
+color:#3d5c3d;
+font-size:.9em;
 }
 /* search form */
 #url_form {
-font-size:2.5em;
+font-size:1.8em;
+margin:5px 0 15px 0;
 }
 #url_form .url {
-width:666px;
+width:60%;
 }
 #url_form .button {
-
+margin:10px 0;
+}
+.like_widget {
+margin:5px 0 10px;
+text-align:center;
 }
-
 /* highlighted response text */
 .response {
 width:100%;
 padding:10px;
--moz-border-radius: 10px;
-border-radius: 10px;
 background: #000;
 }
 .domxss_highlighted {
 height:300px;
 overflow:auto;
-padding:10px;
+padding:5px;
+margin: 5px 0;
+color:#0f0;
 background: #0a0a0a;
+border: 2px ridge #3d5c3d;
+font: 1.18em monospace;
 }
-.domxss_sink {background-color:yellow;}
-.domxss_source {background-color:red;}
+.domxss_sink {background-color:#9B7D00;}
+.domxss_source {background-color:#900;}
 
 /*
  * Non-semantic helper classes: please define your styles before this section.

static/js/google_rss.js

@@ -0,0 +1,24 @@
+var google_rss = document.getElementById("google_rss");
+google.load("feeds", "1");
+function initFeed() {
+  var google_rss_url = 'http://news.google.com/news?hl=en&safe=off&prmdo=1&q=xss&um=1&ie=UTF-8&output=rss';
+  var feed = new google.feeds.Feed(google_rss_url);
+  feed.load(function(result) {
+    if (!result.error) {
+      var cnt = result.feed.entries.length;
+      if (0 < cnt) {
+        var html = '';
+        for ( var i = 0; i < cnt; i++) {
+          var entry = result.feed.entries[i];
+          html += '<li><a href="' + entry.link + '">' + entry.title + '</a></li>';
+        }
+        google_rss.innerHTML = '<ul>' + html + '</ul>';
+      } else {
+        google_rss.style.display = 'none';
+      }
+    } else {
+      google_rss.style.display = 'none';
+    }
+  });
+}
+google.setOnLoadCallback(initFeed);

static/js/script.js

@@ -5,7 +5,7 @@ jQuery(function($) {
     for (url in urls) {
       var request_url = "/scan?url=" + encodeURIComponent(urls[url]);
       $.get(request_url, function(data) {
-        $('#main').append(data);
+        $('#content').append(data);
         DOMXSS.scanResponse($);
       });
     }
@@ -45,10 +45,11 @@ var DOMXSS = {
       //var text = $(elt).text(DOMXSS.highlight(elt.innerHTML)).html();
       var text = DOMXSS.markUp(DOMXSS.highlight(elt.innerHTML));
       var p = $(elt).parent();
-      $(elt).remove();
-      p.append('<h3 class="domxss_source">Number of sources found: ' + DOMXSS.source_count + '</h3>');
-      p.append('<h3 class="domxss_sink">Number of sinks found: ' + DOMXSS.sink_count + '</h3>');
-      p.append('<pre class="domxss_highlighted">' + text + '</pre>');
+      var t = p.parent();
+      p.remove();
+      t.append('<h3>Number of sources found: <span class="domxss_source">' + DOMXSS.source_count + '</span></h3>');
+      t.append('<h3>Number of sinks found: <span class="domxss_sink">' + DOMXSS.sink_count + '</span></h3>');
+      t.append('<pre class="domxss_highlighted">' + text + '</pre>');
     });
   }
 };

templates/base.html

@@ -8,10 +8,13 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <title>{{ title }}</title>
+  <title>{{ title|escape }}</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="DOMXSS Scanner is an online tool for finding potential DOM based XSS security vulnerabilities in the source code of Web pages and included JavaScript files.">
   <link rel="shortcut icon" href="/favicon.ico">
   <link rel="stylesheet" href="/static/css/style.css">
+  <link rel="stylesheet" href="/static/css/lib/960.css">
+  <link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
   <script src="/static/js/lib/modernizr-1.6.min.js"></script>
   {% if script_urls %}
   <script type="text/javascript">
@@ -22,19 +25,23 @@
 <body lang="en">
 
 <div id="container">
-  <header id="page_header">
-    <h1><a href="/">DOMXSS Scanner</a></h1>
-    {% include 'url_form.html' %}
+  <header id="page_header" class="container_12">
+    <div class="grid_12">
+      <h1 class="title"><a href="/" title="DOMXSS Scanner start page">DOMXSS Scanner</a></h1>
+      {% include 'url_form.html' %}
+    </div>
   </header>
 
-  <div id="main" role="main">
-
+  <div id="main" role="main" class="container_12">
+    <div id="content" class="grid_12">
     {% block content %}{% endblock %}
-
+    </div>
   </div>
 
-  <footer>
-    <p>DOMXSS Scanner</p>
+  {% block featured %}{% endblock %}
+
+  <footer id="page_footer" class="container_12">
+    <p class="small"><a href="/" title="DOMXSS Scanner start page">DOMXSS Scanner</a> is a tool for finding potential DOM based XSS security vulnerabilities created by <a href="http://www.ramiro.org/">Ramiro Gómez</a></p>
   </footer>
 </div>
 

templates/index.html

@@ -1 +1,41 @@
-{% extends 'base.html' %}
+{% extends 'base.html' %}
+
+{% block content %}
+<h2>What is DOMXSS Scanner?</h2>
+<p>DOMXSS Scanner is an online tool that helps you find potential DOM based XSS security vulnerabilities. Enter a URL to scan the document and the included scripts for DOMXSS sources and sinks in the source code of Web pages and JavaScript files.</p>
+<hr>
+<h2>What is DOM Based XSS?</h2>
+<blockquote><p>DOM Based XSS (or as it is called in some texts, “type-0 XSS”) is an XSS attack wherein the attack payload is executed as a result of modifying the DOM “environment” in the victim’s browser used by the original client side script, so that the client side code runs in an “unexpected” manner. That is, the page itself (the HTTP response that is) does not change, but the client side code contained in the page executes differently due to the malicious modifications that have occurred in the DOM environment.</p></blockquote>
+<p>Source: <a href="http://www.owasp.org/index.php/DOM_Based_XSS">OWASP DOM based XSS</a></p>
+<hr>
+{% endblock %}
+
+{% block featured %}
+
+<div id="featured" class="container_12 clearfix">
+
+<div class="grid_4">
+<h2>Learn About DOMXSS</h2>
+<ul>
+<li><a href="https://code.google.com/p/domxsswiki/">Dom XSS Test Cases Wiki</a></li>
+<li><a href="http://www.webappsec.org/projects/articles/071105.shtml">DOM Based Cross Site Scripting or XSS of the Third Kind</a></li>
+<li><a href="http://blog.mindedsecurity.com/2010/09/twitter-domxss-wrong-fix-and-something.html">A Twitter DomXss, a wrong fix and something more</a></li>
+<li><a href="http://it-republik.de/php/artikel/DOMXSS---Angriffe-aus-dem-Nirgendwo-3565.html">DOMXSS - Angriffe aus dem Nirgendwo</a></li>
+</ul>
+</div>
+
+<div class="grid_4">
+<h2>XSS News from Google</h2>
+<div id="google_rss"></div>
+<script src="https://www.google.com/jsapi?key=ABQIAAAAmrEfcOrtp2tfQZWrdKRqiRQiWVq29axjBET8aZ3BK7RfzzxqahR_H1S23sdooIgqihgBRMSRzuZazA" type="text/javascript"></script>
+<script src="{{ base_path }}/static/js/google_rss.js"></script>
+</div>
+
+<div class="grid_4">
+<h2>Spread DOMXSS Scanner</h2>
+<div class="like_widget"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
+<div class="like_widget"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdomxssscanner.appspot.com%2F&amp;layout=box_count&amp;show_faces=false&amp;width=62&amp;action=like&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:62px; height:65px;" allowTransparency="true"></iframe></div>
+</div>
+
+</div>
+{% endblock %}

templates/response.html

@@ -1,6 +1,6 @@
 <div class="response">
 {% if url %}
-  <h2 class="request_url">Results from scanning URL: {{ url|escape }}</h2>
+  <h2 class="request_url">Results from scanning URL: <a href="{{ url|escape }}">{{ url|escape }}</a></h2>
 {% endif %}
 
 {% if response_text %}