JSFiddle - React, Tailwind, and code Playground

by stevenkaspar

HTML

<span>this table represents an SQL datatable</span>
<table>
  <thead>
    <tr>
      <td>id</td>
      <td>name</td>
    </tr>
  </thead>
  <tbody id='dataBody'>

  </tbody>
</table>

<script>
// this is the data stored in a javascript friendly way
// but you can see there are 2 entries. which are represented to the right
var sql_data = [
  {
    id: 1,
    name: 'Steven',
    password: 'StevensPasswordPlaya'
  },{
    id: 2,
    name: 'Jason',
    password: 'Playa2'
  }
]
// this function will go through the sql_rows variable passed in and render the sql table
function drawTable(sql_rows){
  document.getElementById('dataBody').innerHTML = '';
  sql_rows.forEach(function(row){
    document.getElementById('dataBody').innerHTML += '<tr><td>' + row.id + '</td><td>' + row.name + '</td></tr>';
  })
}
// this function is called when I click the "add row" button
function insertRow(event){
  event.preventDefault(); // ignore this
  
  // gets the value of the id field (don't change. as this should be auto incrementing and a user would never be asked to give this)
  var id = document.getElementById('id').value;
  document.getElementById('id').value = parseInt(document.getElementById('id').value) + 1;
  
  // get the value of the name input box
  var name = document.getElementById('name').value;
  
  // I am expecting the name input to make sense, like "Kevin" or something
  // but if I am a hacker, I could put into the name field *- copy below line into the name input field -*
    // jack"}); alert(sql_data[0].password); var doesnt_matter = ({phony: "    
  // so what will end up getting evaluated and ran is 
  // sql_data.push({id: 3,name: "jack"}); alert(sql_data[0].password); var doesnt_matter = ({phony: ""})
  
  // take that one command at a time
    // 'sql_data.push({id: 3,name: "'jack'"});' adds the new user jack (this should be what it does and all it does)
    // 'alert(sql_data[0].password);' now retrieve the first entry of sql_data and alert me its password
  ...