electron introduction

Electron Introduction @yosuke_furukawa

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Recent works in my previous company • front-end / server-side
engineer • creating apps using Electron • creating widget library using React • creating server APIs

ࡱӨ͞Εͨসإ

׬શʹҰக

Electron

What is Electron?? • ΫϩεϓϥοτϑΥʔϜσεΫτοϓΞϓϦ έʔγϣϯϑϨʔϜϫʔΫ  Windows, Linux, Mac OSX
• GitHub ࣾ੡ʢ΋ͱ΋ͱ͸ Atom ΤσΟλͷͨ Ίʹ࡞ΒΕͨ΋ͷʣ

What is Electron?? • ࡞ऀ͸ @zcbenz ࢯ • ࣅͨΑ͏ͳϓϩδΣΫτͱͯ͠NW.js͕͋Δ ͕ɺNW.js͸Electron։ൃ౰࣌ෆ҆ఆͰ͋Γɺ
ࠜຊͷίϯηϓτͷͱ͜ΖͰҧ͍Λײͨͨ͡ Ίɺશ͘ผͳϓϩμΫτʹͳͬͨɻ

What is Electron?? • Electronͷத਎͸ • • Chromium • Browser
ͷϨϯμϦϯάϓϩηε͸Chromium͕୲ ౰ɺதͰϨϯμϦϯάϓϩηεΛ࡞Δॴ΍ϑΝΠϧΛ ։͘ॴɺXHR/fetchҎ֎ͰͷΞΫηε͸Node.js͕୲౰

What is Electron?? • V8 ͕ Node / Chromium Ͱڞ༗͞ΕͯΔ
• Node/Chromium Ͱ(΄΅)͓ͳ͡ίʔυ͕ಈ͘

Electron ͷத਎

$ISPNJVN .BJO1SPDFTT 3FOEFSFS1SPDFTT IPC ௨৴ fork

$ISPNJVN .BJO1SPDFTT 3FOEFSFS1SPDFTT IPC ௨৴ fork ϒϥ΢βͷ ϨΠϠ ϒϥ΢βΛૢ࡞͢ Δϓϩηε
JSͰૢ࡞Մೳ ϝΠϯϓϩηε

Main Process • ϓϩάϥϜͷΤϯτϦϙΠϯτ • Node.js ͕୲౰ • Renderer Process
ͱ௨৴ͯ͠ॲཧΛߦͬͨ Γɺͦ΋ͦ΋Renderer Process Λىಈͤͨ͞ Γ͢Δॴɻ

Renderer Process • Main process ͕ࢦఆͨ͠URLʹ͋ΔϦιʔεΛϩʔ υͯ͠ىಈ͢Δϓϩηε • htmlΛදࣔ͢ΔɺcssͰϨΠΞ΢τ૊ΉɺJSͰdomΛ ૢ࡞͢ΔͳͲ΄΅ϒϥ΢βͷ࢓ࣄ
• །Ұϒϥ΢βͱҧ͏ͷ͸Renderer Process ͔Β Main ͱ௨৴ͯ͠ɺ Node.js ͷॲཧΛಁաతʹݺ΂Δॴ

͕͍ͧ͜͜͢͝ Electron

Node.js ͷϥΠϒϥϦΛ௚઀ಁ աతʹݺ΂Δɻ <script> // ࣗ෼ͷϩʔΧϧϑΝΠϧಡΈ͜ΜͩΓ const fs = require(‘fs’);
fs.readFile(‘foo/bar/baz’, (err, data) => { console.log(data); }); </script> <script> // ֎෦ϓϩηεΛݺΜͩΓ const cp = require(‘child_process’); cp.exec(‘ls -l’, (err, stdout) => { console.log(stdout); }); </script>

Cross Platform • Windows Ͱ΋ OSX Ͱ΋ಈ͘!!! • Node.js ++

npm Λج൫ͱ͢ΔಠࣗΤίγ εςϜ͕Ͱ͖ͯΔ

693 packages

Electron Λ ࠾༻͍ͯ͠Δπʔϧ

OSX ͬΆ͍ݟͨ໨ʹ͍ͨ͠

PhotonKit

PhotonKit CSS class set ͕طʹ͋Δ

Chrome ͬΆ͍ tab Λ࡞Γ͍ͨ

chrome-tabs Chrome tab ͬΆ͍ͷ͕ಈ͘

ࣄྫ͕๛෋ awesome-electron Λࢀর

ࣄྫ͕๛෋ ScreenCat ͰσεΫτοϓεΫϦʔϯڞ༗

ࣄྫ͕๛෋ minira => jira ͷ notiﬁcation πʔϧ

ࣄྫ͕๛෋ Chat application FRIENDS ౳

ࣄྫ͕๛෋ Mojibar => emoji searcher

Electron APIs

Electron APIs • Main Process (node.jsଆ) • app   ΞϓϦέʔγϣϯͷىಈ΍ऴྃͳͲͷLifeCycle؅ཧ༻
API • autoUpdater   ࣗಈߋ৽ݕ஌ɾμ΢ϯϩʔυɾΞοϓσʔτػೳ • powerMonitor   όοςϦʔ͕੾Εͯsuspendʹͳͬͨ/ACΞμϓλʔ͕੾Εͨ౳ͷݕ஌ • Menu/MenuItem  ͍ΘΏΔ͜Ε→  γϣʔτΧοτΩʔͰϝχϡʔݺͼग़͠ͳͲ΋ରԠ

Electron APIs • Render Process (chromiumଆ) • desktopCapturer   σεΫτοϓΩϟϓνϟʔΛऔΕΔΑ͏ʹ͢Δɺڧ͍API
• webframe   zoom, input text ﬁeld ʹରͯ͠spell checkerΛ͢Δ͔Ͳ͏͔౳ • Both Process (྆ํͰ࢖͑ΔAPI) • clipboard   ΫϦοϓϘʔυͷதͷίϐʔͨ͠΋ͷΛऔΕΔΑ͏ʹ͢Δ • shell  desktopͷػೳͱͷڞଘ shell.openExternal Ͱ֦ுࢠʹඥ෇͍ͨػೳΛ࣮ߦ͢Δ(ॴҦ open ίϚϯυͱಉ༷)

͕͜͜΍͹͍ͧ Electron

Node.js ͷϥΠϒϥϦΛ௚઀ಁաతʹݺ΂ΔͨΊɺ ͳΜ͔ؒҧͬͯ XSS ͕ى͖Δͱ೚ҙίʔυ࣮ߦͰ͖ Δ <html> <script> // ࣗ෼ͷϩʔΧϧϑΝΠϧΛফͨ͠Γ
const fs = require(‘fs’); fs.unlinkSync('/'); // ࣗ෼ͷϩʔΧϧϑΝΠϧΛফͨ͠Γ const cp = require('child_process'); cp.execSync('rm -rf /'); </script> </html>

Electron ͷ౗͠ํ  (by hasegawayosuke) http://utf-8.jp/public/2016/0307/electron.pdf

Electron ͷ౗͠ํ  (by hasegawayosuke) http://utf-8.jp/public/2016/0307/electron.pdf Booooooo

ಛʹ DOM based XSS ͕͋Δ ͱ NG

ʘ(^o^)ʗ

ٹ͍͸͋Δ

Security Updates

جຊతʹ nodeIntegration Λ ࢖Θͳ͚Ε͹೚ҙͷίʔυͷ ࣮ߦ·Ͱ͸Ͱ͖ͳ͍ʂʂʂʂ

nodeIntegration Λ false ʹͨ͠··࡞ Γɺ IPC ௨৴Ͱ node ͱ΍ΓऔΓ͢Δ app.on('ready',
function() { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: false // false ʹ͢Δ } }); mainWindow.loadURL('file://' + __dirname + '/index.html'); mainWindow.on('closed', function() { mainWindow = null; }); });

fs.readFile(‘foo/bar/baz’, (err, data) => { console.log(data); }); </script> <script> // ֎෦ϓϩηεΛݺΜͩΓ const cp = require(‘child_process’); cp.exec(‘ls -l’, (err, stdout) => { console.log(stdout); }); </script>

fs.readFile(‘foo/bar/baz’, (err, data) => { console.log(data); }); </script> <script> // ֎෦ϓϩηεΛݺΜͩΓ const cp = require(‘child_process’); cp.exec(‘ls -l’, (err, stdout) => { console.log(stdout); }); </script> ఘΊΖʂʂʂʂʂʂ

Defensive ʹ࡞ΔͳΒ nodeIntegration Λ false ʹ ͭͭ͠ɺ ipc Ͱ Node.js
ͱ΍ ΓऔΓ

ࢀߟʹ͢Δ΂͖ࢿྉ

Electron ࢀߟ • Qiita Ͱ Advent Calendar ࣮ࢪத • http://qiita.com/advent-calendar/2015/electron
• awesome electron • https://github.com/sindresorhus/awesome-electron • electron slack • https://electron-jp-slackin.herokuapp.com/ • ೔ຊޠνϡʔτϦΞϧ຋༁ • https://github.com/sotayamashita/electron/tree/japanese-localization/docs- translations/jp

ޙ΋͏Ұͭ

electron ͷҭͯํ • electronica   electron tutorial Λ࡞࣮ͬͯߦͯ͠ΈΔͱ͍͍ ͔΋

electronica install $ (sudo) npm install electronica -g # ͜ΕͰΠϯετʔϧ
$ electronica # ͜ΕͰىಈʂ

electron ͷҭͯํ • electronica   electronica ͕ऴΘΕ͹؆қϒϥ΢βΛ࡞ͬͯ ༡΂Δɻ

Electron ΛҰॹʹҭ͍͖ͯͯ ·͠ΐ͏ɻ

·ͱΊ

·ͱΊ • electron ೔ਐ݄าͰਐԽͯ͠Δ • ΤίγεςϜ΋େ͖͘ͳ͍ͬͯΔ • ͦΕʹͱ΋ͳͬͯؾΛ͚ͭͳ͍ͱ͍͚ͳ͍఺΋ଟ͍ • ಛʹηΩϡϦςΟ
• ҰॹʹΈΜͳͰ৴߸Λ౉Γ͍ͨʂ

͋Γ͕ͱ͏͍͟͝·ͨ͠

electron introduction

electron introduction

Yosuke Furukawa PRO

More Decks by Yosuke Furukawa

Other Decks in Programming

Featured

Transcript

Yosuke Furukawa
PRO