calro

Transcript

1. Carloͷ࿩ Roppongi.js #7

2. About me

3. Carloͱ͸ • https://github.com/GoogleChromeLabs/ carlo • Googleᐌ͘
 ʮheadful Node app frameworkʯ

4. None

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!