Upgrade to Pro — share decks privately, control downloads, hide ads and more …

calro

Yosuke Kurami
November 19, 2018
530

 calro

roppongi.js #7向け

Yosuke Kurami

November 19, 2018
Tweet

Transcript

  1. Carloͷ࿩
    Roppongi.js #7

    View full-size slide

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

    ʮheadful Node app frameworkʯ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Electron΍NW.jsͱͷҧ͍

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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



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

    View full-size slide

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

    View full-size slide

  14. CarloͱPuppeteer

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide