Фильтровать изображения в typeScript или JavaScript

Question

Я создаю форму для сбора данных о пользователях в веб-приложении, в которую я могу добавить аватар через input file. Этот фильтр фильтрует файлы с расширениями изображений, но сомневаюсь, что я могу создать файл с script и присвоить ему расширение .jpg, например.

Изображение, которое я могу проанализировать

const reader = new FileReader();
    reader.onload = (event: any) => {
      console.log(event);
      this.avatarUrl = event.target.result;
      console.log(this.avatarUrl);
    };
    reader.readAsDataURL(this.avatarSelected);

но я ничего не могу найти различать реальные изображения и скрытые scripts.

Спасибо за ответы.

Answer 1

Если я не понимаю: вы хотите определить, является ли файл изображением или нет.

Особенно в случае файла script.js, который был переименован в script.jpg, вы хотите определить его как NOT image.

Подход:

1. создать элемент изображения.
2. загрузить
3. отклонить при ошибке / разрешить при успехе

4. добавить тайм-аут: если он не загружается через X секунд, измените URL-адрес на поддельный, чтобы остановить загрузку.

   function testImage(url) {
   
       return new Promise((resolve, reject) => {
         let timer;
         const image = new Image();
         image.onerror = image.onabort = () => {
             clearTimeout(timer);
             reject("error");
         };
         image.onload = function() {
              clearTimeout(timer);
              resolve("success");
          };
          timer = setTimeout(function() {
             img.src = "fakeUrl"; // stop loading
             reject("timeout");
          }, 3000); 
          img.src = url;
       });
   }