calro

roppongi.js #7向け

Transcript

1. Carloͷ࿩ Roppongi.js #7
2. About me
3. Carloͱ͸ • https://github.com/GoogleChromeLabs/ carlo • Googleᐌ͘
 ʮheadful Node app frameworkʯ
5. Node.js + Chromium • Carlo͸ChromiumΛը໘ඳըΤϯδϯͱͯ͠ ಈ࡞͢ΔNode.js ΞϓϦέʔγϣϯϑϨʔϜ ϫʔΫ • Node.jsɺChromiumͱ΋ʹV8͕ಈ࡞͢Δͨ ΊɺJavaScriptͷΈͰσεΫτοϓΞϓϦ͕࡞ ΕΔ
6. ࢖͍ํ
7. Demo https://github.com/Quramy/carlo-git-graph
8. Electron΍NW.jsͱͷҧ͍
9. ϥϯλΠϜϑΝΠϧαΠζ໰୊ • Electron / NW.js͸ChromiumͷϨϯμϥϓϩ ηε͔ΒNode.js΁ΞΫηεͰ͖ΔΑ͏ʹ͠ ͨɺಠࣗͷϥϯλΠϜΛඞཁͱ͢Δ • ͍͕ͭ͜૬౰ॏ͍ͨ
10. (ࢀߟ) ElectronͷϑΝΠϧαΠζ https://github.com/electron/electron/releases/tag/v3.0.8
11. Electron΍Nw.jsͷ഑෍ • Electron / NW.jsͰ࡞੒ͨ͠ΞϓϦέʔγϣϯ Λ഑෍͢Δ৔߹ɺಠࣗϥϯλΠϜࣗମ΋ bundleͯ͠഑෍͢Δͷ͕Ұൠతɻ
 (Ϣʔβʔ͸ී௨ɺElectron ΍NW.jsΛࣄલʹ Πϯετʔϧͯ͠ͳ͍) • ඞવతʹ഑෍෺ͷαΠζ͕ڊେԽ͢Δ
12. CarloͰ࡞ͬͨΞϓϦͷ഑෍ • Carlo͸Ϣʔβʔ͕Πϯετʔϧ͍ͯ͠Δ ChromeΛͦͷ··ར༻͢Δ • Node.jsΛطʹΠϯετʔϧ͍ͯ͠ΔϢʔβʔ ΁഑෍͢ΔͷͰ͋Ε͹ɺNPMͰे෼
13. CarloͰ࡞ͬͨΞϓϦͷ഑෍ • Node.js͚ͩΛόϯυϧͯ͠഑෍͢Δ৔߹ɺ https://github.com/zeit/pkg Λར༻͢ΔͱΑ ͍Β͍͠
14. nodeIntegration໰୊ • ElectronͰ͸σϑΥϧτͰ nodeIntegrationͱ ͍͏ػೳ͕onʹ͞Ε͍ͯΔ • ͜Ε͸ɺϨϯμϥϓϩηε(ཁ͢Δʹը໘)͔ ΒɺNode.jsͷAPIΛ৮ΕΔɺͱ͍͏ػೳ
15. nodeIntegration໰୊ • ը໘͔ΒNode.jsʹ৮ΕΔͱ͍͏͜ͱ͸
 
 
 ͱ͔͕ී௨ʹಈ͍ͯ͠·͏ • ΞϓϦέʔγϣϯʹXSSͷ੬ऑੑΛຒΊࠐΜͩ ͱ͖ͷඃ֐͕௨ৗͷWebΞϓϦͷൺ͡Όͳ͍ require('child_process').execSync('ls')
16. nodeIntegration໰୊ • CarloͰ͸ɺࣗ෼Ͱબ୒ͨ͠Node.jsͷؔ਺ͷ Έ͕ɺ໌ࣔతʹChromiumଆ΁ެ։͞ΕΔํࣜ • XSS͕͋ͬͨͱ͜ΖͰɺElectron΄Ͳͷඃ֐ʹ ͸ͳΒͳ͍͸ͣ
17. CarloͱPuppeteer
18. CarloͱPuppeteer • Carlo͸PuppeteerͰChromiumΛNode.js͔Βૢ࡞ͯ͠ ͍Δ • Puppeteerͱ͸ • ͜Ε΋Google੡ͷϥΠϒϥϦ • ChromiumΛࣗಈԽ͢Δ໨తͰ࡞ΒΕ͍ͯΔ • Chrome Devtool ProtocolͷΫϥΠΞϯτ
19. CarloͱPuppeteer • NPMͷpuppeteerύοέʔδ͸ɺChromiumͷϥ ϯλΠϜΛpost installͰϩʔΧϧʹΠϯετʔϧ ͯ͘͠Δ • ૢ࡞෦෼ͷΈΛ੾Γग़ͨ͠puppeteer-coreͱ͍ ͏ύοέʔδ΋͋Δɻ͍ͭ͜͸ϩʔΧϧΠϯετʔ ϧΛߦΘͳ͍ɻ
 Carlo͕࢖͍ͬͯΔͷ͸ͬͪ͜
20. CarloͱPuppeteer • ࣮ࡍͷͱ͜Ζɺݱঢ়ͷCalro͸Puppeteerͷബ ͍ϥούʔͰ͔͠ͳ͍ • CarloͷAPIʹఆٛ͞Ε͍ͯΔ exposeFunction ͳͲ΋Puppeteerͷಉ໊ؔ਺ʹҕৡ͍ͯ͠Δͩ ͚
21. Node.js <=> Chromimum /PEFKTͷؔ਺Λ
    $ISPNJVNଆ͔Βݺͼग़͠Մೳʹ͢Δ
22. ·ͱΊ • Carlo͸PuppeteerΛར༻ͨ͠σεΫτοϓΞϓϦΤ ϯδϯ • PuppeteerͷAPI஌ͬͯΕ͹Ͳ͏ͱͰ΋ͳΔ • Electron / NW.jsΑΓ΋ࣗ༝౓͸௿͍͕ϑΝΠϧαΠ ζͳͲͷ໘Ͱ༗ར • CLIʹͪΐͬͱͨ͠ը໘Λ΋͍ͨͤͨͱ͖ʹศར͔΋
23. Thank you!