כתיבת סיומת דפדפן מאובטחת

בניגוד לארכיטקטורת "שרת-לקוח" הנפוצה, יישומים מבוזרים מאופיינים ב:

• אין צורך לאחסן מסד נתונים עם כניסות משתמש וסיסמאות. פרטי הגישה מאוחסנים אך ורק על ידי המשתמשים עצמם, ואישור האותנטיות שלהם מתרחש ברמת הפרוטוקול.
• אין צורך להשתמש בשרת. הלוגיקה של האפליקציה יכולה להתבצע ברשת בלוקצ'יין, שבה ניתן לאחסן את כמות הנתונים הנדרשת.

ישנם 2 אחסון בטוח יחסית למפתחות משתמש - ארנקי חומרה והרחבות לדפדפן. ארנקי חומרה הם לרוב מאובטחים במיוחד, אך קשים לשימוש ורחוקים מלהיות חינמיים, אך הרחבות לדפדפן הן השילוב המושלם בין אבטחה וקלות שימוש, ויכולות להיות גם חינמיות לחלוטין עבור משתמשי הקצה.

בהתחשב בכל זה, רצינו ליצור את ההרחבה המאובטחת ביותר שמפשטת את הפיתוח של יישומים מבוזרים על ידי מתן API פשוט לעבודה עם עסקאות וחתימות.
נספר לכם על החוויה הזו להלן.

המאמר יכיל הוראות שלב אחר שלב כיצד לכתוב תוסף לדפדפן, עם דוגמאות קוד וצילומי מסך. אתה יכול למצוא את כל הקוד ב מאגרים. כל התחייבות תואמת באופן הגיוני לקטע של מאמר זה.

היסטוריה קצרה של הרחבות דפדפן

הרחבות לדפדפן קיימות כבר הרבה זמן. הם הופיעו ב-Internet Explorer ב-1999, ב-Firefox ב-2004. עם זאת, במשך זמן רב מאוד לא היה תקן אחד להרחבות.

אנו יכולים לומר שהוא הופיע יחד עם הרחבות בגרסה הרביעית של Google Chrome. כמובן שלא היה אז מפרט, אבל זה היה ה-API של Chrome שהפך לבסיס שלו: לאחר שכבש את רוב שוק הדפדפנים ובעל חנות אפליקציות מובנית, כרום למעשה קבע את הסטנדרט להרחבות דפדפן.

למוזילה היה סטנדרט משלה, אך בעקבות הפופולריות של תוספי Chrome, החברה החליטה ליצור API תואם. בשנת 2015, ביוזמת מוזילה, נוצרה קבוצה מיוחדת בתוך קונסורציום האינטרנט העולמי (W3C) לעבודה על מפרטי תוספים חוצי דפדפן.

הרחבות ה-API הקיימות עבור Chrome נלקחו כבסיס. העבודה בוצעה בתמיכת מיקרוסופט (גוגל סירבה להשתתף בפיתוח התקן), וכתוצאה מכך הופיעה טיוטה מפרטים.

רשמית, המפרט נתמך על ידי Edge, Firefox ו-Opera (שים לב שכרום אינו ברשימה זו). אבל למעשה, התקן תואם במידה רבה לכרום, מכיוון שהוא נכתב למעשה על סמך ההרחבות שלו. אתה יכול לקרוא עוד על ה-API של WebExtensions כאן.

מבנה הרחבה

הקובץ היחיד שנדרש עבור הסיומת הוא המניפסט (manifest.json). זוהי גם "נקודת הכניסה" להרחבה.

המניפסט

לפי המפרט, קובץ המניפסט הוא קובץ JSON חוקי. תיאור מלא של מפתחות מניפסט עם מידע לגבי המפתחות הנתמכים באיזה דפדפן ניתן להציג כאן.

"עשוי" להתעלם ממפתחות שאינם במפרט (גם Chrome וגם Firefox מדווחים על שגיאות, אבל ההרחבות ממשיכות לעבוד).

ואני רוצה להפנות את תשומת הלב לכמה נקודות.

1. רקע - אובייקט הכולל את השדות הבאים:
   1. סקריפטים - מערך של סקריפטים שיבוצעו בהקשר הרקע (נדבר על זה קצת מאוחר יותר);
   2. עמוד - במקום סקריפטים שיבוצעו בעמוד ריק, ניתן לציין html עם תוכן. במקרה זה, תתעלם משדה הסקריפט, ויהיה צורך להכניס את הסקריפטים לדף התוכן;
   3. להתמיד - דגל בינארי, אם לא צוין, הדפדפן "יהרוג" את תהליך הרקע כאשר הוא יחשוב שהוא לא עושה כלום, ויתחיל אותו מחדש במידת הצורך. אחרת, העמוד ייפרק רק כשהדפדפן סגור. לא נתמך בפיירפוקס.
2. content_scripts - מערך של אובייקטים המאפשר לך לטעון סקריפטים שונים לדפי אינטרנט שונים. כל אובייקט מכיל את השדות החשובים הבאים:
   1. גפרורים - כתובת אתר של דפוס, שקובע אם סקריפט תוכן מסוים ייכלל או לא.
   2. js - רשימה של סקריפטים שיטענו להתאמה זו;
   3. exclude_matches - אינו כולל מהשטח match כתובות אתרים התואמות לשדה זה.
3. page_action - הוא למעשה אובייקט שאחראי על האייקון המוצג לצד שורת הכתובת בדפדפן והאינטראקציה עמו. זה גם מאפשר לך להציג חלון קופץ, המוגדר באמצעות HTML, CSS ו-JS משלך.
   1. default_popup - נתיב לקובץ HTML עם ממשק קופץ, עשוי להכיל CSS ו-JS.
4. הרשאות - מערך לניהול זכויות הרחבה. ישנם 3 סוגי זכויות, המתוארים בפירוט כאן
5. משאבים_נגישים_אינטרנט - משאבי הרחבה שדף אינטרנט יכול לבקש, למשל, תמונות, JS, CSS, קובצי HTML.
6. חיצוני_ניתן לחיבור - כאן אתה יכול לציין במפורש את המזהים של הרחבות ודומיינים אחרים של דפי אינטרנט שמהם אתה יכול להתחבר. דומיין יכול להיות ברמה שניה ומעלה. לא עובד בפיירפוקס.

הקשר ביצוע

לתוסף יש שלושה הקשרים לביצוע קוד, כלומר, האפליקציה מורכבת משלושה חלקים עם רמות שונות של גישה ל-API של הדפדפן.

הקשר של הרחבה

רוב ה-API זמין כאן. בהקשר זה הם "חיים":

1. עמוד רקע - חלק "גבי" של ההרחבה. הקובץ מצוין במניפסט באמצעות מקש "רקע".
2. דף קופץ - דף קופץ שמופיע כאשר אתה לוחץ על סמל ההרחבה. במניפסט browser_action -> default_popup.
3. עמוד מותאם אישית - דף הרחבה, "חי" בכרטיסייה נפרדת של התצוגה chrome-extension://<id_расширения>/customPage.html.

הקשר זה קיים ללא תלות בחלונות ובכרטיסיות של הדפדפן. עמוד רקע קיים בעותק בודד ופועל תמיד (היוצא מן הכלל הוא דף האירוע, כאשר סקריפט הרקע מופעל על ידי אירוע ו"מת" לאחר ביצועו). דף קופץ קיים כאשר החלון הקופץ פתוח, ו עמוד מותאם אישית - כשהכרטיסייה עם זה פתוחה. אין גישה לכרטיסיות אחרות ולתוכן שלהן מהקשר זה.

הקשר תסריט תוכן

קובץ סקריפט התוכן מופעל יחד עם כל כרטיסיית דפדפן. יש לו גישה לחלק מה-API של התוסף ולעץ ה-DOM של דף האינטרנט. תסריטי תוכן הם האחראים לאינטראקציה עם הדף. הרחבות שמתפעלות את עץ ה-DOM עושות זאת בסקריפטים של תוכן - למשל, חוסמי פרסומות או מתרגמים. כמו כן, סקריפט התוכן יכול לתקשר עם הדף באמצעות תקן postMessage.

הקשר של דף אינטרנט

זהו דף האינטרנט עצמו. אין לזה שום קשר עם התוסף ואין לו גישה לשם, למעט מקרים שבהם התחום של דף זה אינו מצוין במפורש במניפסט (עוד על כך בהמשך).

הודעות

חלקים שונים של האפליקציה חייבים להחליף הודעות זה עם זה. יש API בשביל זה runtime.sendMessage כדי לשלוח הודעה background и tabs.sendMessage כדי לשלוח הודעה לדף (סקריפט תוכן, קופץ או דף אינטרנט אם זמין externally_connectable). להלן דוגמה לגישה ל-Chrome API.

// Сообщением может быть любой 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.

דיאגרמת יישום

בואו ניצור תוסף לדפדפן ששומר מפתחות פרטיים, מספק גישה למידע ציבורי (כתובת, מפתח ציבורי מתקשר עם הדף ומאפשר לאפליקציות צד שלישי לבקש חתימה לעסקאות.

פיתוח אפליקציות

האפליקציה שלנו חייבת גם לקיים אינטראקציה עם המשתמש וגם לספק לדף API לקריאה לשיטות (לדוגמה, לחתום על עסקאות). הסתפק רק באחד contentscript לא יעבוד, מכיוון שיש לו רק גישה ל-DOM, אבל לא ל-JS של העמוד. התחבר דרך runtime.connect אנחנו לא יכולים, כי ה-API נחוץ בכל הדומיינים, ורק ספציפיים יכולים להיות מוגדרים במניפסט. כתוצאה מכך, הדיאגרמה תיראה כך:

יהיה עוד תסריט - inpage, אותו נזריק לדף. הוא ירוץ בהקשר שלו ויספק API לעבודה עם התוסף.

החל

כל קוד הרחבות לדפדפן זמין ב GitHub. במהלך התיאור יהיו קישורים להתחייבויות.

נתחיל עם המניפסט:

{
  // Имя и описание, версия. Все это будет видно в браузере в 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"]
}

צור background.js, popup.js, inpage.js ו-contentscript.js ריקים. אנו מוסיפים popup.html - וכבר ניתן לטעון את האפליקציה שלנו לגוגל כרום ולוודא שהיא פועלת.

כדי לאמת זאת, אתה יכול לקחת את הקוד מכאן. בנוסף למה שעשינו, הקישור הגדיר את ההרכבה של הפרויקט באמצעות webpack. כדי להוסיף אפליקציה לדפדפן, ב-chrome://extensions צריך לבחור load unpacked ואת התיקיה עם הסיומת המתאימה - במקרה שלנו dist.

כעת התוסף שלנו מותקן ועובד. אתה יכול להפעיל את כלי המפתחים עבור הקשרים שונים באופן הבא:

קופץ ->

הגישה למסוף סקריפט התוכן מתבצעת דרך המסוף של הדף עצמו בו הוא מופעל.

הודעות

אז, אנחנו צריכים להקים שני ערוצי תקשורת: inpage <-> רקע ורקע קופץ <->. אתה יכול, כמובן, פשוט לשלוח הודעות לפורט ולהמציא פרוטוקול משלך, אבל אני מעדיף את הגישה שראיתי בפרויקט הקוד הפתוח של metamask.

זוהי הרחבה לדפדפן לעבודה עם רשת Ethereum. בו, חלקים שונים של האפליקציה מתקשרים באמצעות RPC באמצעות ספריית dnode. זה מאפשר לך לארגן החלפה די מהירה ונוחה אם אתה מספק לה זרם nodejs כטרנספורט (כלומר אובייקט שמיישם את אותו ממשק):

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

כעת ניצור כיתת יישומים. זה יצור אובייקטי API עבור החלון הקופץ ודף האינטרנט, וייצור עבורם dnode:

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

כאן ולמטה, במקום אובייקט Chrome העולמי, אנו משתמשים ב-extensionApi, אשר ניגשת לכרום בדפדפן של גוגל ובדפדפן באחרים. זה נעשה למען תאימות בין דפדפנים, אבל למטרות מאמר זה אפשר פשוט להשתמש ב-'chrome.runtime.connect'.

בואו ניצור מופע יישום בסקריפט הרקע:

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

מכיוון ש-dnode עובד עם זרמים, ואנו מקבלים פורט, יש צורך במחלקת מתאם. זה נעשה באמצעות ספריית הזרם הקריא, המיישמת זרמי nodejs בדפדפן:

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

מכיוון שאנו צריכים את ה-API לא בסקריפט התוכן, אלא ישירות בדף, אנו עושים שני דברים:

1. אנחנו יוצרים שני זרמים. אחד - לכיוון העמוד, על גבי הפוסט הודעה. בשביל זה אנחנו משתמשים בזה החבילה הזו מהיוצרים של metamask. הזרם השני הוא ברקע מעל היציאה שהתקבלה ממנה runtime.connect. בואו נקנה אותם. כעת לדף יהיה זרם לרקע.
2. הכנס את הסקריפט ל-DOM. הורד את הסקריפט (הגישה אליו הותרה במניפסט) וצור תג 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);
    }
}

כעת אנו יוצרים אובייקט API ב-inpage ומגדירים אותו לגלובל:

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

אנחנו מוכנים Call Procedure Remote (RPC) עם API נפרד עבור דף וממשק משתמש. כאשר מחברים דף חדש לרקע אנו יכולים לראות זאת:

ממשק API ומקור ריקים. בצד הדף, אנו יכולים לקרוא לפונקציית hello כך:

עבודה עם פונקציות התקשרות חוזרת ב-JS מודרנית היא נימוסים גרועים, אז בוא נכתוב עוזר קטן כדי ליצור dnode שמאפשר לך להעביר אובייקט API ל- utils.

אובייקטי ה-API ייראו כעת כך:

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

וקריאה לפונקציות מחזירה הבטחה:

גרסה עם פונקציות אסינכרוניות זמינות כאן.

בסך הכל, גישת ה-RPC והזרם נראית גמישה למדי: אנו יכולים להשתמש בריבוי קיטור וליצור מספר ממשקי API שונים עבור משימות שונות. באופן עקרוני, ניתן להשתמש ב-dnode בכל מקום, העיקר הוא לעטוף את התחבורה בצורה של זרם nodejs.

חלופה היא פורמט JSON, המיישם את פרוטוקול JSON RPC 2. עם זאת, הוא עובד עם תעבורות ספציפיות (TCP ו-HTTP(S)), מה שלא ישים במקרה שלנו.

מצב פנימי ואחסון מקומי

נצטרך לאחסן את המצב הפנימי של האפליקציה - לפחות את מפתחות החתימה. אנו יכולים די בקלות להוסיף מצב לאפליקציה ושיטות לשינויו ב-API המוקפץ:

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

בואו נוסיף כמה מפתחות ממסוף ממשק המשתמש ונראה מה קורה עם המצב:

המצב צריך להיעשות קבוע כדי שהמפתחות לא יאבדו בעת הפעלה מחדש.

נאחסן אותו ב-localStorage, ונחליף אותו בכל שינוי. לאחר מכן, גישה אליו תהיה הכרחית גם עבור ממשק המשתמש, ואני גם רוצה להירשם לשינויים. בהתבסס על זה, יהיה נוח ליצור אחסון ניתן לצפייה ולהירשם לשינויים שלו.

נשתמש בספריית mobx (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)
    }

    ...

}

"מתחת למכסה המנוע," mobx החליפה את כל שדות החנות בפרוקסי ומיירטת את כל השיחות אליהם. ניתן יהיה להירשם להודעות אלו.

להלן אשתמש לעתים קרובות במונח "בעת שינוי", אם כי זה לא לגמרי נכון. Mobx עוקב אחר גישה לשדות. נעשה שימוש ב-Gutters ו-seters של אובייקטי proxy שהספרייה יוצרת.

מעצבי פעולה משרתים שתי מטרות:

1. במצב קפדני עם דגל enforceActions, mobx אוסר על שינוי המדינה ישירות. זה נחשב נוהג טוב לעבוד בתנאים מחמירים.
2. גם אם פונקציה משנה את המצב מספר פעמים - למשל, אנו משנים מספר שדות בכמה שורות קוד - הצופים מקבלים הודעה רק כשהיא מסתיימת. זה חשוב במיוחד עבור ה-frontend, שבו עדכוני מצב מיותרים מובילים לעיבוד מיותר של אלמנטים. במקרה שלנו, לא הראשון ולא השני רלוונטי במיוחד, אבל נפעל לפי השיטות המומלצות. נהוג לצרף דקורטורים לכל הפונקציות המשנות את מצב השדות הנצפים.

ברקע נוסיף אתחול ושמירת המצב ב-localStorage:

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. מטפל שייקרא עם הנתונים האלה בכל פעם שהוא משתנה.

בניגוד ל-redux, שבו אנו מקבלים באופן מפורש את המצב כארגומנט, mobx זוכר לאילו תצפיות אנו ניגשים בתוך הבורר, וקורא למטפל רק כשהם משתנים.

חשוב להבין בדיוק כיצד mobx מחליט לאילו תצפיות אנו מנויים. אם כתבתי בורר בקוד כזה() => app.store, אז תגובה לעולם לא תיקרא, מכיוון שהאחסון עצמו אינו ניתן לצפייה, רק השדות שלו.

אם כתבתי את זה ככה () => app.store.keys, אז שוב שום דבר לא יקרה, שכן בעת ​​הוספה/הסרה של רכיבי מערך, ההתייחסות אליו לא תשתנה.

Mobx פועלת כבורר בפעם הראשונה ועוקבת רק אחר נקודות צפייה שאליהם ניגשנו. זה נעשה באמצעות Proxy getters. לכן, הפונקציה המובנית משמשת כאן toJS. הוא מחזיר אובייקט חדש עם כל שרת ה-proxy מוחלפים בשדות המקוריים. במהלך הביצוע, הוא קורא את כל השדות של האובייקט - ומכאן שהמקבלים מופעלים.

במסוף הקופץ נוסיף שוב מספר מפתחות. הפעם הם גם הגיעו ל-localStorage:

כאשר דף הרקע נטען מחדש, המידע נשאר במקומו.

ניתן לראות את כל קוד האפליקציה עד לנקודה זו כאן.

אחסון מאובטח של מפתחות פרטיים

אחסון מפתחות פרטיים בטקסט ברור אינו בטוח: תמיד יש סיכוי שיפרצו לך, תקבל גישה למחשב שלך וכו'. לכן, ב-localStorage נאחסן את המפתחות בצורה מוצפנת בסיסמה.

ליתר אבטחה, נוסיף לאפליקציה מצב נעילה, בו לא תהיה גישה למפתחות כלל. נעביר אוטומטית את התוסף למצב נעול עקב פסק זמן.

Mobx מאפשר לך לאחסן רק סט מינימלי של נתונים, והשאר מחושב אוטומטית על סמך זה. אלו הם מה שנקרא מאפיינים מחושבים. ניתן להשוות אותם לתצוגות במאגרי מידע:

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

כעת אנו מאחסנים רק את המפתחות והסיסמה המוצפנים. כל השאר מחושב. אנו מבצעים את ההעברה למצב נעול על ידי הסרת הסיסמה מהמצב. ל-API הציבורי יש כעת שיטה לאתחול האחסון.

נכתב להצפנה כלי עזר המשתמשים ב-crypto-js:

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

לדפדפן יש API סרק שדרכו ניתן להירשם לאירוע - שינויים במצב. המדינה, בהתאם, עשויה להיות idle, active и locked. עבור סרק אתה יכול להגדיר פסק זמן, ונעול מוגדר כאשר מערכת ההפעלה עצמה חסומה. אנו גם נשנה את הבורר לשמירה ב-localStorage:

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

הקוד לפני שלב זה הוא כאן.

עסקות

אז, הגענו לדבר החשוב ביותר: יצירה וחתימה על עסקאות בבלוקצ'יין. נשתמש בבלוקצ'יין ובספרייה של WAVES גלים-עסקאות.

ראשית, בואו נוסיף למדינה מערך של הודעות שצריך לחתום, ואז נוסיף שיטות להוספת הודעה חדשה, אישור החתימה וסירוב:

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 באופן ידני, אז mobx יעשה זאת בעצמו בעת הוספת הודעות למערך. עם זאת, זה יצור אובייקט חדש שלא תהיה לנו התייחסות אליו, אבל נצטרך אותו לשלב הבא.

לאחר מכן, אנו מחזירים הבטחה שנפתרת כאשר סטטוס ההודעה משתנה. הסטטוס מנוטר על ידי תגובה, אשר "תהרוג את עצמה" כאשר המצב ישתנה.

קוד שיטה approve и reject פשוט מאוד: אנו פשוט משנים את סטטוס ההודעה, לאחר החתימה עליה במידת הצורך.

שמנו את Approve and Reject ב-UI API, newMessage ב-API של הדף:

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

הממשק זקוק לגישה למצב היישום. בצד UI נעשה observable state ולהוסיף פונקציה ל-API שתשנה מצב זה. בואו נוסיף observable לאובייקט ה-API שהתקבל מהרקע:

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

עם mobx קל מאוד להתחיל לעבד כאשר הנתונים משתנים. אנחנו פשוט תולים את מעצב הצופה מהחבילה mobx-react על הרכיב, והרינדור ייקרא אוטומטית כאשר כל הנתונים הניתנים לצפייה שאליהם הרכיב ישתנו ישתנו. אתה לא צריך שום mapStateToProps או להתחבר כמו ב-redux. הכל עובד ישירות מהקופסה:

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 כדי לשנות את המצב שקורא לפונקציה בצד UI.

המגע האחרון הוא להוסיף תצוגה של הודעות חדשות על סמל התוסף:

function setupApp() {
...

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

...
}

אז, היישום מוכן. דפי אינטרנט עשויים לבקש חתימה עבור עסקאות:

הקוד זמין כאן קשר.

מסקנה

אם קראת את המאמר עד הסוף, אך עדיין יש לך שאלות, תוכל לשאול אותן בכתובת מאגרים עם הרחבה. שם תמצאו גם התחייבויות לכל שלב ייעודי.

ואם אתה מעוניין להסתכל על הקוד של ההרחבה בפועל, אתה יכול למצוא את זה כאן.

קוד, מאגר ותיאור תפקיד מ סימארל

מקור: www.habr.com