safer DB write and user input show + new 3 column schema for crowdsourcing table + some css

crowdsourcingModule/README.md

+The user inputs (term/topic suggestions) are saved in an sqlite3 db in dir db/, under table terms.
+
+For a new installation one should create the db with the following commands:
+
+```
+> cd db
+> sqlite3 crowdsourcing.db
+sqlite> CREATE TABLE terms (source CHAR(250),suggestion CHAR(250),time CHAR(30)) ;
+sqlite> .exit
+> chmod -v 775 crowdsourcing.db
+```
+

crowdsourcingModule/db/g.php

+<?php
+
+        try {
+                print "<style>";
+                print "table, th, td {";
+                print "   border: 1px solid black;";
+                print "}";
+                print "</style>";
+                //first pass just gets the column names
+                print '<table>';
+                $con = new PDO("sqlite:crowdsourcing.db");
+                $sql_select = 'SELECT * FROM terms ORDER BY rowid DESC';
+                $result = $con->query($sql_select);
+                //return only the first row (we only need field names)
+                $row = $result->fetch(PDO::FETCH_ASSOC);
+                print " <tr> \n";
+                foreach ($row as $field => $value){
+                        print " <th>$field</th> \n";
+                } // end foreach
+                print " </tr> \n";
+                //second query gets the data
+                $data = $con->query($sql_select);
+                $data->setFetchMode(PDO::FETCH_ASSOC);
+                foreach($data as $row){
+                        print " <tr> \n";
+                        foreach ($row as $name=>$value){
+                                print " <td>$value</td> \n";
+                        } // end field loop
+                        print " </tr> \n";
+                } // end record loop
+                print "</table> \n";
+        } catch(PDOException $e) {
+                echo 'ERROR: ' . $e->getMessage();
+        } // end try
+
+
+        // // header('Content-Type: application/json');
+        // $sql_select = 'SELECT * FROM terms ORDER BY rowid DESC';
+        // // echo "$sql_select";
+        // $base = new PDO("sqlite:crowdsourcing.db");
+        // $results = display_data( $base->query($sql_select) );
+        // // $results = array();
+        // // foreach ($base->query($sql_select) as $row) {
+        // //         array_push($results, $row);
+        // // }
+        // // $base = null;
+
+        // echo $results;
+
+
+?>

crowdsourcingModule/db/s.php

 <?php
-
+    
+    try {
         header('Content-Type: application/json');
 
         if ($_POST) {
-                $source = ( ($_POST['source'])? $_POST['source'] : "" );
-                $suggestion = ( ($_POST['data'])? $_POST['data'] : "" );
-                $date = ( ($_POST['date'])? $_POST['date'] : "" );
-                $geo = ( ($_POST['geo'])? $_POST['geo'] : "" );
-                $new_ = ( ($_POST['new'])? $_POST['new'] : -1 )-2;
-                $sql_insert = 'INSERT into terms values ( "'.$source.'" , "'.$suggestion.'" , "'.$date.'" , "'.$geo.'" , '.$new_.' )';
-                $base = new PDO("sqlite:crowdsourcing.db");
-                $base->exec($sql_insert);
-                $base = null;
-                echo json_encode( [ $suggestion , "OK"] );
+            $source = ( ($_POST['source'])? $_POST['source'] : "" );
+            $suggestion = ( ($_POST['data'])? $_POST['data'] : "" );
+            $date = ( ($_POST['date'])? $_POST['date'] : "" );
+            $sql_insert = 'INSERT into terms (source, suggestion, time) values ( :source, :suggestion, :date) ; ';
+            $base = new PDO("sqlite:crowdsourcing.db");
+            $query = $base->prepare($sql_insert);
+            $query->bindParam(':source', $source, PDO::PARAM_STR);
+            $query->bindParam(':suggestion', $suggestion, PDO::PARAM_STR);
+            $query->bindParam(':date', $date, PDO::PARAM_STR);
+            $query->execute() ;
+            $base = null;
+            echo json_encode( [ $suggestion , "OK"] );
         } else {
-                echo json_encode( [ "OK"] );
+            echo json_encode( [ "OK"] );
         }
+    }
+        
+    catch(Exception $e) {
+        echo 'Message: ' .$e->getMessage();
+    }
 
-?>
\ No newline at end of file
+?>

crowdsourcingModule/suggest.js

@@ -17,7 +17,6 @@ $("#searchinput").on("tw:gotAutocomplete", function(e) {
     $('#savesuggestion').prop('disabled', true) ;
 });
 
-
 // eraseNodeSet event when Tinawab had an empty search or unclick
 $("#searchinput").on("tw:eraseNodeSet", function(e) {
     clean_crowdsourcingzone() ;
@@ -33,9 +32,14 @@ $("#searchinput").on("tw:emptyNodeSet", function(e) {
         // (if subchain was in no autocomplete term, it's already on)
         $('#savesuggestion').prop('disabled', false) ;
 
-        // save_suggestions
-        $("#crowdsourcing_answer").html("<p>The topic <i>\"" + e.q + "\"</i> is not in the map.</p> <p>(You can click the grey <span class=\"glyphicon glyphicon-save\"></span> button to propose it as a suggestion.)</p>") ;
-        
+        var p = $('<p>');
+        var i = $('<i>');
+        i.text('"'+e.q+'"');    // using jquery.text sanitize
+        p.append('The topic ');
+        p.append(i);
+        p.append(' is not in the map.');
+        $("#crowdsourcing_answer").append(p).append('<p>(You can click the grey <span class="glyphicon glyphicon-save"></span> button to suggest it.)</p>');
+
         // $("#searchinput").val() = query ;
     }
 });
@@ -45,7 +49,7 @@ $("#savesuggestion").click(function(){
     if (typeof query != "string" || !query.length) {
         query = TW.lastQuery ;
     }
-    query = $.trim( query.toLowerCase() ) ;
+    query = normalizeString(query) ;
     save_suggestions(query) ;
 })
 
@@ -54,15 +58,12 @@ function save_suggestions(term) {
         "source": window.location.href,
         "data" : term,
         "date" : (new Date()).toISOString(),
-        "geo" : "ip and geoloc"
     }
     
-    // sqlite columns in table 'terms'
+    // sqlite columns in new table 'terms'
     // 0|source|CHAR(250)|0||0
     // 1|suggestion|CHAR(250)|0||0
     // 2|time|CHAR(30)|0||0
-    // 3|space|CHAR(100)|0||0
-    // 4|new|INTEGER|0||0
     
     // console.log( "SAVE INFO:" + info )
     $.ajax({
@@ -76,7 +77,13 @@ function save_suggestions(term) {
             console.log( "SUCCESS" )
             console.log( data )
             //$("#sendcrowds").html(D["#sendcrowds"]["thanks"][LA]) //showing message
-            $("#crowdsourcing_answer").html("<p><b>Thank you !</b><br/>(<i>\"" + term + "\"</i> was saved as a suggestion)</p>") ;
+            var p = $('<p>');
+            var i = $('<i>');
+            i.text('"'+term+'"');
+            p.append('<b>Thank you !</b><br/>');
+            p.append(i);
+            p.append(' was saved as a suggestion');
+            $("#crowdsourcing_answer").html(p) ;
             
             // show "saved" icon
             $("#saveicon").removeClass("glyphicon-save");

libs/css2/custom.css

@@ -139,17 +139,16 @@
     font-family:'Glyphicons Halflings';
     content:"\e114 ";
     float: right;
-    color: blue;
+    color: #E3A13D;
 }
 .panel-heading a {
     text-decoration: none !important;
 }
-.panel-heading a:hover {
-    border-color: blue;
-    color: black;
-}
+
 .panel-heading a.collapsed:before {
+    font-family:'Glyphicons Halflings';
     content:"\e114 ";
+    float: right;
     color:grey;
 }
 

tinawebJS/globalUtils.js

@@ -194,17 +194,24 @@ function rgbToHex(r, g, b) {
 
 
 // lowercase etc query strings
-normalizeString = function(string) {
+normalizeString = function(string, escapeHtml) {
+    if (typeof escapeHtml == "undefined") {
+        escapeHtml = true ;
+    }
     if (! typeof string == "string") {
         return "" ;
     }
     else {
-        return $.trim( string.toLowerCase() )
+        string = $.trim( string.toLowerCase() )
+        if (escapeHtml == true) {
+            string = saferString(string) ;
+        }
+        return string ;
     }
 }
 
-// html-escape user input strings
-// /!\ TODO check if safe enough?
+// html-escape user-input strings (before printing them out)
+// (or use jquery .text())
 saferString = function(string) {
     // TODO table in an outer scope
     conversions = { 
@@ -213,10 +220,12 @@ saferString = function(string) {
         '>' : '>'    ,
         '"' : '"'  ,
         "'" : '''  ,
+        "{" : '{'  ,
+        "}" : '}'  ,
         '%' : '%' 
     } ;
     
-    matchables = /[&<>"'%]/ ;
+    matchables = /[&<>"'{}%]/g ;
     
     if (! typeof string == "string") {
         return "" ;