Писање безбедног проширења претраживача

За разлику од уобичајене архитектуре „клијент-сервер“, децентрализоване апликације карактерише:

• Нема потребе за складиштењем базе података са корисничким пријавама и лозинкама. Приступне информације чувају искључиво сами корисници, а потврда њихове аутентичности се дешава на нивоу протокола.
• Нема потребе да користите сервер. Логика апликације се може извршити на блокчејн мрежи, где је могуће ускладиштити потребну количину података.

Постоје 2 релативно безбедна складишта за корисничке кључеве - хардверски новчаници и екстензије претраживача. Хардверски новчаници су углавном изузетно безбедни, али тешки за коришћење и далеко од бесплатних, али проширења претраживача су савршена комбинација безбедности и лакоће коришћења, а могу бити и потпуно бесплатна за крајње кориснике.

Узимајући све ово у обзир, желели смо да направимо најбезбедније проширење које поједностављује развој децентрализованих апликација пружањем једноставног АПИ-ја за рад са трансакцијама и потписима.
О овом искуству ћемо вам рећи у наставку.

Чланак ће садржати упутства корак по корак о томе како написати проширење претраживача, са примерима кода и снимцима екрана. Можете пронаћи сав код у спремишта. Свако урезивање логично одговара делу овог чланка.

Кратка историја проширења претраживача

Екстензије за претраживаче постоје већ дуже време. Појавили су се у Интернет Екплорер-у још 1999. године, у Фирефок-у 2004. године. Међутим, веома дуго није постојао јединствени стандард за проширења.

Можемо рећи да се појавио заједно са екстензијама у четвртој верзији Гоогле Цхроме-а. Наравно, тада није било спецификације, али је Цхроме АПИ постао његова основа: освојивши већину тржишта претраживача и имајући уграђену продавницу апликација, Цхроме је заправо поставио стандард за проширења претраживача.

Мозилла је имала свој стандард, али видевши популарност Цхроме екстензија, компанија је одлучила да направи компатибилан АПИ. У 2015. години, на иницијативу Мозиле, створена је посебна група у оквиру Ворлд Виде Веб Цонсортиум (В3Ц) за рад на спецификацијама проширења за више претраживача.

Постојећа АПИ проширења за Цхроме су узета као основа. Рад је обављен уз подршку Мицрософта (Гугл је одбио да учествује у развоју стандарда), а као резултат тога појавио се нацрт спецификације.

Формално, спецификацију подржавају Едге, Фирефок и Опера (имајте на уму да Цхроме није на овој листи). Али у ствари, стандард је у великој мери компатибилан са Цхроме-ом, пошто је заправо написан на основу његових екстензија. Можете прочитати више о ВебЕктенсионс АПИ-ју овде.

Структура проширења

Једина датотека која је потребна за екстензију је манифест (манифест.јсон). То је такође „улазна тачка“ у проширење.

Манифест

Према спецификацији, датотека манифеста је важећа ЈСОН датотека. Потпуни опис кључева манифеста са информацијама о томе који кључеви су подржани у ком претраживачу се може видети овде.

Кључеви који нису у спецификацији „могу“ бити занемарени (и Цхроме и Фирефок пријављују грешке, али екстензије настављају да раде).

И желео бих да скренем пажњу на неке тачке.

1. позадина — објекат који укључује следећа поља:
   1. скрипте — низ скрипти које ће се извршавати у позадинском контексту (о томе ћемо говорити мало касније);
   2. страна - уместо скрипти које ће се извршавати на празној страници, можете навести хтмл са садржајем. У овом случају, поље скрипте ће бити занемарено, а скрипте ће морати да се убаце у страницу са садржајем;
   3. упоран — бинарна заставица, ако није наведена, претраживач ће „убити“ позадински процес када сматра да не ради ништа и поново га покренути ако је потребно. У супротном, страница ће бити учитана само када је претраживач затворен. Није подржано у Фирефок-у.
2. цонтент_сцриптс — низ објеката који вам омогућавају да учитате различите скрипте на различите веб странице. Сваки објекат садржи следећа важна поља:
   1. шибице - образац урл, који одређује да ли ће одређена скрипта садржаја бити укључена или не.
   2. js — списак скрипти које ће бити учитане у овај меч;
   3. екцлуде_матцхес - искључује са терена match УРЛ адресе које одговарају овом пољу.
3. паге_ацтион - је заправо објекат који је одговоран за икону која се приказује поред адресне траке у претраживачу и интеракцију са њом. Такође вам омогућава да прикажете искачући прозор, који је дефинисан коришћењем вашег сопственог ХТМЛ-а, ЦСС-а и ЈС-а.
   1. дефаулт_попуп — путања до ХТМЛ датотеке са искачућим интерфејсом, може да садржи ЦСС и ЈС.
4. Дозволе — низ за управљање правима проширења. Постоје 3 врсте права, која су детаљно описана овде
5. веб_аццессибле_ресоурцес — ресурси проширења које веб страница може да захтева, на пример, слике, ЈС, ЦСС, ХТМЛ датотеке.
6. ектерналли_цоннецтабле — овде можете експлицитно навести ИД-ове других екстензија и домена веб страница са којих се можете повезати. Домен може бити другог нивоа или вишег. Не ради у Фирефок-у.

Контекст извршења

Екстензија има три контекста извршавања кода, односно апликација се састоји од три дела са различитим нивоима приступа АПИ-ју претраживача.

Контекст проширења

Већина АПИ-ја је доступна овде. У овом контексту они "живе":

1. Позадинска страница — „бацкенд“ део екстензије. Датотека је наведена у манифесту помоћу кључа „бацкгроунд“.
2. Искачућа страница — искачућа страница која се појављује када кликнете на икону проширења. У манифесту browser_action -> default_popup.
3. Прилагођена страница — страница проширења, „живи“ у посебној картици приказа chrome-extension://<id_расширения>/customPage.html.

Овај контекст постоји независно од прозора и картица претраживача. Позадинска страница постоји у једној копији и увек ради (изузетак је страница догађаја, када је позадинска скрипта покренута догађајем и „умре“ након његовог извршења). Искачућа страница постоји када је искачући прозор отворен, и Прилагођена страница — док је картица са њом отворена. Нема приступа другим картицама и њиховом садржају из овог контекста.

Контекст скрипте садржаја

Датотека скрипте садржаја се покреће заједно са сваком картицом претраживача. Има приступ делу АПИ-ја екстензије и ДОМ стаблу веб странице. За интеракцију са страницом одговорне су скрипте садржаја. Екстензије које манипулишу ДОМ стаблом то раде у скриптама садржаја – на пример, блокаторима огласа или преводиоцима. Такође, скрипта садржаја може да комуницира са страницом путем стандарда postMessage.

Контекст веб странице

Ово је сама веб страница. Нема никакве везе са екстензијом и нема приступ тамо, осим у случајевима када домен ове странице није експлицитно наведен у манифесту (више о томе у наставку).

Размена порука

Различити делови апликације морају међусобно да размењују поруке. За ово постоји АПИ runtime.sendMessage да пошаљете поруку background и tabs.sendMessage да пошаљете поруку страници (скрипта садржаја, искачући прозор или веб страница ако је доступна externally_connectable). Испод је пример када приступате Цхроме АПИ-ју.

// Сообщением может быть любой JSON сериализуемый объект
const msg = {a: 'foo', b: 'bar'};

// extensionId можно не указывать, если мы хотим послать сообщение 'своему' расширению (из ui или контент скрипта)
chrome.runtime.sendMessage(extensionId, msg);

// Так выглядит обработчик
chrome.runtime.onMessage.addListener((msg) => console.log(msg))

// Можно слать сообщения вкладкам зная их id
chrome.tabs.sendMessage(tabId, msg)

// Получить к вкладкам и их id можно, например, вот так
chrome.tabs.query(
    {currentWindow: true, active : true},
    function(tabArray){
      tabArray.forEach(tab => console.log(tab.id))
    }
)

За потпуну комуникацију, можете креирати везе преко runtime.connect. Као одговор ћемо добити runtime.Port, на који, док је отворен, можете слати било који број порука. На страни клијента, нпр. contentscript, изгледа овако:

// Опять же extensionId можно не указывать при коммуникации внутри одного расширения. Подключение можно именовать
const port = chrome.runtime.connect({name: "knockknock"});
port.postMessage({joke: "Knock knock"});
port.onMessage.addListener(function(msg) {
    if (msg.question === "Who's there?")
        port.postMessage({answer: "Madame"});
    else if (msg.question === "Madame who?")
        port.postMessage({answer: "Madame... Bovary"});

Сервер или позадина:

// Обработчик для подключения 'своих' вкладок. Контент скриптов, popup или страниц расширения
chrome.runtime.onConnect.addListener(function(port) {
    console.assert(port.name === "knockknock");
    port.onMessage.addListener(function(msg) {
        if (msg.joke === "Knock knock")
            port.postMessage({question: "Who's there?"});
        else if (msg.answer === "Madame")
            port.postMessage({question: "Madame who?"});
        else if (msg.answer === "Madame... Bovary")
            port.postMessage({question: "I don't get it."});
    });
});

// Обработчик для подключения внешних вкладок. Других расширений или веб страниц, которым разрешен доступ в манифесте
chrome.runtime.onConnectExternal.addListener(function(port) {
    ...
});

Постоји и догађај onDisconnect и метод disconnect.

Дијаграм примене

Хајде да направимо проширење претраживача које чува приватне кључеве, омогућава приступ јавним информацијама (адреса, јавни кључ комуницира са страницом и омогућава апликацијама трећих страна да захтевају потпис за трансакције.

Развој апликација

Наша апликација мора и да комуницира са корисником и да страници обезбеди АПИ за позивање метода (на пример, за потписивање трансакција). Задовољите се само једним contentscript неће радити, пошто има приступ само ДОМ-у, али не и ЈС-у странице. Повежите се преко runtime.connect не можемо, јер је АПИ потребан на свим доменима, а само одређени могу бити наведени у манифесту. Као резултат, дијаграм ће изгледати овако:

Биће још један сценарио - inpage, који ћемо убацити на страницу. Покреће се у свом контексту и обезбедиће АПИ за рад са екстензијом.

почетак

Сав код проширења претраживача доступан је на ГитХуб. Током описа ће бити везе до урезивања.

Почнимо са манифестом:

{
  // Имя и описание, версия. Все это будет видно в браузере в chrome://extensions/?id=<id расширения>
  "name": "Signer",
  "description": "Extension demo",
  "version": "0.0.1",
  "manifest_version": 2,

  // Скрипты, которые будут исполнятся в background, их может быть несколько
  "background": {
    "scripts": ["background.js"]
  },

  // Какой html использовать для popup
  "browser_action": {
    "default_title": "My Extension",
    "default_popup": "popup.html"
  },

  // Контент скрипты.
  // У нас один объект: для всех url начинающихся с http или https мы запускаем
  // contenscript context со скриптом contentscript.js. Запускать сразу по получении документа для всех фреймов
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "contentscript.js"
      ],
      "run_at": "document_start",
      "all_frames": true
    }
  ],
  // Разрешен доступ к localStorage и idle api
  "permissions": [
    "storage",
    // "unlimitedStorage",
    //"clipboardWrite",
    "idle"
    //"activeTab",
    //"webRequest",
    //"notifications",
    //"tabs"
  ],
  // Здесь указываются ресурсы, к которым будет иметь доступ веб страница. Тоесть их можно будет запрашивать fetche'м или просто xhr
  "web_accessible_resources": ["inpage.js"]
}

Направите празан бацкгроунд.јс, попуп.јс, инпаге.јс и цонтентсцрипт.јс. Додамо попуп.хтмл - и наша апликација се већ може учитати у Гоогле Цхроме и уверити се да ради.

Да бисте то потврдили, можете узети код стога. Поред онога што смо урадили, линк је конфигурисао монтажу пројекта помоћу веб пакета. Да бисте додали апликацију у претраживач, у цхроме://ектенсионс морате да изаберете лоад унпацкед и фолдер са одговарајућом екстензијом - у нашем случају дист.

Сада је наша екстензија инсталирана и ради. Можете покренути алатке за програмере за различите контексте на следећи начин:

попуп ->

Приступ конзоли скрипте садржаја врши се преко конзоле саме странице на којој је покренута.

Размена порука

Дакле, морамо успоставити два канала комуникације: позадину инпаге <-> и позадину искачућег прозора. Можете, наравно, само слати поруке на порт и измислити сопствени протокол, али ја више волим приступ који сам видео у метамаск пројекту отвореног кода.

Ово је проширење претраживача за рад са Етхереум мрежом. У њему различити делови апликације комуницирају преко РПЦ-а користећи дноде библиотеку. Омогућава вам да организујете размену прилично брзо и згодно ако јој обезбедите нодејс стреам као транспорт (што значи објекат који имплементира исти интерфејс):

import Dnode from "dnode/browser";

// В этом примере условимся что клиент удаленно вызывает функции на сервере, хотя ничего нам не мешает сделать это двунаправленным

// Cервер
// API, которое мы хотим предоставить
const dnode = Dnode({
    hello: (cb) => cb(null, "world")
})
// Транспорт, поверх которого будет работать dnode. Любой nodejs стрим. В браузере есть бибилиотека 'readable-stream'
connectionStream.pipe(dnode).pipe(connectionStream)

// Клиент
const dnodeClient = Dnode() // Вызов без агрумента значит что мы не предоставляем API на другой стороне

// Выведет в консоль world
dnodeClient.once('remote', remote => {
    remote.hello(((err, value) => console.log(value)))
})

Сада ћемо креирати класу апликације. Он ће креирати АПИ објекте за искачућу и веб страницу и креирати дноде за њих:

import Dnode from 'dnode/browser';

export class SignerApp {

    // Возвращает объект API для ui
    popupApi(){
        return {
            hello: cb => cb(null, 'world')
        }
    }

    // Возвращает объет API для страницы
    pageApi(){
        return {
            hello: cb => cb(null, 'world')
        }
    }

    // Подключает popup ui
    connectPopup(connectionStream){
        const api = this.popupApi();
        const dnode = Dnode(api);

        connectionStream.pipe(dnode).pipe(connectionStream);

        dnode.on('remote', (remote) => {
            console.log(remote)
        })
    }

    // Подключает страницу
    connectPage(connectionStream, origin){
        const api = this.popupApi();
        const dnode = Dnode(api);

        connectionStream.pipe(dnode).pipe(connectionStream);

        dnode.on('remote', (remote) => {
            console.log(origin);
            console.log(remote)
        })
    }
}

Овде и испод, уместо глобалног Цхроме објекта, користимо екстензију Апи, која приступа Цхроме-у у Гоогле-овом прегледачу и претраживачу у другим. Ово је урађено ради компатибилности са различитим претраживачима, али за потребе овог чланка може се једноставно користити 'цхроме.рунтиме.цоннецт'.

Хајде да направимо инстанцу апликације у скрипти у позадини:

import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import {SignerApp} from "./SignerApp";

const app = new SignerApp();

// onConnect срабатывает при подключении 'процессов' (contentscript, popup, или страница расширения)
extensionApi.runtime.onConnect.addListener(connectRemote);

function connectRemote(remotePort) {
    const processName = remotePort.name;
    const portStream = new PortStream(remotePort);
    // При установке соединения можно указывать имя, по этому имени мы и оппределяем кто к нам подлючился, контентскрипт или ui
    if (processName === 'contentscript'){
        const origin = remotePort.sender.url
        app.connectPage(portStream, origin)
    }else{
        app.connectPopup(portStream)
    }
}

Пошто дноде ради са стреамовима, а ми добијамо порт, потребна је класа адаптера. Направљен је помоћу библиотеке реадабле-стреам, која имплементира нодејс стреамове у претраживачу:

import {Duplex} from 'readable-stream';

export class PortStream extends Duplex{
    constructor(port){
        super({objectMode: true});
        this._port = port;
        port.onMessage.addListener(this._onMessage.bind(this));
        port.onDisconnect.addListener(this._onDisconnect.bind(this))
    }

    _onMessage(msg) {
        if (Buffer.isBuffer(msg)) {
            delete msg._isBuffer;
            const data = new Buffer(msg);
            this.push(data)
        } else {
            this.push(msg)
        }
    }

    _onDisconnect() {
        this.destroy()
    }

    _read(){}

    _write(msg, encoding, cb) {
        try {
            if (Buffer.isBuffer(msg)) {
                const data = msg.toJSON();
                data._isBuffer = true;
                this._port.postMessage(data)
            } else {
                this._port.postMessage(msg)
            }
        } catch (err) {
            return cb(new Error('PortStream - disconnected'))
        }
        cb()
    }
}

Сада направимо везу у корисничком интерфејсу:

import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import Dnode from 'dnode/browser';

const DEV_MODE = process.env.NODE_ENV !== 'production';

setupUi().catch(console.error);

async function setupUi(){
    // Также, как и в классе приложения создаем порт, оборачиваем в stream, делаем  dnode
    const backgroundPort = extensionApi.runtime.connect({name: 'popup'});
    const connectionStream = new PortStream(backgroundPort);

    const dnode = Dnode();

    connectionStream.pipe(dnode).pipe(connectionStream);

    const background = await new Promise(resolve => {
        dnode.once('remote', api => {
            resolve(api)
        })
    });

    // Делаем объект API доступным из консоли
    if (DEV_MODE){
        global.background = background;
    }
}

Затим креирамо везу у скрипти садржаја:

import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import PostMessageStream from 'post-message-stream';

setupConnection();
injectScript();

function setupConnection(){
    const backgroundPort = extensionApi.runtime.connect({name: 'contentscript'});
    const backgroundStream = new PortStream(backgroundPort);

    const pageStream = new PostMessageStream({
        name: 'content',
        target: 'page',
    });

    pageStream.pipe(backgroundStream).pipe(pageStream);
}

function injectScript(){
    try {
        // inject in-page script
        let script = document.createElement('script');
        script.src = extensionApi.extension.getURL('inpage.js');
        const container = document.head || document.documentElement;
        container.insertBefore(script, container.children[0]);
        script.onload = () => script.remove();
    } catch (e) {
        console.error('Injection failed.', e);
    }
}

Пошто нам АПИ није потребан у скрипти садржаја, већ директно на страници, радимо две ствари:

1. Правимо два тока. Један - према страници, на врху поруке. За ово користимо ово овај пакет од креатора метамаске. Други ток је у позадини преко примљеног порта runtime.connect. Хајде да их купимо. Сада ће страница имати ток у позадини.
2. Убаците скрипту у ДОМ. Преузмите скрипту (приступ јој је био дозвољен у манифесту) и креирајте ознаку script са садржајем унутра:

import PostMessageStream from 'post-message-stream';
import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";

setupConnection();
injectScript();

function setupConnection(){
    // Стрим к бекграунду
    const backgroundPort = extensionApi.runtime.connect({name: 'contentscript'});
    const backgroundStream = new PortStream(backgroundPort);

    // Стрим к странице
    const pageStream = new PostMessageStream({
        name: 'content',
        target: 'page',
    });

    pageStream.pipe(backgroundStream).pipe(pageStream);
}

function injectScript(){
    try {
        // inject in-page script
        let script = document.createElement('script');
        script.src = extensionApi.extension.getURL('inpage.js');
        const container = document.head || document.documentElement;
        container.insertBefore(script, container.children[0]);
        script.onload = () => script.remove();
    } catch (e) {
        console.error('Injection failed.', e);
    }
}

Сада креирамо апи објекат у инпаге и постављамо га на глобално:

import PostMessageStream from 'post-message-stream';
import Dnode from 'dnode/browser';

setupInpageApi().catch(console.error);

async function setupInpageApi() {
    // Стрим к контентскрипту
    const connectionStream = new PostMessageStream({
        name: 'page',
        target: 'content',
    });

    const dnode = Dnode();

    connectionStream.pipe(dnode).pipe(connectionStream);

    // Получаем объект API
    const pageApi = await new Promise(resolve => {
        dnode.once('remote', api => {
            resolve(api)
        })
    });

    // Доступ через window
    global.SignerApp = pageApi;
}

Ми смо спремни Позив удаљене процедуре (РПЦ) са засебним АПИ-јем за страницу и кориснички интерфејс. Када повежете нову страницу са позадином, можемо видети ово:

Празан АПИ и порекло. На страни странице, функцију хелло можемо позвати овако:

Рад са функцијама повратног позива у модерном ЈС-у је лош манири, па хајде да напишемо мали помоћник за креирање дноде који вам омогућава да проследите АПИ објекат утилима.

АПИ објекти ће сада изгледати овако:

export class SignerApp {

    popupApi() {
        return {
            hello: async () => "world"
        }
    }

...

}

Добијање објекта са даљине овако:

import {cbToPromise, transformMethods} from "../../src/utils/setupDnode";

const pageApi = await new Promise(resolve => {
    dnode.once('remote', remoteApi => {
        // С помощью утилит меняем все callback на promise
        resolve(transformMethods(cbToPromise, remoteApi))
    })
});

А позивање функција враћа обећање:

Доступна верзија са асинхроним функцијама овде.

Све у свему, приступ РПЦ-а и стрима изгледа прилично флексибилан: можемо користити парно мултиплексирање и креирати неколико различитих АПИ-ја за различите задатке. У принципу, дноде се може користити било где, главна ствар је да се транспорт омота у облику нодејс тока.

Алтернатива је ЈСОН формат, који имплементира протокол ЈСОН РПЦ 2. Међутим, ради са специфичним транспортима (ТЦП и ХТТП(С)), што у нашем случају није применљиво.

Интерно стање и локално складиште

Мораћемо да сачувамо интерно стање апликације - барем кључеве за потписивање. Можемо прилично лако додати стање у апликацију и методе за његову промену у искачућем АПИ-ју:

import {setupDnode} from "./utils/setupDnode";

export class SignerApp {

    constructor(){
        this.store = {
            keys: [],
        };
    }

    addKey(key){
        this.store.keys.push(key)
    }

    removeKey(index){
        this.store.keys.splice(index,1)
    }

    popupApi(){
        return {
            addKey: async (key) => this.addKey(key),
            removeKey: async (index) => this.removeKey(index)
        }
    }

    ...

} 

У позадини, све ћемо умотати у функцију и написати објекат апликације у прозор тако да можемо да радимо са њим са конзоле:

import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import {SignerApp} from "./SignerApp";

const DEV_MODE = process.env.NODE_ENV !== 'production';

setupApp();

function setupApp() {
    const app = new SignerApp();

    if (DEV_MODE) {
        global.app = app;
    }

    extensionApi.runtime.onConnect.addListener(connectRemote);

    function connectRemote(remotePort) {
        const processName = remotePort.name;
        const portStream = new PortStream(remotePort);
        if (processName === 'contentscript') {
            const origin = remotePort.sender.url;
            app.connectPage(portStream, origin)
        } else {
            app.connectPopup(portStream)
        }
    }
}

Хајде да додамо неколико кључева са УИ конзоле и видимо шта се дешава са стањем:

Стање треба учинити постојаним како се кључеви не би изгубили приликом поновног покретања.

Сачуваћемо га у лоцалСтораге, замењујући га са сваком променом. Након тога, приступ ће му такође бити неопходан за кориснички интерфејс, а такође бих желео да се претплатим на промене. На основу овога, биће згодно креирати видљиво складиште и претплатити се на његове промене.

Користићемо библиотеку мобк (https://github.com/mobxjs/mobx). Избор је пао на то јер нисам морао да радим са њим, али сам заиста желео да га проучавам.

Хајде да додамо иницијализацију почетног стања и учинимо складиште видљивим:

import {observable, action} from 'mobx';
import {setupDnode} from "./utils/setupDnode";

export class SignerApp {

    constructor(initState = {}) {
        // Внешне store так и останется тем же объектом, только теперь все его поля стали proxy, которые отслеживают доступ к ним
        this.store =  observable.object({
            keys: initState.keys || [],
        });
    }

    // Методы, которые меняют observable принято оборачивать декоратором
    @action
    addKey(key) {
        this.store.keys.push(key)
    }

    @action
    removeKey(index) {
        this.store.keys.splice(index, 1)
    }

    ...

}

„Испод хаубе“, мобк је заменио сва поља продавнице проксијем и пресреће све позиве ка њима. Биће могуће претплатити се на ове поруке.

У наставку ћу често користити израз „при промени“, иако то није сасвим тачно. Мобк прати приступ пољима. Користе се геттери и сеттери проки објеката које креира библиотека.

Акциони декоратери имају две сврхе:

1. У строгом режиму са заставицом енфорцеАцтионс, мобк забрањује директну промену стања. Сматра се да је добра пракса радити под строгим условима.
2. Чак и ако функција промени стање неколико пута – на пример, променимо неколико поља у неколико редова кода – посматрачи добијају обавештење тек када се заврши. Ово је посебно важно за фронтенд, где непотребна ажурирања стања доводе до непотребног приказивања елемената. У нашем случају, ни прво ни друго нису посебно релевантни, али ћемо следити најбољу праксу. Уобичајено је да се свим функцијама које мењају стање посматраних поља додају декоратори.

У позадини ћемо додати иницијализацију и чување стања у лоцалСтораге:

import {reaction, toJS} from 'mobx';
import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import {SignerApp} from "./SignerApp";
// Вспомогательные методы. Записывают/читают объект в/из localStorage виде JSON строки по ключу 'store'
import {loadState, saveState} from "./utils/localStorage";

const DEV_MODE = process.env.NODE_ENV !== 'production';

setupApp();

function setupApp() {
    const initState = loadState();
    const app = new SignerApp(initState);

    if (DEV_MODE) {
        global.app = app;
    }

    // Setup state persistence

    // Результат reaction присваивается переменной, чтобы подписку можно было отменить. Нам это не нужно, оставлено для примера
    const localStorageReaction = reaction(
        () => toJS(app.store), // Функция-селектор данных
        saveState // Функция, которая будет вызвана при изменении данных, которые возвращает селектор
    );

    extensionApi.runtime.onConnect.addListener(connectRemote);

    function connectRemote(remotePort) {
        const processName = remotePort.name;
        const portStream = new PortStream(remotePort);
        if (processName === 'contentscript') {
            const origin = remotePort.sender.url
            app.connectPage(portStream, origin)
        } else {
            app.connectPopup(portStream)
        }
    }
}

Овде је занимљива функција реакције. Има два аргумента:

1. Бирач података.
2. Руковалац који ће бити позван са овим подацима сваки пут када се промене.

За разлику од редук-а, где ми експлицитно примамо стање као аргумент, мобк памти којим посматрачима приступамо унутар селектора и позива руковалац само када се промене.

Важно је тачно разумети како мобк одлучује на које посматраче се претплатимо. Да сам написао селектор у оваквом коду() => app.store, тада реакција никада неће бити позвана, пошто само складиште није видљиво, већ само његова поља.

Да сам овако написао () => app.store.keys, онда се опет ништа не би десило, пошто се приликом додавања/уклањања елемената низа референца на њега неће променити.

Мобк по први пут делује као селектор и прати само посматране вредности којима смо приступили. Ово се ради преко проки геттера. Стога се овде користи уграђена функција toJS. Враћа нови објекат са свим проксијима замењеним оригиналним пољима. Током извршавања, чита сва поља објекта - стога се покрећу геттери.

У искачућој конзоли ћемо поново додати неколико кључева. Овај пут су такође завршили у лоцалСтораге:

Када се позадинска страница поново учита, информације остају на месту.

Сви кодови апликације до ове тачке се могу видети овде.

Сигурно складиштење приватних кључева

Чување приватних кључева у чистом тексту није безбедно: увек постоји шанса да будете хаковани, да добијете приступ свом рачунару и тако даље. Стога ћемо у лоцалСтораге чувати кључеве у шифрованом облику.

За већу сигурност, апликацији ћемо додати закључано стање у којем уопште неће бити приступа кључевима. Аутоматски ћемо пребацити екстензију у закључано стање због истека времена.

Мобк вам омогућава да сачувате само минимални скуп података, а остатак се аутоматски израчунава на основу њега. То су такозвана израчуната својства. Они се могу упоредити са приказима у базама података:

import {observable, action} from 'mobx';
import {setupDnode} from "./utils/setupDnode";
// Утилиты для безопасного шифрования строк. Используют crypto-js
import {encrypt, decrypt} from "./utils/cryptoUtils";

export class SignerApp {
    constructor(initState = {}) {
        this.store = observable.object({
            // Храним пароль и зашифрованные ключи. Если пароль null - приложение locked
            password: null,
            vault: initState.vault,

            // Геттеры для вычислимых полей. Можно провести аналогию с view в бд.
            get locked(){
                return this.password == null
            },
            get keys(){
                return this.locked ?
                    undefined :
                    SignerApp._decryptVault(this.vault, this.password)
            },
            get initialized(){
                return this.vault !== undefined
            }
        })
    }
    // Инициализация пустого хранилища новым паролем
    @action
    initVault(password){
        this.store.vault = SignerApp._encryptVault([], password)
    }
    @action
    lock() {
        this.store.password = null
    }
    @action
    unlock(password) {
        this._checkPassword(password);
        this.store.password = password
    }
    @action
    addKey(key) {
        this._checkLocked();
        this.store.vault = SignerApp._encryptVault(this.store.keys.concat(key), this.store.password)
    }
    @action
    removeKey(index) {
        this._checkLocked();
        this.store.vault = SignerApp._encryptVault([
                ...this.store.keys.slice(0, index),
                ...this.store.keys.slice(index + 1)
            ],
            this.store.password
        )
    }

    ... // код подключения и api

    // private
    _checkPassword(password) {
        SignerApp._decryptVault(this.store.vault, password);
    }

    _checkLocked() {
        if (this.store.locked){
            throw new Error('App is locked')
        }
    }

    // Методы для шифровки/дешифровки хранилища
    static _encryptVault(obj, pass){
        const jsonString = JSON.stringify(obj)
        return encrypt(jsonString, pass)
    }

    static _decryptVault(str, pass){
        if (str === undefined){
            throw new Error('Vault not initialized')
        }
        try {
            const jsonString = decrypt(str, pass)
            return JSON.parse(jsonString)
        }catch (e) {
            throw new Error('Wrong password')
        }
    }
}

Сада чувамо само шифроване кључеве и лозинку. Све остало је прорачунато. Вршимо пренос у закључано стање уклањањем лозинке из стања. Јавни АПИ сада има метод за иницијализацију складишта.

Написано за шифровање услужни програми који користе црипто-јс:

import CryptoJS from 'crypto-js'

// Используется для осложнения подбора пароля перебором. На каждый вариант пароля злоумышленнику придется сделать 5000 хешей
function strengthenPassword(pass, rounds = 5000) {
    while (rounds-- > 0){
        pass = CryptoJS.SHA256(pass).toString()
    }
    return pass
}

export function encrypt(str, pass){
    const strongPass = strengthenPassword(pass);
    return CryptoJS.AES.encrypt(str, strongPass).toString()
}

export function decrypt(str, pass){
    const strongPass = strengthenPassword(pass)
    const decrypted = CryptoJS.AES.decrypt(str, strongPass);
    return decrypted.toString(CryptoJS.enc.Utf8)
}

Прегледач има неактивни АПИ преко којег се можете претплатити на догађај - промене стања. Држава, сходно томе, може бити idle, active и locked. За мировање можете подесити временско ограничење, а закључано се поставља када је сам ОС блокиран. Такође ћемо променити селектор за чување у лоцалСтораге:

import {reaction, toJS} from 'mobx';
import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import {SignerApp} from "./SignerApp";
import {loadState, saveState} from "./utils/localStorage";

const DEV_MODE = process.env.NODE_ENV !== 'production';
const IDLE_INTERVAL = 30;

setupApp();

function setupApp() {
    const initState = loadState();
    const app = new SignerApp(initState);

    if (DEV_MODE) {
        global.app = app;
    }

    // Теперь мы явно узываем поле, которому будет происходить доступ, reaction отработает нормально
    reaction(
        () => ({
            vault: app.store.vault
        }),
        saveState
    );

    // Таймаут бездействия, когда сработает событие
    extensionApi.idle.setDetectionInterval(IDLE_INTERVAL);
    // Если пользователь залочил экран или бездействовал в течение указанного интервала лочим приложение
    extensionApi.idle.onStateChanged.addListener(state => {
        if (['locked', 'idle'].indexOf(state) > -1) {
            app.lock()
        }
    });

    // Connect to other contexts
    extensionApi.runtime.onConnect.addListener(connectRemote);

    function connectRemote(remotePort) {
        const processName = remotePort.name;
        const portStream = new PortStream(remotePort);
        if (processName === 'contentscript') {
            const origin = remotePort.sender.url
            app.connectPage(portStream, origin)
        } else {
            app.connectPopup(portStream)
        }
    }
}

Код пре овог корака је овде.

Трансакција

Дакле, долазимо до најважније ствари: креирања и потписивања трансакција на блокчејну. Користићемо ВАВЕС блоцкцхаин и библиотеку таласи-трансакције.

Прво, додајмо стању низ порука које треба потписати, а затим додамо методе за додавање нове поруке, потврђивање потписа и одбијање:

import {action, observable, reaction} from 'mobx';
import uuid from 'uuid/v4';
import {signTx} from '@waves/waves-transactions'
import {setupDnode} from "./utils/setupDnode";
import {decrypt, encrypt} from "./utils/cryptoUtils";

export class SignerApp {

    ...

    @action
    newMessage(data, origin) {
        // Для каждого сообщения создаем метаданные с id, статусом, выременем создания и тд.
        const message = observable.object({
            id: uuid(), // Идентификатор, используюю uuid
            origin, // Origin будем впоследствии показывать в интерфейсе
            data, //
            status: 'new', // Статусов будет четыре: new, signed, rejected и failed
            timestamp: Date.now()
        });
        console.log(`new message: ${JSON.stringify(message, null, 2)}`);

        this.store.messages.push(message);

        // Возвращаем промис внутри которого mobx мониторит изменения сообщения. Как только статус поменяется мы зарезолвим его
        return new Promise((resolve, reject) => {
            reaction(
                () => message.status, //Будем обсервить статус сообщеня
                (status, reaction) => { // второй аргумент это ссылка на сам reaction, чтобы его можно было уничтожть внутри вызова
                    switch (status) {
                        case 'signed':
                            resolve(message.data);
                            break;
                        case 'rejected':
                            reject(new Error('User rejected message'));
                            break;
                        case 'failed':
                            reject(new Error(message.err.message));
                            break;
                        default:
                            return
                    }
                    reaction.dispose()
                }
            )
        })
    }
    @action
    approve(id, keyIndex = 0) {
        const message = this.store.messages.find(msg => msg.id === id);
        if (message == null) throw new Error(`No msg with id:${id}`);
        try {
            message.data = signTx(message.data, this.store.keys[keyIndex]);
            message.status = 'signed'
        } catch (e) {
            message.err = {
                stack: e.stack,
                message: e.message
            };
            message.status = 'failed'
            throw e
        }
    }
    @action
    reject(id) {
        const message = this.store.messages.find(msg => msg.id === id);
        if (message == null) throw new Error(`No msg with id:${id}`);
        message.status = 'rejected'
    }

    ...
}

Када примимо нову поруку, додајемо јој метаподатке, урадите observable и додати у store.messages.

Ако то не урадите observable ручно, онда ће мобк то урадити сам када додаје поруке у низ. Међутим, креираће нови објекат на који нећемо имати референцу, али ће нам требати за следећи корак.

Затим враћамо обећање које се решава када се статус поруке промени. Статус се прати реакцијом, која ће се „убити“ када се статус промени.

Шифра методе approve и reject врло једноставно: једноставно мењамо статус поруке, након што је потпишемо ако је потребно.

Стављамо Аппрове и Рејецт у УИ АПИ, невМессаге у АПИ странице:

export class SignerApp {
    ...
    popupApi() {
        return {
            addKey: async (key) => this.addKey(key),
            removeKey: async (index) => this.removeKey(index),

            lock: async () => this.lock(),
            unlock: async (password) => this.unlock(password),
            initVault: async (password) => this.initVault(password),

            approve: async (id, keyIndex) => this.approve(id, keyIndex),
            reject: async (id) => this.reject(id)
        }
    }

    pageApi(origin) {
        return {
            signTransaction: async (txParams) => this.newMessage(txParams, origin)
        }
    }

    ...
}

Сада покушајмо да потпишемо трансакцију са екстензијом:

Генерално, све је спремно, остаје само додајте једноставан кориснички интерфејс.

UI

Интерфејсу је потребан приступ стању апликације. На страни корисничког интерфејса ћемо урадити observable стање и додајте функцију у АПИ која ће променити ово стање. Да додамо observable на АПИ објекат примљен из позадине:

import {observable} from 'mobx'
import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import {cbToPromise, setupDnode, transformMethods} from "./utils/setupDnode";
import {initApp} from "./ui/index";

const DEV_MODE = process.env.NODE_ENV !== 'production';

setupUi().catch(console.error);

async function setupUi() {
    // Подключаемся к порту, создаем из него стрим
    const backgroundPort = extensionApi.runtime.connect({name: 'popup'});
    const connectionStream = new PortStream(backgroundPort);

    // Создаем пустой observable для состояния background'a
    let backgroundState = observable.object({});
    const api = {
        //Отдаем бекграунду функцию, которая будет обновлять observable
        updateState: async state => {
            Object.assign(backgroundState, state)
        }
    };

    // Делаем RPC объект
    const dnode = setupDnode(connectionStream, api);
    const background = await new Promise(resolve => {
        dnode.once('remote', remoteApi => {
            resolve(transformMethods(cbToPromise, remoteApi))
        })
    });

    // Добавляем в background observable со стейтом
    background.state = backgroundState;

    if (DEV_MODE) {
        global.background = background;
    }

    // Запуск интерфейса
    await initApp(background)
}

На крају почињемо да приказујемо интерфејс апликације. Ово је апликација за реакцију. Позадински објекат се једноставно преноси помоћу реквизита. Било би исправно, наравно, направити посебан сервис за методе и продавницу за државу, али за потребе овог чланка ово је довољно:

import {render} from 'react-dom'
import App from './App'
import React from "react";

// Инициализируем приложение с background объектом в качест ве props
export async function initApp(background){
    render(
        <App background={background}/>,
        document.getElementById('app-content')
    );
}

Са мобк-ом је веома лако започети рендеровање када се подаци промене. Једноставно окачимо посматрача декоратера са пакета мобк-реацт на компоненти, а рендер ће бити аутоматски позван када се промене било који видљиви елементи на које компонента упућује. Не треба вам никакав мапСтатеТоПропс или повезивање као у редуксу. Све ради одмах из кутије:

import React, {Component, Fragment} from 'react'
import {observer} from "mobx-react";
import Init from './components/Initialize'
import Keys from './components/Keys'
import Sign from './components/Sign'
import Unlock from './components/Unlock'

@observer // У Компонета с этим декоратом будет автоматически вызван метод render, если будут изменены observable на которые он ссылается
export default class App extends Component {

    // Правильно конечно вынести логику рендера страниц в роутинг и не использовать вложенные тернарные операторы,
    // и привязывать observable и методы background непосредственно к тем компонентам, которые их используют
    render() {
        const {keys, messages, initialized, locked} = this.props.background.state;
        const {lock, unlock, addKey, removeKey, initVault, deleteVault, approve, reject} = this.props.background;

        return <Fragment>
            {!initialized
                ?
                <Init onInit={initVault}/>
                :
                locked
                    ?
                    <Unlock onUnlock={unlock}/>
                    :
                    messages.length > 0
                        ?
                        <Sign keys={keys} message={messages[messages.length - 1]} onApprove={approve} onReject={reject}/>
                        :
                        <Keys keys={keys} onAdd={addKey} onRemove={removeKey}/>
            }
            <div>
                {!locked && <button onClick={() => lock()}>Lock App</button>}
                {initialized && <button onClick={() => deleteVault()}>Delete all keys and init</button>}
            </div>
        </Fragment>
    }
}

Преостале компоненте се могу видети у коду у фасцикли УИ.

Сада у класи апликације треба да направите селектор стања за кориснички интерфејс и обавестите УИ када се промени. Да бисмо то урадили, додајмо метод getState и reactionзове remote.updateState:

import {action, observable, reaction} from 'mobx';
import uuid from 'uuid/v4';
import {signTx} from '@waves/waves-transactions'
import {setupDnode} from "./utils/setupDnode";
import {decrypt, encrypt} from "./utils/cryptoUtils";

export class SignerApp {

    ...

    // public
    getState() {
        return {
            keys: this.store.keys,
            messages: this.store.newMessages,
            initialized: this.store.initialized,
            locked: this.store.locked
        }
    }

    ...

    //
    connectPopup(connectionStream) {
        const api = this.popupApi();
        const dnode = setupDnode(connectionStream, api);

        dnode.once('remote', (remote) => {
            // Создаем reaction на изменения стейта, который сделает вызовет удаленну процедуру и обновит стейт в ui процессе
            const updateStateReaction = reaction(
                () => this.getState(),
                (state) => remote.updateState(state),
                // Третьим аргументом можно передавать параметры. fireImmediatly значит что reaction выполниться первый раз сразу.
                // Это необходимо, чтобы получить начальное состояние. Delay позволяет установить debounce
                {fireImmediately: true, delay: 500}
            );
            // Удалим подписку при отключении клиента
            dnode.once('end', () => updateStateReaction.dispose())

        })
    }

    ...
}

Приликом пријема предмета remote је креиран reaction да промените стање које позива функцију на страни корисничког интерфејса.

Последњи додир је додавање приказа нових порука на икону екстензије:

function setupApp() {
...

    // Reaction на выставление текста беджа.
    reaction(
        () => app.store.newMessages.length > 0 ? app.store.newMessages.length.toString() : '',
        text => extensionApi.browserAction.setBadgeText({text}),
        {fireImmediately: true}
    );

...
}

Дакле, апликација је спремна. Веб странице могу захтевати потпис за трансакције:

Код је доступан овде веза.

Закључак

Ако сте прочитали чланак до краја, али и даље имате питања, можете их поставити на спремишта са екстензијом. Тамо ћете такође пронаћи урезивање за сваки назначени корак.

А ако сте заинтересовани да погледате код за стварну екстензију, можете пронаћи ово овде.

Шифра, спремиште и опис посла од сиемарелл

Извор: ввв.хабр.цом