calro

roppongi.js #7向け

Transcript

1. Carloͷ࿩
   Roppongi.js #7
   

   View Slide

2. About me
   

   View Slide

3. Carloͱ͸
   • https://github.com/GoogleChromeLabs/
   carlo
   • Googleᐌ͘

   ʮheadful Node app frameworkʯ
   

   View Slide

4. View Slide

5. Node.js + Chromium
   • Carlo͸ChromiumΛը໘ඳըΤϯδϯͱͯ͠
   ಈ࡞͢ΔNode.js ΞϓϦέʔγϣϯϑϨʔϜ
   ϫʔΫ
   • Node.jsɺChromiumͱ΋ʹV8͕ಈ࡞͢Δͨ
   ΊɺJavaScriptͷΈͰσεΫτοϓΞϓϦ͕࡞
   ΕΔ
   

   View Slide

6. ࢖͍ํ
   

   View Slide

7. Demo
   https://github.com/Quramy/carlo-git-graph
   

   View Slide

8. Electron΍NW.jsͱͷҧ͍
   

   View Slide

9. ϥϯλΠϜϑΝΠϧαΠζ໰୊
   • Electron / NW.js͸ChromiumͷϨϯμϥϓϩ
   ηε͔ΒNode.js΁ΞΫηεͰ͖ΔΑ͏ʹ͠
   ͨɺಠࣗͷϥϯλΠϜΛඞཁͱ͢Δ
   • ͍͕ͭ͜૬౰ॏ͍ͨ
   

   View Slide

10. (ࢀߟ) ElectronͷϑΝΠϧαΠζ
    https://github.com/electron/electron/releases/tag/v3.0.8
    

    View Slide

11. Electron΍Nw.jsͷ഑෍
    • Electron / NW.jsͰ࡞੒ͨ͠ΞϓϦέʔγϣϯ
    Λ഑෍͢Δ৔߹ɺಠࣗϥϯλΠϜࣗମ΋
    bundleͯ͠഑෍͢Δͷ͕Ұൠతɻ

    (Ϣʔβʔ͸ී௨ɺElectron ΍NW.jsΛࣄલʹ
    Πϯετʔϧͯ͠ͳ͍)
    • ඞવతʹ഑෍෺ͷαΠζ͕ڊେԽ͢Δ
    

    View Slide

12. CarloͰ࡞ͬͨΞϓϦͷ഑෍
    • Carlo͸Ϣʔβʔ͕Πϯετʔϧ͍ͯ͠Δ
    ChromeΛͦͷ··ར༻͢Δ
    • Node.jsΛطʹΠϯετʔϧ͍ͯ͠ΔϢʔβʔ
    ΁഑෍͢ΔͷͰ͋Ε͹ɺNPMͰे෼
    

    View Slide

13. CarloͰ࡞ͬͨΞϓϦͷ഑෍
    • Node.js͚ͩΛόϯυϧͯ͠഑෍͢Δ৔߹ɺ
    https://github.com/zeit/pkg Λར༻͢ΔͱΑ
    ͍Β͍͠
    

    View Slide

14. nodeIntegration໰୊
    • ElectronͰ͸σϑΥϧτͰ nodeIntegrationͱ
    ͍͏ػೳ͕onʹ͞Ε͍ͯΔ
    • ͜Ε͸ɺϨϯμϥϓϩηε(ཁ͢Δʹը໘)͔
    ΒɺNode.jsͷAPIΛ৮ΕΔɺͱ͍͏ػೳ
    

    View Slide

15. nodeIntegration໰୊
    • ը໘͔ΒNode.jsʹ৮ΕΔͱ͍͏͜ͱ͸

    

    

    ͱ͔͕ී௨ʹಈ͍ͯ͠·͏
    • ΞϓϦέʔγϣϯʹXSSͷ੬ऑੑΛຒΊࠐΜͩ
    ͱ͖ͷඃ֐͕௨ৗͷWebΞϓϦͷൺ͡Όͳ͍
    require('child_process').execSync('ls')
    

    View Slide

16. nodeIntegration໰୊
    • CarloͰ͸ɺࣗ෼Ͱબ୒ͨ͠Node.jsͷؔ਺ͷ
    Έ͕ɺ໌ࣔతʹChromiumଆ΁ެ։͞ΕΔํࣜ
    • XSS͕͋ͬͨͱ͜ΖͰɺElectron΄Ͳͷඃ֐ʹ
    ͸ͳΒͳ͍͸ͣ
    

    View Slide

17. CarloͱPuppeteer
    

    View Slide

18. CarloͱPuppeteer
    • Carlo͸PuppeteerͰChromiumΛNode.js͔Βૢ࡞ͯ͠
    ͍Δ
    • Puppeteerͱ͸
    • ͜Ε΋Google੡ͷϥΠϒϥϦ
    • ChromiumΛࣗಈԽ͢Δ໨తͰ࡞ΒΕ͍ͯΔ
    • Chrome Devtool ProtocolͷΫϥΠΞϯτ
    

    View Slide

19. CarloͱPuppeteer
    • NPMͷpuppeteerύοέʔδ͸ɺChromiumͷϥ
    ϯλΠϜΛpost installͰϩʔΧϧʹΠϯετʔϧ
    ͯ͘͠Δ
    • ૢ࡞෦෼ͷΈΛ੾Γग़ͨ͠puppeteer-coreͱ͍
    ͏ύοέʔδ΋͋Δɻ͍ͭ͜͸ϩʔΧϧΠϯετʔ
    ϧΛߦΘͳ͍ɻ

    Carlo͕࢖͍ͬͯΔͷ͸ͬͪ͜
    

    View Slide

20. CarloͱPuppeteer
    • ࣮ࡍͷͱ͜Ζɺݱঢ়ͷCalro͸Puppeteerͷബ
    ͍ϥούʔͰ͔͠ͳ͍
    • CarloͷAPIʹఆٛ͞Ε͍ͯΔ exposeFunction
    ͳͲ΋Puppeteerͷಉ໊ؔ਺ʹҕৡ͍ͯ͠Δͩ
    ͚
    

    View Slide

21. Node.js <=> Chromimum
    /PEFKTͷؔ਺Λ
    $ISPNJVNଆ͔Βݺͼग़͠Մೳʹ͢Δ
    

    View Slide

22. ·ͱΊ
    • Carlo͸PuppeteerΛར༻ͨ͠σεΫτοϓΞϓϦΤ
    ϯδϯ
    • PuppeteerͷAPI஌ͬͯΕ͹Ͳ͏ͱͰ΋ͳΔ
    • Electron / NW.jsΑΓ΋ࣗ༝౓͸௿͍͕ϑΝΠϧαΠ
    ζͳͲͷ໘Ͱ༗ར
    • CLIʹͪΐͬͱͨ͠ը໘Λ΋͍ͨͤͨͱ͖ʹศར͔΋
    

    View Slide

23. Thank you!
    

    View Slide