Интеграция MobSF REST API в React js

За последнее десятилетие технологии смартфонов стали более мощными и распространенными во всех аспектах, они широко используются для доступа в интернет, запуска приложений, получения электронной почты, проведения финансовых и банковских операций и различных других вещей. Использование мобильных устройств как в личных, так и в профессиональных целях резко возросло. Появление мобильных устройств и распространение мобильных приложений в значительной степени способствовали мобильности и гибкости. В результате возникла серьезная обеспокоенность по поводу обеспечения безопасности при навигации в цифровом мире.

Безопасность мобильных устройств все больше беспокоит потребителей. Независимо от того, насколько серьезно производители мобильных устройств относятся к безопасности и конфиденциальности данных пользователя, использование интернет-приложений создает значительные трудности с точки зрения устранения угроз и уязвимостей при сохранении конфиденциальности пользователя. Большинство программ создаются для выполнения конкретных задач и предназначены для определенного набора устройств, таких как смартфоны и планшеты. Защита данных на мобильных устройствах является сложной задачей из-за многочисленных угроз и недостатков.

Глубина мобильной безопасности.

В наше время трудно сохранить конфиденциальность, а зависимость от мобильных технологий делает это еще сложнее. Личные профили в социальных сетях, электронная почта, важные сообщения и даже информация о банковских счетах хранятся на наших телефонах. Несмотря на то, что эти данные часто являются конфиденциальными и могут содержать полезную информацию, мы продолжаем хранить их на своих смартфонах. Более того, мобильные телефоны используются для большинства деловых операций. Не секрет, что мобильные технологии быстро развиваются. Сотни миллионов людей пользуются Интернетом, и многие из них в значительной степени полагаются на свои мобильные телефоны и смартфоны.

Значение мобильной безопасности растет с каждым днем, и сейчас она важнее, чем когда-либо. Именно поэтому разработчики создали и даже выложили в открытый доступ различные фреймворки мобильной безопасности. Эти виды инструментов разработаны и созданы для того, чтобы отмечать и оценивать эффективность мобильного приложения, независимо от того, работаете ли вы на Android/ iOS или любой другой платформе. MobSF — один из самых полезных, практичных и простых в использовании инструментов. Это полностью бесплатный инструмент с открытым исходным кодом для оценки безопасности приложений для мобильных телефонов/смартфонов. MobSF предлагает превосходные услуги по пен-тестированию, анализу вредоносных программ и оценке безопасности.

Начало работы с MobSF

Настройка MobSF

MobSF — это активно поддерживаемый проект с открытым исходным кодом. Поэтому документация очень гибкая. Поэтому самую актуальную информацию всегда можно найти на официальном сайте документации MobSF. MobSF может быть установлен и запущен несколькими различными способами:

Первый способ (который настоятельно рекомендуется) :

Первый подход к установке MobSF заключается в ручной установке всех основных компонентов перед запуском скрипта установки для вашей операционной системы хоста.

Требования к предварительным условиям

MobSF совместим с различными операционными системами, но я буду использовать Windows, поэтому здесь перечислены минимальные предварительные требования, необходимые для начала работы с MobSF на платформе windows.

Windows

  • Установите Git
  • Установите Python 3.8-3.9
  • Установите JDK 8+ (ПРИМЕЧАНИЕ: Не забудьте установить JAVA_HOME в качестве глобальной переменной окружения).
  • Установите Microsoft Visual C++ Build Tools
  • Установите OpenSSL (не лайт)
  • Скачайте и установите wkhtmltopdf .
  • Добавьте папку, содержащую бинарный файл wkhtmltopdf, в переменную окружения PATH.

Итак, после того, как вы установили все необходимые условия, можно переходить к этапу установки.

Установка MobSF.

Просто скопируйте и вставьте следующую команду в терминал VScode для установки MobSF на локальном компьютере.

git clone https://github.com/MobSF/Mobile-Security-Framework-MobSF.git
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь пришло время перейти в папку клонированного проекта MobSF.

cd Mobile-Security-Framework-MobSF
Войти в полноэкранный режим Выйти из полноэкранного режима

Как только вы окажетесь в директории проекта, вам нужно будет установить все пакеты и зависимости, которые требуются MobSF. Для этого просто скопируйте и вставьте приведенную ниже команду.

Как только вы окажетесь в директории проекта, вам нужно будет установить все пакеты и зависимости, которые требует MobSF. Для этого просто скопируйте и вставьте приведенную ниже команду.

Примечание: Прежде чем начать, на вашем компьютере должен быть установлен Python.

./setup.bat
Войти в полноэкранный режим Выйти из полноэкранного режима

После завершения установки всех необходимых компонентов структура папок должна выглядеть следующим образом.

После завершения установки вы можете запустить инструмент, выполнив описанные ниже действия:

run.bat 127.0.0.1:8000
Войти в полноэкранный режим Выйти из полноэкранного режима

Прежде чем запускать сценарий установки, убедитесь, что вы установили все необходимые условия. Если в процессе установки у вас возникнут какие-либо проблемы, MobSF предлагает различные варианты поддержки.

Чтобы определить, запущено ли ваше приложение. Зайдите в свой любимый браузер и введите следующий URL-адрес.

127.0.0.1:8000
Войдите в полноэкранный режим Выйдите из полноэкранного режима

или

localhost:8000
Войти в полноэкранный режим Выйти из полноэкранного режима

После ввода URL вы должны увидеть что-то вроде этого.

Чтобы узнать больше о MobSF, нажмите здесь: Руководство по установке MobSF

Второй способ установки MobSF:

Если вам требуется только статический анализ, но не динамический, вы всегда можете использовать готовые докер-образы MobSF. Чтобы запустить готовые докер-образы MobSF, скопируйте и вставьте в командную строку следующие команды:

docker pull opensecurity/mobile-security-framework-mobsf
Войти в полноэкранный режим Выйти из полноэкранного режима

docker run -it --rm -p 8000:8000 opensecurity/mobile-security-framework-mobsf:latest
Войти в полноэкранный режим Выйти из полноэкранного режима

Примечание: Убедитесь, что на вашем компьютере запущен Docker.

На рабочем столе Docker вы должны увидеть что-то похожее на это.

На рабочем столе Docker вы должны увидеть нечто подобное. Чтобы определить, запущено ли ваше приложение. Зайдите в свой любимый браузер и введите следующий URL-адрес.

127.0.0.1:8000
Войдите в полноэкранный режим Выйдите из полноэкранного режима

После ввода этого URL вы должны увидеть нечто похожее на это.

Давайте приступим. Основной целью данного руководства является создание react-приложения, которое может получать и отображать результаты сканирования, а также загружать файлы непосредственно в анализатор MobSF, используя функциональность Rest API. Для этого просто следуйте инструкциям, приведенным ниже.

Настройка React-приложения

Для начала мы используем create-react-app для создания фронтенда приложения. Пользовательский интерфейс (UI) и его функции будут созданы полностью с нуля. Давайте сразу же приступим к работе над нашим приложением.

Давайте начнем с react и разработаем наше приложение с нуля. Если Node.js еще не установлен на вашем компьютере, первым шагом будет сделать это. Поэтому перейдите на официальный сайт Node.js и скачайте последнюю версию. Теперь откройте ваш любимый редактор кода и создайте новую папку под названием client. Для этого урока мы будем использовать редактор кода VScode. Как только вы закончите с этим, введите npx create-react-app во встроенный терминал, который создаст react-приложение в вашей текущей директории.

npx create-react-app .
Вход в полноэкранный режим Выход из полноэкранного режима

Установка всего необходимого обычно занимает всего несколько минут. Обычно мы добавляем пакеты в проект с помощью npm, но в данном случае мы воспользуемся npx, программой запуска пакетов, которая загрузит и настроит все за нас, чтобы мы могли сразу же приступить к работе с отличным шаблоном. Пришло время запустить наш сервер разработки, поэтому наберите npm start, чтобы запустить наше приложение react в браузере.

Итак, вот так выглядит шаблон boilerplate. Теперь пришло время изучить структуру файлов и папок create-react-app. Подкаталог node modules содержит все наши node-зависимости. Затем есть папка public, в которой в основном находится файл index.html. Когда вы открываете этот файл, он выглядит как стандартный HTML-документ с тегами head, body и meta, как вы можете видеть. Внутри нашего тега body находится div с id имени root, за которым следует тег fallback noscript, который отображается только в том случае, если браузер пользователя не поддерживает javascript.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Итак, откуда взялся контент? Помните, что весь наш исходный код хранится в папке src, и react будет внедрять его в корневой элемент div.

Теперь перейдите к нашему файлу App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
Войдите в полноэкранный режим Выйти из полноэкранного режима

В этом сценарии мы просто импортируем react из react и logo из нашего logo с помощью обычного javascript. После этого у нас есть обычная функция javascript под названием APP, которая известна как функциональный компонент в react, и эта функция возвращает react-элемент, который выглядит как HTML, но на самом деле является jsx, как вы можете видеть, здесь есть тег div с className APP, который мы не можем сказать class сам по себе, потому что class является зарезервированным словом в javascript, поэтому мы должны использовать className в jsx. После этого у нас есть заголовок, а затем изображение, с нашим логотипом, видимым на источнике изображения, который на самом деле является переменной javascript, которую мы импортировали сверху, поэтому мы должны окружить ее фигурными скобками, чтобы использовать javascript в JSX, а затем у нас есть параграф, тег якоря, и это все для этого компонента.

Итак, теперь давайте посмотрим на файл index.js.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
Вход в полноэкранный режим Выход из полноэкранного режима

Как вы можете видеть, мы снова импортируем react из react, вместе с «react-dom», файлом стилей CSS, и, наконец, App из «App.js», который является файлом, который мы только что обсуждали, и здесь есть service worker, который необходим для того, чтобы ваше приложение работало полностью автономно. Затем мы вызываем «ReactDom.render», который принимает два аргумента. Первый параметр — это объект jsx, который содержит наши пользовательские компоненты, а второй параметр — document.getElementById(‘root’), который указывает на корневой div в нашем файле index.html и является способом доступа к содержимому нашей веб-страницы.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
Вход в полноэкранный режим Выход из полноэкранного режима

Очистка файлов React boilerplate

Нам нужно очистить наши проекты, удалив некоторые файлы, предоставляемые create-react-app, прежде чем мы сможем приступить к созданию нашего приложения. Вот как должны выглядеть ваши файлы и папки после очистки.

Добавление и установка некоторых пакетов

Этот проект также потребует установки нескольких пакетов сторонних разработчиков. Скопируйте и вставьте следующую команду в терминал.

Установка Bootstrap

npm install bootstrap
Войти в полноэкранный режим Выйти из полноэкранного режима

Установка Axios

npm install axios
Войдите в полноэкранный режим Выход из полноэкранного режима

После установки всех зависимостей проекта ваш файл package.json должен выглядеть примерно так.

{
  "name": "mobsf-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "bootstrap": "^4.6.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь, когда наш проект и зависимости установлены, мы можем приступить к интеграции MobSF и react.

Интеграция MobSF с React

Начнем с импорта нашего bootstrap в файл App.js.

//App.js
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  return (
    <div className="App">
    Hello there! 
    </div>
  );
}

export default App;
Вход в полноэкранный режим Выход из полноэкранного режима

После этого создайте файл httpRequest.js в папке app и вставьте в него следующий код.

//httpRequest.js
import axios from "axios";
export default axios.create({
  baseURL: "http://localhost:8000",
  headers: {
    "Content-type": "application/json",
    "Authentication": "a81e178ac6bb1e348e6eecea309c5f425c396057f5deb078be4a4e125278ce48"
  }
});
Вход в полноэкранный режим Выход из полноэкранного режима

Настройка службы для загрузки файлов.

Сначала мы импортируем Axios как http из скрипта/файла httpRequest.js, который мы создали ранее, затем мы будем использовать FormData для хранения пар ключ-значение в методе upload(). Используя метод add(), мы можем создать объект, соответствующий HTML-форме, а затем передать onUploadProgress для отображения событий прогресса. Далее мы используем Axios post() для отправки HTTP POST запроса на Rest APIs Server для загрузки apk, а метод get() для отправки HTTP GET запроса для получения всех результатов сканирования. После того как вы это сделаете, ваш код должен выглядеть следующим образом.

//services/Upload.js
import http from "../httpRequest";
const upload = (file, onUploadProgress) => {
  let formData = new FormData();
  formData.append("file", file);
  return http.post("/upload", formData, {
    headers: {
      "Content-Type": "multipart/form-data",
      Authorization:
      "a81e178ac6bb1e348e6eecea309c5f425c396057f5deb078be4a4e125278ce48",
    },
    onUploadProgress,
  });
};

export default {
  upload,
};
Вход в полноэкранный режим Выход из полноэкранного режима

Чтобы узнать больше о конечной точке API, предоставляемой MobSF, выполните следующие шаги. Для этого перейдите на главную страницу MobSF и выберите в меню пункт «API DOCS», как показано на скриншоте ниже.

После этого вы должны увидеть что-то похожее на это.

После этого вы должны увидеть что-то похожее на это.
Теперь вы можете выполнять любые действия, но для целей этого руководства мы будем делать только статический анализ, загружать файл с помощью react и получать все результаты сканирования с его помощью, поэтому вы можете расширить этот проект и делать динамический анализ и многое другое с помощью MobSF REST API.

Создайте страницу для загрузки файлов и отображения результатов сканирования.

Создайте пользовательский интерфейс загрузки файлов с индикатором выполнения, кнопкой и основным сообщением. Для этого перейдите в папку компонентов и создайте в ней компонент или файл с именем «ApkUpload». Сначала мы импортируем Upload: и создадим React-шаблон с React Hooks (useState, useEffect). Обратите внимание, что мы можем использовать сервисы, которые мы разработали ранее, но пока давайте сохраним простоту и попробуем использовать этот компонент для обработки всего.

import React, { useState, useEffect } from "react";
const ApkUpload = () => {

  return (

  );
};
export default ApkUpload ;
Вход в полноэкранный режим Выход из полноэкранного режима

После настройки нашего шаблона react мы используем подход React Hooks для определения состояния, используемого в нашем приложении:

const ApkUpload = () => {
  const [selectedFiles, setSelectedFiles] = useState(undefined);
  const [currentFile, setCurrentFile] = useState(undefined);
  const [progress, setProgress] = useState(0);
  const [message, setMessage] = useState("");
  const [fileDetails, setFileDetails] = useState([]);
  ...
}
Вход в полноэкранный режим Выход из полноэкранного режима

Далее мы разработаем обработчик для загрузки и разбора apk-файла, а также отправим пост-запрос с авторизацией на Rest API Mobsf, и не забудьте включить функцию handleChange() для обработки изменений ввода.

const ApkUpload = () => {
  ...
    const handleUpload = async () => {
        const data = new FormData();
        data.append("file", selectedFiles);
        try {
            const res = await axios.post(
                "http://localhost:8000/api/v1/upload",
                data,
                {
                    headers: {
                        "Content-Type": "multipart/form-data",
                        Authorization:
                            "a81e178ac6bb1e348e6eecea309c5f425c396057f5deb078be4a4e125278ce48",
                    },
                    onUploadProgress: (progressEvent) => {
                        setProgress(
                            parseInt(
                                Math.round(
                                    (progressEvent.loaded * 100) /
                                        progressEvent.total
                                )
                            )
                        );
                    },
                }
            );
        } catch (err) {
            if (err.response.status === 500) {
                setMessage("There was a problem with the server");
            } else {
                setMessage(err.response.data.message);
            }
        }
    };
 const handleChange = (e) => {
        setSelectedFiles(e.target.files);
        setCurrentFile(e.target.files[0]);
    };
  ...
}
Вход в полноэкранный режим Выход из полноэкранного режима

Давайте сделаем запрос get внутри нашего хука useEffect(), чтобы получить все результаты сканирования.

Примечание: метод useEffect() служит той же цели, что и componentDidMount():

const ApkUpload = () => {
  ...
   useEffect(() => {
    axios.get("http://localhost:8000/api/v1/scans", {
    headers: {
      Authorization:
        "a81e178ac6bb1e348e6eecea309c5f425c396057f5deb078be4a4e125278ce48",
    },
  }).then(res => {
    setFileDetails(res.data.content);
  });

  },[]);
  ...
}
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь давайте поработаем над пользовательским интерфейсом приложения. Для этого добавьте следующий код внутри блока/заявления return():

const ApkUpload = () => {
  ...
  return (
    <div className="container">
            <div className="row">
                <div className="col-md-6">
                    <h1>Upload your APK Here!</h1>
                    <input
                        type="file"
                        name="file"
                        id="file"
                        onChange={handleChange}
                    />
                    <button
                        className="btn btn-primary"
                        onClick={handleUpload}
                        disabled={!selectedFiles}
                    >
                        Upload
                    </button>
                    <br />
                    <br />
                    <progress value={progress} max="100" />
                    <br />
                    <br />
                    <p>{message}</p>
                </div>
                <div className="col-md-6">
                    <h1>Uploaded Files</h1>
                    <ul className="list-group list-group-flush">
                    {/* pdf report download link */}
           {fileDetails &&
             fileDetails.map((file, index) => (
               <li className="list-group-item" key={index}>
                 <a href={file.APP_NAME}>{file.FILE_NAME}</a>
               <br/>
               <br/>
                 {/* colourfull bootstarp text */}
                 Analyzer: <span className="badge badge-light">
                        {file.ANALYZER}
                    </span> <br/>
                    Application name: <span className="badge badge-primary">
                        {file.APP_NAME}
                    </span><br/>
                    Application package name: <span className="badge badge-success">
                        {file.PACKAGE_NAME}
                    </span>  <br/>
                    Application File name:<span className="badge badge-danger">
                        {file.FILE_NAME}
                    </span> <br/>
                    Application Scan Type: <span className="badge badge-warning">
                        {file.SCAN_TYPE}
                    </span> <br/>
                    Scan date: <span className="badge badge-info">
                        {file.TIMESTAMP}
                    </span> <br/>
                    Application Version: <span className="badge badge-dark">
                        {file.VERSION_NAME}
                    </span> <br/> <br/>
                        </li>
                        ))}
                    </ul>
                </div>
            </div>
        </div>
    );
};
Вход в полноэкранный режим Выйти из полноэкранного режима

В приведенном выше коде мы используем Bootstrap Progress Bar: Для отображения списка файлов сканирования мы выполняем итерации по массиву fileDetails с помощью функции map(). Ниже приведен репозиторий, который мы получили из MobSF RestAPI.

Мы используем Bootstrap Progress Bar в приведенном выше коде, а затем с помощью функции map() перебираем массив fileDetails для отображения списка файлов сканирования. Ниже приведен результат ответа MobSF RestAPI.

Для каждого элемента файла мы используем атрибут file.APP_NAME , file.PACKAGE_NAME , file.VERSION_NAME и так далее и тому подобное для отображения текста/содержания.

И последнее, но не менее важное: не забудьте экспортировать компонент:

const ApkUpload = () => {
  ...
}
export default ApkUpload ;
Вход в полноэкранный режим Выйти из полноэкранного режима

Наконец, импортируйте этот компонент в ваш файл App.js, и вы должны иметь возможность загрузить apk-файл. Когда вы закончите, ваш код App.js должен выглядеть следующим образом.

//App.js
import "bootstrap/dist/css/bootstrap.min.css";
import ApkUpload from "./components/ApkUpload"

function App() {
  return (
    <div className="App">
    <div className="container-fluid">
      <div className="row">
        <div className="col-md-12">
          <ApkUpload />
        </div>
      </div>
    </div>
    </div>
  );
}

export default App;
Вход в полноэкранный режим Выход из полноэкранного режима

Наконец, введите следующую команду в терминал, чтобы перезапустить сервер react.

npm start
Войти в полноэкранный режим Выйти из полноэкранного режима

Откройте браузер и перейдите на URL-адрес сервера, на котором в настоящее время запущен ваш react. Вы должны увидеть что-то похожее на это.

Теперь вы можете загрузить любой Apk-файл, который вам нравится, но убедитесь, что он легкий и небольшого размера.

Давайте проверим нашу приборную панель MobSF, чтобы узнать, есть ли там просканированное приложение или нет.

Как вы можете видеть, и анализируемое apk-приложение, и наши данные были успешно получены с использованием всех возможностей Rest API MobSF.

Заключение

Поздравляем, вы успешно загрузили и получили все результаты сканирования APK, используя всю мощь MobSF и react js. Давайте вспомним, что мы сделали: сначала мы запустили и настроили сервер MobSF, затем изучили документацию по Rest API, предоставленную MobSf, затем мы настроили и установили наше приложение react и добавили несколько сторонних пакетов, и, наконец, мы настроили и написали скрипт для загрузки apk-файла. После этого мы использовали пакет Axios для получения подробной информации о результатах сканирования, затем мы использовали bootstrap для стилизации нашего приложения, чтобы оно выглядело еще лучше, и, наконец, мы запустили наш сервер, и наше приложение было полностью функциональным и успешным.

Оцените статью
Procodings.ru
Добавить комментарий