Reglas de Seguridad en Firebase Storage para Blogs

Clase 24 de 32 • Curso de Firebase 5 para Web

Resumen

Así como las reglas de seguridad de la base de datos en Firestore, el servicio de Firebase Storage nos permite limitar el acceso de los usuarios a ciertos archivos especiales de la aplicación. Todas las reglas de seguridad en cualquier servicio de Firebase se escriben de la misma manera.

En esta clase vamos a limitar la subida de archivos a usuarios autenticados y solo permitir el almacenamiento si los archivos son de tipo imagen u ocupan menos de 5 megas de almacenamiento:

match /imgPosts/{userId}/{imgId} {
        allow write: if request.resource.size < 5 * 1024 * 1024
                && request.resource.contentType.matches('image/.*')
                && request.auth.uid != null
                && request.auth.uid == userId
}

Carlos Eduardo Gomez García

teacher•

Sigo pensando que las reglas de seguridad de Google son lo mismo que escribir código backend jaja es como aprender un lenguaje de programación totalmente nuevo

Pero algo que no me gusta es que no puedes debuggear, por ejemplo, no me dejaba subir la imagen por falta de permisos, y quería ver cuál era la condición que estaba fallando, y no podía debuggear, al final la condición era el límite de peso ya que había escrito mal el .size

Eden Gomez Gress

student•

Buen dia companeros, segui el ejemplo de las reglas de firebase storage pero no me deja subir nada, aun estando auntenticado:

Estas son las reglas:

Eden Gomez Gress

student•

Juan Guillermo Gómez Torres

teacher•

Hola, no veo las reglas

Alejandro González Reyes

student•

¿Porque en storage aunque las reglas estén definidas solo para usuarios autenticados, las imagenes de los post se siguen visualizando aunque este sin logearme?

Diego Forero

Team Platzi•

Hola puedes comprtir las reglas que tienes definidas para ver si es un problema con la definición de alguna de ellas.

Daniel Esteves

student•

¡Hola! El compañero Eden publicó la imagen de las reglas de cómo deben estar escritas, ¿podrías comprar con sus reglas a ver si tienes algún typo a ver si son lo mismo o hay algún error?

Paolo Joaquin Pinto Perez

student•

Reto completado:

pd: no puedo creer que hayan pasado casi 5 años desde que se publico el curso y sea el primero en publicar la solucion del reto:

Andersson Rios Infante

student•

jajajajaa

Andersson Rios Infante

student•

request.auth.uid != null && request.auth.uid == userId
Esta ultima linea no es necesaria?

Maria Margarita Salas

student•

[usando version actual de firebase de junio 2023]

En el video anterior no logre subir nada al storage de firebase, en este pude luego de agregar las reglas mencionadas en el video y hacer este cambio en el código en postController.js

$('#btnUploadFile').on('change', e => {
    const user = firebase.auth().currentUser
    if(user == null){
      Materialize.toast(`Para crear el post debes estar autenticado`, 4000)
      return
    }else{
      const file = e.target.files[0]
      const post = new Post()
      post.subirImagenPost(file,user.uid)  
    }
  })

Andersson Rios Infante

student•

¿Para poder subir la imagen verdad?

Luis Abdel Rangel Castro

student•

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /imgsPosts/{allPaths=**} {
      allow read: if true;
    }
    match /imgsPosts/{userId}/{imgId} {
        allow write: if request.resource.size &lt; 5 * 1024 * 1024
                &amp;&amp; request.resource.contentType.matches('image/.*')
                &amp;&amp; request.auth.uid != null
                &amp;&amp; request.auth.uid == userId
		}
  }
}

Jorge Hernandez Rozo

student•

¿Como puedo quitar el error de? :

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Wonder Jhonny Diaz Gonzalez

student•

Hola,

Eso es un error del CORS o Cross-origin resource sharing. Hay documentacion en el que puedes profundizar mas en el tema. Algunas soluciones:

En desarrollo puede utilizar una extension de Google Chrome llamado Moesif Orign & CORS Changer y asi pruebas que los datos se estan enviando y recibiendo.

Desde Node puedes descargar el paquete de NPM de cors y configurarlo segun la documentacion. Para otros lenguajes hay distintas rutas

En esta pagina de explica como evitar el bloqueo sin configurar el servidor https://cors-anywhere.herokuapp.com/ anteponiendo el mismo enlace.

Saludos

Juan José Fernández Duarte

student•

En la documentación de firebase existe como configurar CORS. A mi me paso un error similar al intentar descargar por URL un archivo en Storage. Hay varias formas de solucionarlo, pero lo que yo hice es configurar mi proyecto en el Google Cloud SDK. Simplemente segui los pasos que indican desde el siguiente link:

https://firebase.google.com/docs/storage/web/download-files#cors_configuration

Suerte.

jose zuñiga

student•

Código para el reto. Debes agregar el id btnComentarios al botón enviar en el index.html:

<input id="btnComentarios" type="submit" class="waves-effect waves-light btn btnPpal" value="Enviar" />
```postController.js

```js
$('#btnComentarios').click(() => {
    // Validar que el usuario esta autenticado
    const user = firebase.auth().currentUser;
    if(user.uid === null){
      Materialize.toast(`Para crear el post debes estar autenticado`, 4000);
      return;
    }
    
    const nombreContacto = $('#nombreContacto').val();
    const emailContacto = $('#emailContacto').val();
    const comentarioTipo = $('#comentarioTipo').prop('checked');
    const reclamoTipo = $('#reclamoTipo').prop('checked');
    const mejoraTipo = $('#mejoraTipo').prop('checked');
    const otroTipo = $('#otroTipo').prop('checked');
    const comentariosContacto = $('#comentariosContacto').val();
    
    const post = new Post();
    post.crearComentario(
      user.uid, 
      user.email,
      nombreContacto,
      emailContacto,
      comentarioTipo,
      reclamoTipo,
      mejoraTipo,
      otroTipo,
      comentariosContacto
    )

  })
```post.js

```js
crearComentario(uid, emailUser, nombreContacto, emailContacto, comentarioTipo, reclamoTipo, mejoraTipo, otroTipo, comentariosContacto) {
    return this.db
      .collection("comentarios")
      .add({
        uid: uid,
        autor: emailUser,
        nombreContacto: nombreContacto, 
        emailContacto: emailContacto, 
        comentarioTipo: comentarioTipo, 
        reclamoTipo: reclamoTipo, 
        mejoraTipo: mejoraTipo, 
        otroTipo: otroTipo, 
        comentariosContacto: comentariosContacto,
        fecha: firebase.firestore.FieldValue.serverTimestamp(),
      })
      .then((docRef) => {
        console.log("Comentario creado ID: ", docRef.id);
        Materialize.toast(`Comentario creado con exito por ${docRef.autor}`, 4000);
      })
      .catch((error) => {
        Materialize.toast(`Error al crear el comentario ${error}`, 4000);
      });
  }
```Reglas de seguridad:

```js
rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /posts/{post} {
      allow read, write, update, delete: if request.auth.uid != null;
      allow list: if true;
    }
    match /posts/{post}/{uid} {
    	allow update, delete: if request.auth.uid == uid 
      											&& request.resource.data.email == resource.data.email;
    }    
    match /comentarios/{comentario} {
      allow read, write, update, delete: if request.auth.uid != null;
      allow list: if true;
    }
    match /comentarios/{comentario}/{uid} {
    	allow update, delete: if request.auth.uid == uid 
      											&& request.resource.data.email == resource.data.email;
    }
  }
}

andrés eduardo betancourt bescanza

student•

Donde puedo aprendar mas de estas reglas? Quisiera hacer hacer una donde si el archivo ya se encuentra en la storage este no se pueda repetir

Bob Code

student•

https://firebase.google.com/docs/storage/security/

Ricardo

student•

Eso ya lo trae por defecto, trate de subir varias veces la misma imagen y no lo permite, pero si lo relaciona con los posts relacionados

Erik Milon Garcia Tacas

student•

Esta debe ser las reglas para el storage, en lo que muestra el profesor esta con imgPosts, pero en el codigo que se realizo nosotros creamos como imgsPosts

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /imgsPosts/{allPaths=**} {
      allow read: if true;
    }
    match /imgsPosts/{userId}/{imgId}{
    	allow write:if request.resource.size < 5 * 1024 * 1024
      			&& request.resource.contentType.matches('image/.*')
            && request.auth.uid != null
            && request.auth.uid == userId
    }
  }
}

Gadiel Gerardo Wisar Sotelo

student•

Alguien seria amable de explicarme como determino 5 * 1024 * 1024 :/?

Usuario anónimo

user•

1 kilobyte = 1024 bytes 1 megabyte = 1024 kilobytes eso quiere de decir que un megabyte es igual a 1024 x 1024 bytes (seguramente firebase mide todo en bytes) entonces identifica la fotos no como 5 megas sino como 1048576 bytes

espero hacerme entender

Usuario anónimo

user•

acabo de mirar en el uso de storage en la consola y si, firebase cuenta es los bytes, por eso hay que multiplicar x 1024 2 veces para llegar a megas

Eden Gomez Gress

student•

Reglas de Seguridad en Firebase Storage para Blogs

Bienvenida e Introducción

Firebase para Web: Autenticación y Base de Datos

Firebase: Plataforma Integral para Desarrollar Aplicaciones Web y Móviles

Creación y gestión de un videoblog con Firebase

Consola Web de Administración

Configuración de Firebase en Proyectos Web y Móviles

Configuración de Firebase en Proyecto Web con JavaScript

Autenticación de Usuarios

Autenticación y Creación de Usuarios con Firebase

Autenticación con Firebase: Email y Google paso a paso

Autenticación de Usuarios con Firebase: Registro y Verificación de Email

Autenticación con Google usando Firebase en aplicaciones web

Implementación de Autenticación con Facebook en Firebase

Gestión de Autenticación de Usuarios con Firebase

Gestión de Usuarios en Firebase: Creación, Inhabilitación y Plantillas

Exportar e Importar Usuarios en Firebase Auth

Gestión de la Base de Datos

Firestore: Gestión y Estructura de Datos en Firebase

Comparación entre Realtime Database y Firestore de Firebase

Configuración de Firestore en un Proyecto Firebase

Inserción de documentos en Firestore con JavaScript

Consultas en Tiempo Real con Firestore para Aplicaciones Web

Consultas y Operaciones de Datos en Firestore

Reglas de Seguridad en Bases de Datos con Firestore

Creación y gestión de índices en Firestore para optimizar consultas

Almacenamiento de archivos

Almacenamiento de Archivos en Firebase: Gestión y Seguridad

Subir Imágenes a Firebase Storage desde un Blog

Reglas de Seguridad en Firebase Storage para Blogs

Hosting

Características y beneficios del hosting de Firebase

Despliegue de Aplicaciones con Firebase Hosting

Configuración Personalizada de Hosting con Firebase

Notificaciones Push

Notificaciones Push con Firebase Cloud Messaging

Implementación de Notificaciones en Blog con Firebase

Implementación de Notificaciones Push con Firebase y Firestore

Implementación de Notificaciones Push con Firebase en Blogs

Conclusiones

Integración de Firebase en Aplicaciones Web