Relocate (sin $_GET), sino con Submit ($_POST)

Utilidad: Para garantizar la seguridad a tus aplicaciones web, DEBES EVITAR EL USO DEL MÉTODO $_GET ( tanto para los campos de entrada de datos, como por la URL ). Aquí mostramos cómo evitarlo cuando se trata de una bandeja o tabla de registro de datos, sustituyéndolo por el método $_POST a través de JavaScript, para realizar los respectivos llamados de actualización de registros mucho más seguros.


El siguiente código es el archivo index.html, en el cual se mostrará como ejemplo una tabla que simula ser una bandeja con 3 registros. En la parte superior del elemento <table> aparece el botón para agregar (insertar) registro. Y cada registro de la tabla tiene las opciones respectivas de editar y eliminar.

Observe que haremos referencia a 2 archivos:

Y usamos 3 archivos de imágenes:

  • add.png
  • edit.png
  • cross.png
index.html

 <!DOCTYPE html>
 <html>
 <head>
     <title>JavaScript & JSON</title>
     <meta http-equiv=Content-Type content="text/html; charset=UTF-8">
     <script src="relocate.js"></script>
     <script src="submit.js"></script>
 </head>
 <body>
 <h1>Ej.: Relocate (sin $_GET), sino con Submit ($_POST)</h1>
 <section id="contenido">
     <button type="button" onClick="submitInsert();" title="Insertar...">
         Agregar Registro <img src="add.png" align="absmiddle" border="0">
     </button>
     <table width="100%" border="1" align="center">
         <thead><tr><th>Registro</th><th>Descripción</th><th>Acciones</th></tr></thead>
         <tbody>
             <tr>
                 <td>Registro 1</td><td>Descripcion A</td>
                 <td align="center" style="cursor:pointer;">
                     <a onClick="submitEdit( 1, 'Registro 1', 'Descripcion A' );">
                         <img src="edit.png" title="Editar..."/>
                     </a>
                     <a onClick="submitDelete( 1 );"><img src="cross.png" title="Eliminar..."/></a>
                 </td>
             </tr>
             <tr>
                 <td>Registro 2</td><td>Descripcion B</td>
                 <td align="center" style="cursor:pointer;">
                     <a onClick="submitEdit( 2, 'Registro 2', 'Descripcion B' );">
                         <img src="edit.png" title="Editar..."/>
                     </a>
                     <a onClick="submitDelete( 2 );"><img src="cross.png" title="Eliminar..."/></a>
                 </td>
             </tr>
             <tr>
                 <td>Registro 3</td><td>Descripcion C</td>
                 <td align="center" style="cursor:pointer;" title="Editar...">
                     <a onClick="submitEdit( 3, 'Registro 3', 'Descripcion C' );">
                         <img src="edit.png" title="Editar..."/>
                     </a>
                     <a onClick="submitDelete( 3 );"><img src="cross.png" title="Eliminar..."/></a>
                 </td>
             </tr>
         </tbody>
     </table>
 </section>
 </body>
 </html>


A continuación mostramos el contenido del archivo relocate.js y su función con el mismo nombre.

Recibe 2 parámetros.

  • page: Ruta y nombre del archivo hacia donde se hará el submit.
  • params: JSON con ( n cantidad de ) claves (atributos) y valores (propiedades) del formulario que se creará dinámicamente.
relocate.js

 /** Ejecuta un sumit a una página específica, pasando los valores suministrados bajo el método POST.
 * @param page (string) Representa la ruta y el archivo de la página a donde se envía el sumit.
 * @param params (array) Lista de valores que se enviarán por el método POST.*/
 function relocate( page, params )
 {
     var body = document.body;
     form = document.createElement( "form" );
     form.method = "POST";
     form.action = page;
     form.name = "jsform";
     for ( index in params ) {
         var input = document.createElement( "input" );
         input.type = "hidden";
         input.name = index;
         input.id = index;
         input.value = params[ index ];
         form.appendChild( input );
     }
     body.appendChild( form );
     form.submit();
 }


Seguimos con el archivo submit.js, el cual generalmente contiene 3 respectivas funciones:

  • submitInsert()
  • submitEdit()
  • submitDelete()
submit.js

 function submitInsert()
 {
     relocate( "index.php", {} );
 }

 function submitEdit( val1, val2, val3 )
 {
     relocate( "index.php", { "id" : val1, "reg" : val2, "des" : val3 } );
 }

 function submitDelete( val )
 {
     if ( confirm( "¿Desea Eliminar Este Registro?" ) )
         relocate( "index.php", { "id" : val } );
 }

Observe que para este ejemplo, a la función submitInsert() no le estamos enviando parámetros. Mientras que para la función submitEdit() le pasamos tres (3) valores. Y a la función submitDelete() le mandamos uno (1). En este sentido, usted podrá pasar ( n ) cantidad de valores, según lo requiera la funcionalidad de su aplicación.


Para corroborar este ejemplo vamos a utilizar el siguiente archivo .php, a donde enviaremos el submit.

index.php

 <?php {
     echo "<pre>";
     print_r($_POST);
     echo "</pre>";
 }


Pruebe cada funcionalidad de cada registro ( de ser posible, habra la ventana emergente para observar el URL ) y

NOTE QUE NADA PASA POR EL MÉTODO $_GET

He aquí el ejemplo:


Tool developed at revolution, under free software. Copyleft 2017.