Wednesday, January 6, 2016

Hiding Information in Locations

Okay Lets hack a google spreadsheet, I'll explain in a minute:


Notice this part is what stays constant in different google forms:

    <div class="ss-form"><form action="https://docs.google.com/forms/d/YOUR CODE/formResponse" method="POST" id="ss-form" target="_self" onsubmit=""><ol role="list" class="ss-question-list" style="padding-left: 0">
<div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item  ss-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_464585175"><div class="ss-q-title">Description
</div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>
<input type="text" name="entry.464585175" value="" class="ss-q-short" id="entry_464585175" dir="auto" aria-label="Description  " title="">
<div class="error-message" id="667802394_errorMessage"></div>
<div class="required-message">This is a required question</div>
</div></div></div> <div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item  ss-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_1801456818"><div class="ss-q-title">Lat
</div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>
<input type="text" name="entry.1801456818" value="" class="ss-q-short" id="entry_1801456818" dir="auto" aria-label="Lat  " title="">
<div class="error-message" id="1641482710_errorMessage"></div>
<div class="required-message">This is a required question</div>
</div></div></div> <div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item  ss-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_1412176452"><div class="ss-q-title">Long
</div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>
<input type="text" name="entry.1412176452" value="" class="ss-q-short" id="entry_1412176452" dir="auto" aria-label="Long  " title="">
<div class="error-message" id="733292993_errorMessage"></div>
<div class="required-message">This is a required question</div>
</div></div></div>
<input type="hidden" name="draftResponse" value="[,,&quot;-7722594897214563767&quot;]
">
<input type="hidden" name="pageHistory" value="0">

<input type="hidden" name="fvv" value="0">


<input type="hidden" name="fbzx" value="-7722594897214563767">

<div class="ss-item ss-navigate"><table id="navigation-table"><tbody><tr><td class="ss-form-entry goog-inline-block" id="navigation-buttons" dir="ltr">
<input type="submit" name="submit" value="Submit" id="ss-submit" class="jfk-button jfk-button-action ">
<div class="ss-password-warning ss-secondary-text">Never submit passwords through Google Forms.</div></td>
</tr></tbody></table></div></ol></form></div>
</html>

with some variation in different constants(the alphanumeric strings).

Now to access the form in JS


Preview (hint: you can copy and paste the preview into Microsoft Word):
document.getElementById("entry_1801456818").value=event.latLng.lat();
     document.getElementById("entry_1412176452").value=event.latLng.lng();
       document.getElementById("entry_464585175").value=document.getElementById("text").value;
       document.getElementById('ss-submit').click();


Which causes button clicks like we did in the famous (kidding) facebook hacks. Okay now we
 can hook up a map to this, why? We can hide information at locations so that a client cannot 
access until at a location which might be useful in some interesting scenarios.




Okay so we add a map to our spreadsheet site and hide all the form stuff:


<!DOCTYPE html>
<html>
  <head>
    <title>HackAsheeT</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: transparent;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
  
}

    </style>
  </head>
  <body>
    <div id="floating-panel">
      <img src="trash.png" onclick="deleteMarkers();" width="20px" height="20px">
     
      <img src="usercompass.png" onclick="getit();" width="20px" height="20px">
    <input type="text" id="text">
    </div>
    <div id="map"></div>
    <p>Click on the map to add markers.</p>
    <script>

// In the following example, markers appear when the user clicks on the map.
// The markers are stored in an array.
// The user can then click an option to hide, show or delete the markers.
var map;
var markers = [];

function initMap() {
  var haightAshbury = {lat: 37.769, lng: -122.446};

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: haightAshbury,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // This event listener will call addMarker() when the map is clicked.
  map.addListener('click', function(event) {
    addMarker(event.latLng);
 
      
      
    document.getElementById("entry_1801456818").value=event.latLng.lat();
     document.getElementById("entry_1412176452").value=event.latLng.lng();
       document.getElementById("entry_464585175").value=document.getElementById("text").value;
       document.getElementById('ss-submit').click();
  });

  // Adds a marker at the center of the map.
  addMarker(haightAshbury);
}

// Adds a marker to the map and push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.push(marker);
}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setMapOnAll(null);
}

// Shows any markers currently in the array.
function showMarkers() {
  setMapOnAll(map);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
  clearMarkers();
  markers = [];
}
function getit(){
    

}
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=urkeyin=true&callback=initMap"></script>
  </body>
    
    <div class="ss-form"><form action="form" method="POST" id="ss-form" target="_self" onsubmit=""><ol role="list" class="ss-question-list" style="padding-left: 0">
<div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item  ss-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_464585175"><div class="ss-q-title">Description
</div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>
<input type="text" name="entry.464585175" value="" class="ss-q-short" id="entry_464585175" dir="auto" aria-label="Description  " title="">
<div class="error-message" id="667802394_errorMessage"></div>
<div class="required-message">This is a required question</div>
</div></div></div> <div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item  ss-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_1801456818"><div class="ss-q-title">Lat
</div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>
<input type="text" name="entry.1801456818" value="" class="ss-q-short" id="entry_1801456818" dir="auto" aria-label="Lat  " title="">
<div class="error-message" id="1641482710_errorMessage"></div>
<div class="required-message">This is a required question</div>
</div></div></div> <div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item  ss-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_1412176452"><div class="ss-q-title">Long
</div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>
<input type="text" name="entry.1412176452" value="" class="ss-q-short" id="entry_1412176452" dir="auto" aria-label="Long  " title="">
<div class="error-message" id="733292993_errorMessage"></div>
<div class="required-message">This is a required question</div>
</div></div></div>
<input type="hidden" name="draftResponse" value="[,,&quot;-7722594897214563767&quot;]
">
<input type="hidden" name="pageHistory" value="0">

<input type="hidden" name="fvv" value="0">


<input type="hidden" name="fbzx" value="-7722594897214563767">

<div class="ss-item ss-navigate"><table id="navigation-table"><tbody><tr><td class="ss-form-entry goog-inline-block" id="navigation-buttons" dir="ltr">
<input type="submit" name="submit" value="Submit" id="ss-submit" class="jfk-button jfk-button-action ">
<div class="ss-password-warning ss-secondary-text">Never submit passwords through Google Forms.</div></td>
</tr></tbody></table></div></ol></form></div>
</html>






Now that peice of garbage will add data to our spreadsheet with location and 


whatever we ut in the text box we made, I am not going to walk through building


 the form or the spreadsheet.














Now our "client" code:






Okay we are going to use a js lib called sheetrock.js and make a call to it to


 grab stuff from our hacked spreadsheet and dump it into a <div> based html table.


<!DOCTYPE html>
<html> 
<head> 
    
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>QWest</title> 
    
    
    
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
  <script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sheetrock/1.0.0/dist/sheetrock.min.js"></script>  

    
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        margin-left: auto;
  margin-right: auto;
       left:30px;
           right:auto;
        z-index: 5;
        background-color: #FFF;
        padding: 5px;
        border: 1px solid transparent;
          opacity: .9;
          align-content: center;
      }
        input{
            border: none;
border-color: transparent;
            border-style:none;
             -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
            
    overflow: auto;
    outline: none;

        }
        
         #holder{
              position: absolute;
        top: 5px;
        right: 0%;
        margin-left: 0;
        z-index: 5;
        background-color: transparent;
        padding: 5px;
        border: transparent;
          opacity: .8;
          align-content: left;
        }
         
         #holdertwo{
              position: absolute;
        top: 55px;
        right: 0%;
        margin-left: 0;
        z-index: 5;
        background-color: transparent;
        padding: 5px;
        border: transparent;
          opacity: .8;
          align-content: left;
        }

               statistics, tr{
         
    border-color: lighten(#34495E, 10%);
  
        }
    statistics,  td {
        
    border: 0px solid grey;
        border-radius: 5px;
    border-collapse: separate;
    background-color:#34495E;
    font-family:monospace;
         color: white;
}
        statistics,th{
                border: 0px solid grey;
        border-radius: 5px;
    border-collapse: separate;
    background-color:#000;
    font-family:monospace;
         color: white;
            
            
        }
    </style>
    
    
    
    
</head> 
<body onload="showtog()">
    <div id="holder">
    <img src="hackericon.png" width="50" height="50" align="left" onclick="showtwo()"><br>
  
        </div>
    <div id="holdertwo">
      <img src="usercompass.png" width="50" height="50" align ="left" onclick="showtog()"><br>
    <img src="facebookapipic.jpg" width="50" height="50" align="left" onclick="gof()">
    </div>
    <div id="tabler">
      <table id="statistics" class="table table-striped table-hover" ></table>
       
          </div>
    
    
    <script>
        
        function showtwo(){
            $('#holdertwo').fadeToggle(); 
            
        }
     function showtog(){
  
 $('#tabler').fadeToggle();
  

}
        function gof(){
         window.open("https://m.facebook.com/buddylist.php")  ;
        }
        
</script>
    
    
  
  <div id="map" style="width: 100%; height: 100%;"></div>

  <script type="text/javascript">
     /* 
      var table = document.getElementById('tabler'), 
    rows = table.getElementsByTagName('tr'),
    i, j, cells, customerId;

for (i = 0, j = rows.length; i < j; ++i) {
    cells = rows[i].getElementsByTagName('td');
    if (!cells.length) {
        continue;
    }
    customerId = cells[0].innerHTML;
}
      */
      
      
      
      
      
    var locations = [
    
['Tisch Library',42.406561, -71.119475  ],
['Bookstore',   42.405737   -71.120344  ],
['Dewick',  42.405294,  -71.121106  ],
['Cannon',  42.407167,  -71.119857  ],
['Campus Center',   42.405809   ,-71.119681 ],
['Arts Center', 42.404755   ,-71.118764 ],
['Gym'  ,42.408966  ,-71.114869 ],
['Residential Quad' ,42.408407  ,-71.121718 ],
['Academic Quad'    ,42.407583  ,-71.119586]
    ];
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: new google.maps.LatLng(-39.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
       // disableDefaultUI: true
    });
      

    
    var infowindow = new google.maps.InfoWindow();
    var marker, i;

    var markers = new Array();
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
      markers.push(marker);
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
            window.setTimeout(function snappy(){marker.setVisible(false);infowindow.close();}, 2000);
            
        }
      })(marker, i));
    }
        AutoCenter();
      map.setZoom(3);
    function AutoCenter() {
      //  Create a new viewpoint bound
      var bounds = new google.maps.LatLngBounds();
      //  Go through each...
      $.each(markers, function (index, marker) {
      bounds.extend(marker.position);
      });
      //  Fit these bounds to the map
      map.fitBounds(bounds);
    }
    AutoCenter();
 
 
   var infoWindow = new google.maps.InfoWindow({map: map});
 if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
       var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      infoWindow.setPosition(pos);
      infoWindow.setContent('You');
      map.setCenter(pos);
        
        
           for (i = 0; i < locations.length; i++) {  
         
            if(position.coords.lat-locations[i][3]>.0002){
             if(position.coords.long-locations[i][4]>.0002){
             alert("Found it");
             }
            }
            
        }
            
        
    
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }

 
      map.setZoom(3);

 
    </script>
    
    
    
    <script>
var mySpreadsheet='https://docs.google.com/spreadsheets/d/YOUR PUBLIC SPREADSHEET URL';
 $('#statistics').sheetrock({
  url: mySpreadsheet
});
    
    </script>
</body>
</html>











Which gives us:































Posted by



at


































No comments:















Post a Comment


















        

      









Subscribe to:
Post Comments (Atom)