Forem: Horacio Rivero

Upload file using Fetch and calc the progress using readable streams not work as expected (Browser)

Horacio Rivero — Sun, 02 Jan 2022 04:18:42 +0000

I am trying to upload a file using fetch streams, I need can calculate the upload progress.

But on the server I receive an corrupt file of 0 bytes, I really don't know how to use the ReadableStreams feature, that is a really new feature.

Client (Browser)

const fileReadble = (reader) => new ReadableStream({
  start(controller) {
     return pump()
      function pump() {
        return reader.read().then(({ done, value }) => {
          if (done) {
              controller.close()
              return
          }

          controller.enqueue(value)
          return pump()
        })
      }
  }

const uploadVideo = async (file) => {
    const fileReader = file.stream().getReader()
    const response = await fetch('http://localhost:3005', { 
      method: 'POST',   
      body: fileReadble(fileReader),
    })

    if (!response.ok) {
      console.error(`unexpected response ${response.statusText}`)
      return
    }
}
})

Server (Node)

import http from 'node:http'
import { createWriteStream } from 'node:fs'

http
  .createServer((req) => {
    if (req.method !== 'POST') return
    req.pipe(createWriteStream('./video.mp4'))
  })
  .listen(3005)

Note: I am using tus-js-client on the server to upload videos to vimeo, this is for security reasons and others related to tus-client, I need to send the file using Fetch API.

#help React-spring transition problem

Horacio Rivero — Fri, 24 Apr 2020 05:12:50 +0000

Hi!

I have a question; how i can achieve a progressive delay in the entry of each element, using react-spring transition.

The first example shown on the react-spring transition oficial page is wrong, the code does not correspond to the animation shown:
https://www.react-spring.io/docs/hooks/use-transition

How could I achieve that same effect?, how I can insert a delay between the input of each component, using a spring easing, like the example?.

When I try the example code, all components enter at the same time.

const [items, set] = useState([...])
const transitions = useTransition(items, item => item.key, {
    from: { transform: 'translate3d(0,-40px,0)' },
    enter: { transform: 'translate3d(0,0px,0)' },
    leave: { transform: 'translate3d(0,-40px,0)' },
})

return transitions.map(({ item, props, key }) =>
    <animated.div key={key} style={props}>{item.text}</animated.div>

Excuse me if it's an absurd question, but the documentation of this library is poor, and I think setting a setTimeout is not the best way...

What method do you currently use to perform the animations in conjunction with React; pure css/sass animations, javascript, styled components, animate.js?

Analizando un método de bypass de sistemas WAF

Horacio Rivero — Thu, 26 Mar 2020 18:26:55 +0000

El método que se muestra en la imagen es comúnmente utilizado en ofuscación de código javascript malicioso para realizar ataques de XSS, para los que se preguntar para que ofuscar este código?, bueno los Firewalls o los sistemas conocidos como WAF por ejemplo los de Clouflare, Akamai, filtran todo tipo de código malicioso antes de que este llegue a a una servidor/servicio/gateway/proxy reverso de backend, pero gracias algunas técnicas es posible pasar alguno de estos filtros.

El código a continuación es capaz de pasar varios tipos de filtros:

Ahora lo interesante es saber por que este segmento de código es capaz de ejecutarse y saber que esta ocurriendo en el fondo.

Analicemos que esta ocurriendo por partes


// obtiene el valor unicode representado de forma decimal 
'('.charCodeAt() // 40

// se pasa de valor unicode decimal a su repretacion hexadecimal base 16
Number(charCode).toString(16) // 28

// se pasa de su valor expresado de forma hexadecimal a su presetacion decimal base 10
Number(0x0028) // 40

// representación de valores unicode hexadecimales a string, siguiendo el ejemplo anterior entoces podemos representar los valores de esta forma reemplazado "0" por "/" y "x" por "u"
'\u0028' // '(' 
'\u0029' // ')'

// ahora realicemos la representación corta y ocultemos los paréntesis ya que estos van a ser detectados por los filtros 
'\x28' // '(' 
'\x29' // ')'

// gracias a los template string incorporados en ES6, ahora las funciones pueden ser invocadas de esta forma ``, esto es algo que ya muchos saben. 
const test = (msg) => alert(msg[0])
test`hello wold`

// como todos saben el constructor de Set y de cualquier funcion es Function, por ende cada función va a heredan el comportamiento de invocación que se muestra en la función test
Set.constructor instanceof Function // true
test.constructor instanceof Function // true

// entonces si creamos una función y luego la invocamos comprenderemos que ocurre cuando se invoca al contructor de esta forma Function``
Function(['console.log("hello")', 'console.log("world")'])() // hello world

// lo que realiza el constructor de la función de arriba es algo muy similar a esto
const fn = (fns) => Function(fns.reduce((c, fn) => c += `${fn};`, ''))
fn(["console.log('hello')", "console.log('world')"])() // hello world

Ahora expresamos la función del principio de otra forma para que se vea todo más claro, creamos una función y pasamos como argumento un bloque de instrucciones y luego invocamos la función resultante.

Bueno como lo ven no es tan complejo, existen algunos métodos que realmente contiene bastante complejidad, pueden ver alguno de ellos en este enlace:

xss filter evasion cheatsheet

One of the dark sides of open source software

Horacio Rivero — Fri, 28 Feb 2020 21:32:33 +0000

This time I will tell you about a bookstore which is one of the most used in the world of web development called Terser.

The programmers of this library have created a new repository with an attractive logo and that has 90% of the old code, but why is the code of such poor quality?.

Note: I am not going to focus this time on talking about a security problems, only i focused on speak about code quality problems.

This library has a method that contains 208 lines of code with a cyclomatic complexity of 76. It is obviously a huge bloater smell, it has 46 if, 4 else, several nested if, variables that perform hoisting, 2 throw statements, mutates the values of some variables multiple times, including those of the input parameters, it returns two totally different values, all that within a try catch block, this library is undermined by this type of problem in all of his code.

This is just an example, much of the open source code that me, you and you great company use every day, is undermined by all kinds of code smells and design problems.

This library for those who do not know is the successor of UglifyJS, has 9,310,994 weekly downloads, I guess the developers, probably see these problems, but decided not to do Yak shaving, but well I think nobody wanted to refactor that for obvious reasons.

Those who want to see the specific method here i leave the link:

Terser smell code

Conclusión:

This is a library that is used in the development environments,
the impact that this problem can cause, will only affect the processing times,
but what would happen if it were a library that is used in productive environments, what impact would it have?.
If someone wants to collaborate or improve aspects of this library, they will find a code very difficult to understand, test and maintain.
Should be a law that every programmer must understand and know how create clean code o or understand about refactoring, and obviously the basic principles of software design.
Although it is ghost and unpaid work, it does not have to be of poor quality, remember that this represents what type of programmer you are.

Leave me your comment, and tell me, you use libraries without first reviewing the code, are you guided by his reputation, or maybe for the many stars they have on github?.

Maybe in my next articles write more in depth of other problems of the open source code.

Greetings to all!

🧟 Emojis can be wicked

Horacio Rivero — Thu, 27 Feb 2020 08:43:11 +0000

This is a brief history of two great applications that provide similar services, which own similar problems.

All started as a kind of joke, it occurred to me when try create an account with a user name that contains an unicode character of atral plane emm for example a typical emoji, assuming that the sanitization system was going to correctly remove these especial characters and then was going to issue an error, as expected of course, to my surprise this never was happeneds..
I found something more interesting.

If you are wondering what the hell is an astral plane unicode character, u can read this great article and understand how those little bastards work in javascript 🙃.

Emojis in javascript

The stage:

The system doesn't care that the email address that you entered really exist, as some say in the mexican glossary "les vale verga",
while u respecting the pattern: asdasd@asdasd.com everything would be valid.
They didn't have a captcha system, i could create all the accounts i wanted necesary, thousands.
They don't have a correct param sanitization method.
Point in favor had a clouflare WAF system,
so I could not use Tor nodes to create thousands of accounts, i would need rotary proxies or botnets etc.

The result:

Eager to continue having fun, I decided to go try another delivery system,
following the same steps.

I entered the registration page and introduced my evil emoji 🦄, i have baptized this fuzzimoji (fuzzing whit emojis 🥴).
Guess what happened?, yes exactly the same but the result was worse.

The stage:

Information disclosure,the emoji had free passage and it can make an exception directly in the ORM system 😂, due to a fault in the Mysql database 💣, is it exploitable?, yes in some contexts, i found this: Hacking with unicode

The error: org.hibernate.exception.GenericJDBCException: could not execute statement

They didn't have a captcha system, i could create all the accounts i wanted.
They don't have a correct param sanitization method.
They have a WAF system, you are going to have to use some systems like, Bypass and detect WAF system for bypass the WAF, bullshit! 🤭, Nop, they does not have one, or some fraud detection system like Maxmind, you can create thousands of acounts using diferentes Tor nodes it is a really simple task, then they would be a very difficult task for theys to filter or find a search pattern to remove all bot accounts.
Point in favor, you must enter a valid email account, but can used a temporal account generator temp-mail
Second point in favor, you will need many phone numbers,
but it is possible to pass this limitation 😉.

The result:

I already assumed that this could happen, it was no accident, but investigating among other cases.

You might wonder what produced the good mistake, it is something very simple.

Turns out MySQL’s utf8 charset only partially implements proper UTF-8 encoding. It can only store UTF-8-encoded symbols that consist of one to three bytes; encoded symbols that take up four bytes aren’t supported.

Since astral symbols (whose code points range from U+010000 to U+10FFFF) each consist of four bytes in UTF-8, you cannot store them using MySQL’s utf8 implementation.

You can read about this in mysql-utf8mb4

Conclusion what is for my the real impact of this

Someone could create thousands of accounts and place thousands of orders to different places generating huge losses, since it is possible to make payments at the door or at home, no credit card is required.
Someone could raise the position of your business doing, placing auto orders.
Someone could send a few deliverys to my worst enemy 👻.
Someone could make the largest congregation of al times of deliveries in Latin America by sending all to the same place at the same time.
If you are some person of marketing team, you can make it happen, simply say it was a mistake, simply blame it was the programmers fault, think in this, is free publicity, then sit in your chair to wait for your boss's thanks 😉.
Go deeper and exploit some vulnerability with the data obtained.

Note 🚨: I do not want to make an apology for the crime or improper use of the application, on the contrary i hope they will solve it,
if they think it necessary.
I also don't take responsibility for what the people can do with this information, take it with humor, everything is a joke.

For me it was just a funny and interesting anegdota that I wanted to share with all. These are two large Latin American companies with thousands of employees, test departments and systems engineers, people who detect fraud etc, but it seems that sometimes the smallest details can escape their hands and can cause huge connotations.

Leave me your opinion greetings!

✋ Avoid EventEmitter Inheritance

Horacio Rivero — Mon, 17 Feb 2020 16:21:33 +0000

For a long time I have been observing how a large number of libraries, modules, frameworks, etc. made for Node.js solve a need that arises as follows:

They see the need to add the behavior of the EventEmitter class and what they do is make a complete inheritance of this class 💩, which generates on the one hand, that a class as simple as Person, which can be seen in the image From below, grow unnecessarily in complexity, inheriting all EventEmitter behavior. Now what relationship exists between a Person and the rawListeners method?,
they don't have real neither logical relationship.

It is evident that a person generates events and that he can possess this behavior, but the prototype of a person logically is not EventEmitter, surely many will realize how to solve this problem, applying composition over inheritance.

Here is an example in Express.js, an object called app is created that inherits all EventEmitter behavior:

Express.js example

Now if we see it in this image that I did, it is clearer what I want to express, someone who has to analyze the behavior of a class or quickly visualize the methods and properties, he will meet this context: