Blog de Antonio Manuel Muñiz

Desarrollo, Ingeniería y Calidad del Software

Autorización del lado del cliente con ExtJS

Llevo algún tiempo usando ExtJS como API Javascript para desarrollar interfaces gráficas de aplicaciones web. Uno de los aspectos que más “ensucian” el diseño (a nivel de código fuente) es el control de la autorización, es decir, cómo cambia la UI en función de los permisos del usuario: qué puede/no puede ver y qué puede/no puede hacer. Evidentemente este sólo es un primer nivel de control que no está orientado a la seguridad, sino a la usabilidad, es el servidor el que realmente permite (o no) llevar a cabo una acción a un usuario autenticado.

En este post voy a contar como implementamos en klicap este tipo de autorización del lado del cliente.

Es lógico que la base de la aplicación sea la misma para todos los tipos de usuarios (con todo tipo de roles), y que lo único que cambie sean pequeños detalles, como las barras de botones (Ext.ToolBar, Ext.Window.bbar, etc) o los formularios (Ext.form.FormPanel), además de secciones completas con acceso restringido.

En klicap hemos desarrollado una pequeña utilidad a la que llamamos “micro framework de autorización”. Para ilustrar el ejemplo supongamos que tenemos una ventana (Ext.Window) con botones de Guardar y Cancelar que contiene un Grid (Ext.grid.GridPanel) con tres botones: añadir, eliminar y refrescar. La lógica de autorización del ejemplo sería:

  • role1: puede ver y usar todos los botones
  • role2: sólo puede ver y usar el botón refrescar

El código fuente sería algo así (se omiten partes el código para simplificar):

// Valores de los roles del usuario actual, recuperado
// de alguna forma desde el servidor
var role1 = getRole1();
var role2 = getRole2();

MyGrid = Ext.extend(Ext.grid.GridPanel, {
 initComponent: function() {
  if(role1) {
   this.tbar = [
    {text: 'Añadir'}, '-',
    {text: 'Eliminar'}, '->',
    {text: 'Refrescar'}
   ];
  } else if(role2) {
   this.tbar = [
    {text: 'Refrescar'}
   ];
  }
  MyGrid.superclass.initComponent.call(this);
 }
});
MyWindow = Ext.extends(Ext.Window, {
 initComponent: function() {
  if(role1) {
   this.bbar= [
    {text: 'Guardar'},
    {text: 'Cancelar'}
   ];
  }
  MyWindow.superclass.initComponent.call(this);
 }
});

var window = new MyWindow();
window.add(new MyGrid());
window.show();

El número de sentencias “if else if” crecerá (como mínimo) de forma lineal con el número de roles en un caso de autorización común. Por tanto el objetivo es eliminar todo ese código y centralizarlo de forma genérica. Usando el “micro framework” el código sería el siguiente:

var authz = new klicap.commons.extjs.auth.Authorization(
 new klicap.commons.extjs.auth.Roles({
  role1: getRole1(),
  role2: getRole2()
 })
);
MyGrid = Ext.extend(Ext.grid.GridPanel, {
 initComponent: function() {
  var fullTbar = [
   {text: 'Añadir', require: {role1: true} }, '-',
   {text: 'Eliminar', require: {role1: true} }, '->',
   {text: 'Refrescar', require: {role2: true} }
  ];
  this.tbar = authz.getAuthorizedElements(fullTbar);
  MyGrid.superclass.initComponent.call(this);
 }
});
MyWindow = Ext.extends(Ext.Window, {
 initComponent: function() {
  fullBbar= [
   {text: 'Guardar', require: {role1: true} },
   {text: 'Cancelar', require: {role1: true} }
  ];
  this.bbar = authz.getAuthorizedElements(fullBbar);
  MyWindow.superclass.initComponent.call(this);
 }
});

var window = new MyWindow();
window.add(new MyGrid());
window.show();

El efecto será el mismo pero en el código fuente de la UI no hay una sola sentencia condicional para el control de la autorización. Simplemente se debe especificar qué roles requiere cada elemento para ser mostrado (mediante el atributo ‘require’).

Actualmente existe otra funcionalidad del micro framework para autorización en formularios (se habilita o deshabilita la edición de ciertos campos de un formulario en función de los ‘require’ de éste). Este pequeña utilidad irá evolucionando acorde a las necesidades de klicap en este sentido.

La utilidad está contenida en un único fichero javascript. Si quieres probarlo puedes descargarlo, desde klicap lo hemos publicado con licencia GNU GPL v3.

8 Respuestas a “Autorización del lado del cliente con ExtJS

  1. David 6 junio 2013 en 1:45 pm

    Hola Antonio, buscando información sobre seguridad en Ext JS y PHP he llegado a este blog ya que intento permitir o no permitir ciertos contenidos en mi pagina en función del login (roles).

    Tengo un problema de seguridad pendiente de dar una solución que creo que es vulnerable en el código expuesto en tu blog.

    No lo expongo aquí por seguridad pero si te interesa te lo mando por mail.

  2. David 6 junio 2013 en 1:58 pm

    Perfecto!

    Examinando el primer codigo expuesto…

    Imagina que al cargar la pagina de klicap abro la herramienta para desarrolladores del navegador, marco un punto de parada justo en la linea

    MyGrid = Ext.extend(Ext.grid.GridPanel, {

    y ejecuto hasta llegar a que se detenga en esa linea. Se detiene y abro la consola para modificar el valor de role1 a true, me parece que puedo eliminar registros, no?

    Mi pregunta es si con el segundo codigo esta vulnerabilidad quedaria resuelta.

    Y en cuanto a mi duda, yo uso una variable que se activa cuando el login es con el admin. Pero me ocurre lo mismo que intento explicarte, si modifico ese valor con la consola y lo pongo a true cualquier usuario puede añadir, modificar y eliminar registros del grid.

    Un saludo.

    • Antonio Manuel Muñiz Martín 6 junio 2013 en 2:07 pm

      Hola David.

      Efectivamente, si modificas el código en tu browser verás cosas en la UI que no deberías ver. Pero sólo podrás VERLAS! Podrías eliminar un registro, pero no tendría reflejo en el servidor (y por tanto la BD, si es que existe una).

      La seguridad en una app web siempre debe ser controlada tanto del lado del cliente (browser) como del lado del servidor (mucho más importante). Cualquier app web – decente – controlará del lado del servidor las acciones que un usuario puede realizar en función de sus permisos (o roles). Se puede decir que todo lo que se ejecute en el browser está fuera de tu control (como desarrollador), porque como bien dices, cualquiera puede modificar y ejecutar lo que quiera.

      En conclusión, la seguridad del lado del cliente es simplemente aplicable a la visualización (si me apuras… no lo llamaría seguridad), donde se controla realmente qué se puede hacer y que no es en el servidor.

      Un saludo.

  3. Anabel 23 octubre 2013 en 10:27 pm

    Hola, tengo la misma duda de Victor mi problema es como recuperar el rol.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: