Integrace MobSF REST API v React js

Během posledního desetiletí se technologie chytrých telefonů staly výkonnějšími a převládajícími ve všech aspektech, běžně se používají pro přístup k internetu, spouštění aplikací, získávání e-mailů, provádění finančních a bankovních transakcí a různé další věci. Používání mobilních zařízení pro osobní i profesionální použití raketově vzrostlo. Zavedení mobilních zařízení a rozšíření mobilních aplikací výrazně napomohlo mobilitě a flexibilitě. V důsledku toho se objevily obrovské obavy ohledně zachování bezpečnosti při pohybu v digitálním světě.

Zabezpečení mobilních zařízení se stává stále více starostí o soukromí spotřebitelů. Bez ohledu na to, jak vážně to výrobci mobilních zařízení myslí s bezpečností uživatelů a soukromím dat, představuje používání internetových aplikací značné překážky, pokud jde o řešení hrozeb a zranitelností při současné ochraně soukromí uživatele. Většina softwarových programů je vytvořena pro konkrétní úkol a je přizpůsobena pro konkrétní sadu zařízení, jako jsou chytré telefony a tablety. Ochrana dat na mobilních zařízeních je obtížný úkol kvůli řadě hrozeb a nedostatků.

Hloubka mobilního zabezpečení.

Zůstat v soukromí je v dnešní době obtížné a naše spoléhání se na mobilní technologie to ještě ztěžuje. Osobní profily na sociálních sítích, e-maily, důležité texty a dokonce i informace o bankovních účtech jsou uloženy v našich samotných telefonech. Navzdory skutečnosti, že tato data jsou často citlivá a mohou obsahovat užitečné informace, uchováváme je v našich chytrých telefonech. Kromě toho se mobilní telefony používají pro většinu transakcí mezi podniky. Není žádným tajemstvím, že mobilní technologie se rychle vyvíjejí. Stovky milionů lidí používají internet, přičemž mnoho z nich se silně spoléhá na své mobilní telefony a chytré telefony.

Význam zabezpečení mobilních zařízení každým dnem roste a je nyní důležitější než kdy jindy, a proto vývojáři vytvořili a dokonce vytvořili různé rámce pro zabezpečení mobilních zařízení s otevřeným zdrojovým kódem. Tyto druhy nástrojů jsou navrženy a vytvořeny tak, aby označovaly a vyhodnocovaly efektivitu mobilní aplikace, ať už používáte Android/iOS nebo bez ohledu na jakoukoli platformu. MobSF je jedním z nejužitečnějších, nejpraktičtějších a nejsnáze použitelných dostupných nástrojů. Jedná se o zcela bezplatný a open-source nástroj pro vyhodnocování bezpečnosti mobilních/smartphone aplikací. MobSF nabízí vynikající služby pro testování perem, analýzu malwaru a hodnocení bezpečnosti.

Začínáme s MobSF

Nastavení MobSF

MobSF je aktivně udržovaný open-source projekt. Dokumentace je tedy velmi flexibilní. Nejaktuálnější informace proto vždy najdete na oficiálních webových stránkách MobSF s dokumentací. MobSF lze nastavit a spustit mnoha různými způsoby:

První metoda (která je vysoce doporučena):

Prvním přístupem k instalaci MobSF je ruční instalace všech základních komponent před spuštěním instalačního skriptu pro váš hostitelský operační systém.

Předpoklady

MobSF je kompatibilní s řadou operačních systémů, ale já budu používat Windows, takže zde jsou minimální předpoklady, které budete potřebovat, abyste mohli začít s MobSF na platformě Windows.

Windows

Nainstalujte Git
Nainstalujte Python 3.8-3.9
Nainstalujte JDK 8+ (POZNÁMKA:Nezapomeňte nastavit JAVA_HOME jako globální proměnnou prostředí.)
Nainstalujte nástroje Microsoft Visual C++ Build Tools
Nainstalujte OpenSSL (nelight)
Stáhnout a nainstalovat wkhtmltopdf .
Do proměnné prostředí PATH přidejte složku, která obsahuje binární soubor wkhtmltopdf.

Jakmile tedy nainstalujete všechny předpoklady, můžete přejít do fáze instalace.

Instalace MobSF.

Jednoduše zkopírujte a vložte následující příkaz do terminálu VScode a nainstalujte MobSF na místní počítač.

git clone https://github.com/MobSF/Mobile-Security-Framework-MobSF.git

Nyní je čas přejít do klonované složky projektu MobSF.

cd Mobile-Security-Framework-MobSF

Jakmile jste v adresáři projektu, budete muset nainstalovat všechny balíčky a závislosti, které MobSF vyžaduje. Jednoduše zkopírujte a vložte níže uvedený příkaz, abyste toho dosáhli.

./setup.bat

Jakmile dokončíte instalaci všech požadavků, struktura vašich složek by měla vypadat takto.

Po dokončení nastavení můžete nástroj spustit podle následujících kroků:

run.bat 127.0.0.1:8000

Před spuštěním instalačního skriptu se ujistěte, že jste nainstalovali všechny předpoklady. Pokud během procesu nastavení narazíte na nějaké problémy, MobSF nabízí různé možnosti podpory.

Chcete-li zjistit, zda je vaše aplikace spuštěna. Přejděte do svého oblíbeného prohlížeče a zadejte následující adresu URL.

127.0.0.1:8000

nebo

localhost:8000

Po zadání adresy URL byste měli vidět něco takového.

Chcete-li se dozvědět více o MobSF, klikněte sem: Instalační příručka MobSF

Druhý způsob instalace MobSF:

Pokud potřebujete provádět pouze statickou analýzu a nikoli dynamickou analýzu, můžete vždy použít předem vytvořené obrazy dokovacích stanic MobSF. Chcete-li spustit předpřipravené obrazy MobSF docker, zkopírujte a vložte následující příkazy do příkazového řádku:

docker pull opensecurity/mobile-security-framework-mobsf

docker run -it --rm -p 8000:8000 opensecurity/mobile-security-framework-mobsf:latest

Na ploše Dockeru byste měli vidět něco podobného.

Něco podobného byste měli vidět na ploše Dockeru. Chcete-li zjistit, zda je vaše aplikace spuštěna. Přejděte do svého oblíbeného prohlížeče a zadejte následující adresu URL.

127.0.0.1:8000

Po zadání adresy URL byste měli vidět něco podobného.

Začněme. Hlavním účelem tohoto tutoriálu je vytvořit aplikaci pro reakce, která dokáže načítat a zobrazovat výsledky skenování a také nahrávat soubory přímo do analyzátoru MobSF pomocí funkce Rest API. Chcete-li to provést, jednoduše postupujte podle pokynů uvedených níže.

Nastavení aplikace React

Nejprve použijeme create-react-app k vytvoření front-endu aplikace. Uživatelské rozhraní (UI) a jeho funkce budou vytvořeny zcela od začátku. Začněme rovnou s naší aplikací.

Začněme reakcí a vývojem naší aplikace od nuly. Pokud Node.js ještě není na vašem počítači nainstalován, prvním krokem je to udělat. Přejděte tedy na oficiální web Node.js a stáhněte si nejnovější verzi. Nyní otevřete svůj oblíbený editor kódu a vytvořte novou složku s názvem klient. Pro tento tutoriál použijeme editor kódu VScode. Až budete hotovi, napište npx create-react-app do integrovaného terminálu, který vytvoří aplikaci reakce ve vašem aktuálním adresáři.

npx create-react-app .

Nastavení všeho obvykle trvá jen několik minut. Normálně bychom přidávali balíčky do projektu s npm, ale v tomto případě použijeme npx, tedy běžec balíčků, který za nás vše stáhne a nakonfiguruje, abychom mohli hned začít se skvělou šablonou. Je čas spustit náš vývojový server, takže zadejte npm start, aby se v prohlížeči spustila naše aplikace reakce.

Takže takto se zpočátku jeví standardní šablona. Nyní je čas prozkoumat strukturu souborů a složek create-react-app. Podadresář node modules obsahuje všechny naše závislosti uzlů. Pak je tu veřejná složka, která obsahuje hlavně soubor index.html. Když soubor otevřete, vypadá jako standardní HTML dokument s head, body a meta tagy, jak vidíte. Uvnitř naší značky body je div s id kořenového jména, za nímž následuje záložní značka noscript, která je viditelná pouze v případě, že prohlížeč uživatele nepodporuje 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>

Kde se tedy vzal obsah? Pamatujte, že veškerý náš zdrojový kód je uložen ve složce src a reakce jej vloží do kořenového prvku div.

Nyní přejděte k našemu souboru 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;

V tomto scénáři jednoduše importujeme reakci z reakce a logo z našeho loga pomocí běžného javascriptu. Poté máme normální funkci javascriptu nazvanou APP, která je známá jako funkční komponenta v reakci, a tato funkce vrací prvek reakce, který vypadá jako HTML, ale ve skutečnosti je jsx, jak můžete vidět, existuje značka div s className aplikace APP, což nemůžeme říci jako class samo o sobě, protože class je vyhrazené slovo v javascriptu, takže musíme použít className v jsx. A poté máme záhlaví a poté obrázek s naším logem viditelným ve zdroji obrázku, což je ve skutečnosti proměnná javascriptu, kterou jsme importovali nahoře, takže ji musíme obklopit složenými závorkami, abychom mohli použít javascript v JSX, a pak máme odstavec, kotevní značku a to je pro tuto komponentu vše.

Nyní se tedy podíváme na index.js soubor.

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>
);

Jak můžete vidět, importujeme reakci z reagovat ještě jednou, spolu se souborem „react-dom“, souborem šablony stylů CSS, a nakonec aplikací z „App.js“, což je soubor, o kterém jsme právě hovořili, a je zde servisního pracovníka, který je potřebný k tomu, aby vaše aplikace fungovala zcela offline. Potom zavoláme "ReactDom.render", který má dva argumenty. Prvním parametrem je objekt jsx, který obsahuje naše uživatelsky definované komponenty, a druhým parametrem je document.getElementById('root'), který cílí na kořenový prvek div v našem souboru index.html a slouží k přístupu k obsahu v našem webová stránka.

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 čištění standardních souborů

Než budeme moci začít vytvářet naši aplikaci, musíme naše projekty vyčistit odstraněním některých souborů poskytovaných aplikací create-react-app. Takto by měly vypadat vaše soubory a složky poté, co je vyčistíte.

Přidání a instalace některých balíčků

Tento projekt bude také vyžadovat instalaci několika balíčků třetích stran. Zkopírujte a vložte následující příkaz do svého terminálu.

Instalace Bootstrap

npm install bootstrap

Instalace Axios

npm install axios

Poté, co nainstalujete všechny závislosti vašeho projektu, vaše package.json soubor by měl vypadat nějak takto.

{
  "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"
    ]
  }
}

Můžeme začít s MobSF a reagovat na integraci nyní, když byl náš projekt a závislosti nastaveny.

Integrace MobSF s React

Začněme importem našeho bootstrapu do našeho App.js soubor.

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

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

export default App;

Poté vytvořte soubor s názvem httpRequest.js ve složce aplikace a vložte do ní následující kód.

//httpRequest.js
import axios from "axios";
export default axios.create({
  baseURL: "http://localhost:8000",
  headers: {
    "Content-type": "application/json",
    "Authentication": "a81e178ac6bb1e348e6eecea309c5f425c396057f5deb078be4a4e125278ce48"
  }
});

Konfigurace služby pro nahrávání souborů.

Nejprve importujeme Axios jako http ze skriptu/souboru httpRequest.js, který jsme vytvořili dříve, a poté použijeme FormData k uchování párů klíč-hodnota v metodě upload(). Pomocí metody add() můžeme vytvořit objekt, který odpovídá formuláři HTML, a pak předat onUploadProgress, abychom odhalili události průběhu. Dále použijeme Axios post() k odeslání požadavku HTTP POST na server Rest API pro nahrání souboru apk a get() k odeslání požadavku HTTP GET k získání všech výsledků skenování. Až to uděláte, váš kód by měl vypadat takto.

//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,
};

Chcete-li se dozvědět více o koncovém bodu API dodávaném MobSF, postupujte podle kroků uvedených níže. Chcete-li tak učinit, přejděte na domovskou stránku MobSF a z nabídky vyberte „API DOCS“, jak je znázorněno na snímku obrazovky níže.

Poté byste měli být schopni vidět něco podobného.

Poté byste měli být schopni vidět něco podobného.
Nyní můžete provádět jakékoli akce, které chcete, ale pro účely tohoto tutoriálu provedeme pouze statickou analýzu, nahrajeme soubor pomocí příkazu Reag a získáme všechna zjištění skenování pomocí něj, takže můžete tento projekt rozšířit a provádět dynamické analýzu a mnohem více s MobSF REST API.

Vytvořte stránku pro nahrávání souborů a zobrazování výsledků skenování.

Vytvořte uživatelské rozhraní pro nahrávání souborů s ukazatelem průběhu, tlačítkem a základní zprávou. Chcete-li tak učinit, přejděte do složky součásti a vytvořte v ní součást nebo soubor s názvem „ApkUpload“. Nejprve importujeme Upload:a vytvoříme šablonu React s React Hooks (useState, useEffect). Všimněte si, že můžeme používat služby, které jsme vyvinuli dříve, ale prozatím to zjednodušme a zkusme vše zvládnout pomocí této komponenty.

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

  return (

  );
};
export default ApkUpload ;

Po konfiguraci naší šablony reakcí používáme přístup React Hooks k definování stavu použitého v naší aplikaci:

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([]);
  ...
}

Dále vyvineme obslužnou rutinu pro nahrání a analýzu souboru apk a také odešleme požadavek na odeslání s autorizací do Mobsf's Rest API a nezapomeneme zahrnout funkci handleChange() pro zpracování změn vstupu.

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]);
    };
  ...
}

Udělejme požadavek get v našem háku useEffect(), abychom obdrželi všechny výsledky skenování.

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

  },[]);
  ...
}

Nyní pojďme pracovat na uživatelském rozhraní aplikace. Chcete-li tak učinit, přidejte do bloku/příkazu return() následující kód:

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>
    );
};

Ve výše uvedeném kódu používáme panel průběhu Bootstrap:Chcete-li zobrazit seznam skenovaných souborů, iterujeme pole fileDetails pomocí funkce map(). Následuje odpověď, kterou jsme získali z MobSF RestAPI.

Ve výše uvedeném kódu používáme ukazatel průběhu Bootstrap a poté pomocí funkce map() procházíme polem fileDetails a zobrazíme seznam skenovaných souborů. Následuje výstup odpovědi MobSF RestAPI.

U každé položky souboru používáme pro zobrazení textu/obsahu file.APP_NAME , file.PACKAGE_NAME , atribut file.VERSION_NAME a tak dále a tak dále.

V neposlední řadě nezapomeňte exportovat komponentu:

const ApkUpload = () => {
  ...
}
export default ApkUpload ;

Nakonec importujte tuto komponentu do svého souboru App.js a měli byste být schopni nahrát soubor apk. Až budete hotovi, váš kód App.js by měl vypadat takto.

//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;

Nakonec zadejte následující příkaz do terminálu a restartujte server reakce.

npm start

Otevřete prohlížeč a přejděte na adresu URL serveru, kde právě běží vaše reakce. Měli byste vidět něco podobného.

Nyní můžete nahrát jakýkoli soubor APK, který se vám líbí, ale ujistěte se, že je lehký a má malou velikost.

Pojďme se podívat na náš řídicí panel MobSF, abychom zjistili, zda tam naskenovaná aplikace je nebo ne.

Jak můžete vidět, jak analyzovaná apk aplikace, tak naše data byly úspěšně získány pomocí plné kapacity MobSF Rest API.

Závěr

Gratulujeme, úspěšně jste nahráli a načetli všechny výsledky skenování APK pomocí plné síly MobSF a reakce js. Shrňme si, co jsme udělali:nejprve jsme roztočili a nakonfigurovali server MobSF, pak jsme prozkoumali dokumenty Rest API poskytované MobSf, poté jsme nakonfigurovali a nastavili naši aplikaci pro reakce a přidali několik balíčků třetích stran a nakonec jsme nakonfigurovali a napsali skript pro nahrání souboru apk. Poté jsme použili balíček Axios k načtení podrobností o výsledku skenování, poté jsme pomocí bootstrapu upravili naši aplikaci tak, aby vypadala ještě pěkně, a nakonec jsme spustili náš server a aplikace byla zcela funkční a úspěšná.