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

How to hack VS Code: evil ways (Japanese)

How to hack VS Code: evil ways (Japanese)

fand/amagitakayosi

January 12, 2019
Tweet

More Decks by fand/amagitakayosi

Other Decks in Technology

Transcript

  1. amagitakayosi
    amagitakayosi
    HOW TO HACK
    VSCODE
    :Evil Ways
    HOW TO HACK
    VSCODE
    :Evil Ways

    View Slide

  2. @amagitakayosi

    View Slide

  3. View Slide

  4. ϥΠϒίʔσΟϯά7+΍ͬͯ·͢

    View Slide

  5. 7&%"
    (-4-ϥΠϒίʔσΟϯά؀ڥ

    Λ࡞͍ͬͯ·͢

    View Slide

  6. 7&%"ͷྑ͍ͱ͜Ζ
    w 7+Ͱ͖Δ
    w "UPNͰ7+Ͱ͖Δ

    View Slide

  7. 7&%"ͷѱ͍ͱ͜Ζ
    w "UPNͰ͔͠ಈ͔ͳ͍

    View Slide

  8. View Slide

  9. ΍Γ·ͨ͠
    ΍Γ·ͨ͠
    ΍Γ·ͨ͠
    ΍Γ·ͨ͠

    View Slide

  10. ࠓ೔ͷϝχϡʔ
    w 7&%"ͷ෮श
    w ͳͥ74$PEFͩͱ೉͍͠ͷ͔
    w 74$PEFͰͲ͏΍ͬͯಈ͔͔ͨ͠
    w ࠓޙͷ՝୊

    View Slide

  11. veda
    veda
    veda

    View Slide

  12. ɹ7&%"
    w "UPN্Ͱ(-4-Λ࣮ߦ͢Δύοέʔδ
    w ಈըΛ੾Γସ͑ͯΤϑΣΫτ͔͚ͨΓɺ

    ϨΠϚʔνϯά͚ͩͰ7+ͨ͠Γ
    w Ի੠ೖྗɺ.*%*ɺ04$ೖྗͳͲ

    ͞·͟·ͳೖྗʹରԠ

    View Slide

  13. ɹ"UPN
    w &MFDUSPOͰ࡞ΒΕͨΤσΟλ(JU)VC੡
    w $ISPNFؙ͕͝ͱೖͬͯΔΑ͏ͳ΋Μ
    w ֦ுػೳͰ%0.͍͡Γ์୊ͳͷͰ

    8FC(-Ͱ΋8FC"VEJPͰ΋ԿͰ΋ग़དྷΔ

    View Slide

  14. 7&%"ͷ࢓૊Έ
    UIཁૉ
    ΢Πϯυ΢
    ←canvasཁૉΛૠೖͯ͠

    ɹWebGLΛඳը

    View Slide

  15. ɹɹ74$PEF 7JTVBM4UVEJP$PEF

    w .JDSPTPGU͕։ൃ
    w "UPNͱಉ͘͡&MFDUSPOϕʔε
    w ଟػೳɺߴ଎ɺิ׬͕ڧ͍
    w ࠷ۙΈΜͳ࢖ͬͯΔ

    View Slide

  16. https://insights.stackoverflow.com/survey/2018
    ೥࠷΋ਓؾͷΤσΟλ

    View Slide

  17. 7&%"ɼͳͥ74$PEFʹҠ২Ͱ͖ͳ͍ͷʁ
    w 74$PEF͸"UPNͱಉ͘͡&MFDUSPOϕʔε
    w ύϑΥʔϚϯεͱ҆શੑͷͨΊɺ

    ֦ுػೳͷݖݶ͸͔ͳΓ੍ݶ͞ΕΔ
    w ֦ுػೳͷ+4͸ผϓϩηεͰ࣮ߦ͞ΕΔ
    w %0.৮Εͳ͍ʜʜ

    View Slide

  18. “VS Codeの拡張機能は、エディターのUIにHTML要素を

      追加したり、カスタムCSSを適用する事はできません”

    View Slide

  19. View Slide

  20. ຊ࣭
    w ίʔυͷഎ໘ʹ
    w 8FC(-Ͱඳըͨ͠എܠΛ
    w ϦΞϧλΠϜͰඳը͍ͨ͠

    View Slide

  21. Ξϓϩʔν
    w ֎෦ϓϩηεͰϏϡʔΞʔΛ૸ΒͤΔ
    w ΤσΟλͷඳը݁ՌΛ֎෦ϓϩηεʹૹΔ
    w ͳΜͱͯ͠΋74$PEF্Ͱಈ͔͢

    View Slide

  22. ֎෦ϓϩηεͰϏϡʔΞʔΛ૸ΒͤΔ
    w 74$PEFͷ΢Πϯυ΢͸൒ಁ໌ʹͰ͖Δ
    w ݱ࣌఺Ͱ͸8JOEPXT൛ͷΈ
    w .BD൛ରԠ΋#BDLMPHʹೖͬͨ
    w 74$PEFͷ΢Πϯυ΢ҐஔΛऔಘ͠ɺ

    ϏϡʔΞʔͷҐஔΛ௥ਵͤ͞Ε͹ྑ͍ʁ

    View Slide

  23. ֎෦ϓϩηεͰϏϡʔΞʔΛ૸ΒͤΔ
    VSCode
    Ϩϯμϥʔ

    View Slide

  24. w ಈըͱͯ͠ૹΔ
    w ಛఆͷ΢Πϯυ΢ͷඳը݁ՌΛऔಘ͢Δͷ͸

    ͳΜ͔ؤுΕ͹Ͱ͖Δ͸ͣʢ7%.9౳͕ରԠ
    w ΤσΟλͷഎܠΛࠇʹͯ͠ɺ

    ࠇ͍ॴΛൈ͍ͯग़ྗʹॏͶΕ͹Α͍ʁ
    w ݟਏͦ͏
    ΤσΟλͷඳը݁ՌΛ֎෦ϓϩηεʹૹΔ

    View Slide

  25. ΤσΟλͷඳը݁ՌΛ֎෦ϓϩηεʹૹΔ
    ඳը݁Ռ
    Ϩϯμϥʔ
    VSCode

    View Slide

  26. ͏ʙʙΜʜʜʜʜʜʜ

    View Slide

  27. Μʁ

    View Slide

  28. View Slide

  29. w ଧݤ͢ΔͱΧʔιϧ͕രൃ͢ΔΞϨ
    w ࠷ॳ͸"UPNͰ࣮૷͞Εͨ
    w "UPNͰ͸DBOWBTΞχϝʔγϣϯɺͳ͸ͣ
    w 74$PEFͰ͸%0.Λ͍͡Εͳ͍ͷͰ

    ෆՄೳͩͱࢥΘΕ͕ͨʜʜʁ
    vscode-power-mode

    View Slide

  30. w ࣄલʹΤϑΣΫτΛ(*'Ξχϝʹॻ͖ग़͠
    w %FDPSBUJPOͷCBDLHSPVOEJNBHFͱͯ͠

    (*'ΞχϝΛදࣔ
    1PXFS.PEFͷ࢓૊Έ

    View Slide

  31. w ίʔυͷಛఆͷൣғʹ૷০Λ௥ՃͰ͖Δ
    w MJOUΤϥʔ΍ɺΧϥʔίʔυͷ৭ϓϨϏϡʔ౳
    w CFGPSF΍BGUFSʹ$44Λ౰ͯΒΕΔʂʂʂ
    w CBDLHSPVOEJNBHFͰը૾ΛಡΈࠐΊΔ
    %FDPSBUJPO"1*

    View Slide

  32. ࢼ͠ʹը૾Λදࣔͯ͠ΈΔ

    View Slide

  33. ը૾͸ಡΈࠐΊΔ
    w ຖϑϨʔϜɺඳը݁ՌΛը૾ϑΝΠϧʹ

    ॻ͖ग़ͤ͹ྑ͍ʂʂʂʂʂ
    w ΊͬͪΌॏͦ͏͚ͩͲ΍ͬͯΈΑ͏
    w γΣʔμʔΛಡΈࠐΜͰը૾Λు͖ग़͢

    Ϩϯμϥʔ࡞Γɺ74$PEF͔Βݺͼग़ͤ͹ྑ͍

    View Slide

  34. ࡞ઓ
    1. γΣʔμʔΛϑΝΠϧʹอଘ

    View Slide

  35. ࡞ઓ
    2. Ϩϯμϥʔ͕γΣʔμʔΛಡΈࠐΉ

    View Slide

  36. ࡞ઓ
    3. Ϩϯμϥʔ͸ຖϑϨʔϜ

    ɹ ը૾ϑΝΠϧΛॻ͖ग़͠ଓ͚Δ

    View Slide

  37. ࡞ઓ
    4. ΤσΟλʔ͸ॻ͖ग़͞Εͨը૾Λ

    ɹ ຖϑϨʔϜDecoratorʹදࣔ͢Δ

    View Slide

  38. w ཁ݅
    w γΣʔμʔͷύεɺग़ྗαΠζΛड͚औΔ
    w 0QFO(-Ͱ(-4-Λඳը͠ɺϑΝΠϧʹॻग़
    w ग़ྗͨ͠ϑΝΠϧ໊Λඪ४ग़ྗʹදࣔ
    w 74$PEF͕ಡΈࠐΊΔΑ͏ʹ
    Ϩϯμϥʔ࡞੒

    View Slide

  39. w ΫϩείϯύΠϧ͍ͨ͠
    w 8FC(-͸ΫϩεϓϥοτϑΥʔϜͰҒ͍ʜʜ
    w (Pͱ3VTUͰ0QFO(-ͷνϡʔτϦΞϧ΍ͬͨॴ

    (Pͷํָ͕ͦ͏ͩͬͨ
    w (P0QFO(-νϡʔτϦΞϧ

    IUUQTNFEJVNDPN!ESHPNFTQPQFOHMBOEHPMBOHHFUUJOHTUBSUFEBCDEEGEC

    w 3VTU0QFO(-νϡʔτϦΞϧ

    IUUQTXXXSFEEJUDPNSSVTUDPNNFOUTBCLH
    SVTU@BOE@PQFOHM@GSPN@TDSBUDI@B@CMPH@QPTU@TFSJFT
    ࠓճ͸(PΛ࠾༻

    View Slide

  40. View Slide

  41. w QPTJUJPOpYFE͕ޮ͔ͳ͍ʜʜʂʁ ୭͔ॿ͚ͯ


    w શը໘ʹද͍ࣔͨ͠ͷͰɺ%FDPSBUPSͷൣғΛ


    ʹ͕ͨ͠ɺεΫϩʔϧ͢Δͱফ͑ͯ͠·͏
    w 74$PEF͸ɺը໘֎ʹग़ͨཁૉΛ

    ଈ࠲ʹফͯ͠͠·͏Ͱରॲ
    w FEJUPSWJTJCMF3BOHFTͰରॲ
    %FDPSBUPS஍ຯʹۤ࿑ͨ͠఺

    View Slide

  42. w ࠷ॳ͸GQT͘Β͍͔͠ग़ͳ͔ͬͨʜʜʂʂ
    w ΍ͬͨ͜ͱ
    w ඪ४ग़ྗɺϑΝΠϧॻ͖ग़͠ɺ

    γΣʔμʔߋ৽ͷରԠΛHPSPVUJOFͰ
    w 1/(ॻ͖ग़͠Λௐ੔
    ύϑΥʔϚϯεվળ

    View Slide

  43. ૉ๿ͳ࣮૷

    View Slide

  44. ૉ๿ͳ࣮૷
    ˡϑΝΠϧ*0ͰϒϩοΫ
    ˡඪ४ग़ྗͰϒϩοΫ

    View Slide

  45. ը૾ϑΝΠϧ
    ॻ͖ग़͠
    ඪ४ग़ྗ
    ϝΠϯ
    描画したよ
    描画!
    ファイル
    書き出し!
    書き出したよ
    出力

    View Slide

  46. ը૾ϑΝΠϧ
    ॻ͖ग़͠
    ඪ४ग़ྗ
    ϝΠϯ

    View Slide

  47. ը૾ϑΝΠϧ
    ॻ͖ग़͠
    ඪ४ग़ྗ
    ϝΠϯ

    View Slide

  48. վળޙͷ࣮૷
    ˡඇಉظͰը૾ॻ͖ग़͠

    View Slide

  49. վળޙͷ࣮૷
    ˡඇಉظͰඪ४ग़ྗ

    View Slide

  50. w (-'8͸ϝΠϯεϨουͰ͔͠ݺ΂ͳ͍ͷͰ

    Կ౓͔ϋϚͬͨ
    w ը૾ϑΝΠϧॻ͖ग़͠HPSPVUJOFͰ

    HMΦϒδΣΫτݺΜͰͯ4&(7ͨ͠Γ
    w HPͷඪ४ϕϯνϚʔΫπʔϧͰ͸

    ϝΠϯεϨουͰ࣮ߦ͢Δͷେมͦ͏ͩͬͨ
    HPSPVUJOFศརͰ͢Ͷ

    View Slide

  51. w 0QFO(-͔Βऔಘͨ͠3(#"ΛJNBHFQOHʹ౉͢ͱ

    ্Լ൓సͯ͠ग़ྗ͞ΕΔ
    w 8FC(-ͩͱHM6/1"$,@'-*1@:@8(-Ͱ

    ඳը݁Ռ൓సͯ͠औಘͰ͖Δͷʹʜʜ
    w άάͬͯΈΔͱɺΈΜͳૉ๿ʹGPSϧʔϓͰ

    ্Լ൓సͯ͋͛ͯ͠ΔΑ͏ͩͬͨ
    1/(ॻ͖ग़͠Λௐ੔

    View Slide

  52. w σʔλॻ͖ࠐΈͷGPSϧʔϓΛมߋͯ͠

    ԼͷϐΫηϧ͔Βॱ൪ʹॻ͖ग़͢Α͏ʹͨ͠

    IUUQTHJUIVCDPNHPMBOHHPCMPCNBTUFSTSDJNBHFQOHXSJUFSHP-


    w ͍ͭͰʹ#VpPΛ౉ͯ͠

    ϑΝΠϧॻ͖ࠐΈΛόοϑΝϦϯά͢ΔΑ͏ʹ
    w 'JMFXSJUF͸όοϑΝϦϯά͞Εͳ͍
    JNBHFQOHΛGPSL

    View Slide

  53. YͰGQT͘Β͍ग़ΔΑ͏ʹ

    View Slide

  54. w ΫϩεϓϥοτϑΥʔϜͳԻ੠ೖྗϥΠϒϥϦɺ

    ͋Μ·Γແ͍΋ΜͳΜͰ͢Ͷʜʜ
    w ࠓճ͸HPQPSUBVEJPΛ࠾༻
    w ΫϩείϯύΠϧͰ͖ͳ͍ʜʜ(Pͳͷʹ
    w 3VTU͸Ի੠ೖྗपΓ͔ͳΓ͔ͬ͠Γͯ͠ΔͷͰ

    ͍ͣΕ3VTUʹҠߦ͢Δ͔΋
    Ի੠ೖྗ

    View Slide

  55. w HPඪ४ͷJNBHFQOHΛ࢖ͬͯͨ
    w 0QFO(-͔Βऔಘͨ͠3(#"Λ౉͢ͱ

    ্Լ൓సͯ͠ग़ྗ͞ΕΔ
    w 8FC(-ͩͱHM6/1"$,@'-*1@:@8(-Ͱ

    ඳը݁Ռ൓సͯ͠औಘͰ͖Δͷʹʜʜ
    w ௐ΂ͯΈΔͱɺΈΜͳૉ๿ʹGPSϧʔϓͰ

    ্Լ൓సͯ͋͛ͯ͠ΔΑ͏ͩͬͨ
    1/(ॻ͖ग़͠Λௐ੔

    View Slide

  56. DEMO
    https://github.com/fand/veda-vscode

    View Slide

  57. w ύϑΥʔϚϯεվળ
    w ςΫενϟಡΈࠐΈ
    w .*%*ͱ͔ରԠ
    ࠓޙͷ՝୊

    View Slide

  58. w ը૾ॻ͖ग़͕͠Ͳ͏ͯ͠΋ϘτϧωοΫʹͳΔ
    w ॻ͖ग़͠ऴΘΓΛ଴ͨͣʹϩʔυͯ͠ΈΔʁ
    w ్த·Ͱ͔͠ಡΈࠐΊͣϒπ੾Εͨ͠
    w ϑΝΠϧ*0ݮΒ͢ʹ͸"1/(͕࢖͑Δʁ
    ύϑΥʔϚϯεվળ

    View Slide

  59. w ߴը࣭Ξχϝʔγϣϯը૾ϑΥʔϚοτ
    w -*/&ελϯϓͱ͔Ͱ࢖ΘΕͯΔ
    w ϑΝΠϧͷߏ଄తʹ͸ɺ

    ෳ਺ͷ1/(Λ·ͱΊͯϔομ௥Ճ͢Δ͚ͩ
    w ϦΞϧλΠϜੑ͕ࣦΘΕΔͷͰϘπ
    "1/(

    View Slide

  60. w 7&%"Ͱ͸ɺಈըૉࡐΛϩʔυͯ͠

    ςΫενϟͱͯ͠ར༻Ͱ͖Δ
    w 8FC(-ͷ"1*ʹWJEFPཁૉΛ౉ͯ͠Δ͚ͩ

    ʢϒϥ΢β͸Ғ͍ʜʜʣ
    w EDHNG ''.QFHͷϥούʔ
    Λ࢖͑͹ɺ

    ಈըͷ֤ϑϨʔϜΛ3(#"ͱͯ͠औಘͰ͖Δʜʁ
    ςΫενϟಡΈࠐΈ

    View Slide

  61. ͜͜Ͱ࣌ؒ੾Ε

    View Slide

  62. ·ͱΊ
    w ͳΜ͔ແཧ΍ΓؤுͬͨΒͦΕͳΓʹಈ͍ͨ
    w 74$PEFݫ͍͠ɻ"UPNͷᨳ͍จ۟

    ʮA hackable text editor for the 21st Centuryʯ

    ͸ӕ͡Όͳ͍ͳʜʜ
    w ϒϥ΢β͸Ғ͍Ϥ

    View Slide

  63. ϒϥ΢βͬͯੌ͍ɺҒ͍
    w 8FC(-΋Ғ͍
    w UFY*NBHF%ʹDBOWBT΍WJEFPཁૉΛ౉ͨ͠Β

    ෆࢥٞͳྗͰϩʔυग़དྷΔΑ͏ʹͳΔ
    w 8FC"VEJP"1*ɺϓϥοτϑΥʔϜͷࣄߟ͑ͣʹ

    Ի੠ೖྗͱΕΔ
    w "1/(ಡΈࠐΈͱ͔΋Կ΋ߟ͑ͣʹߦ͚Δ

    View Slide

  64. !74$PEF։ൃνʔϜ֤Ґ
    ֦ுػೳͰ%0.͍͡ΕΔΑ͏ʹ

    ͯ͘͠Εʂʂʂʂʂʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂʂʂʂʂʂʂʂʂ
    ʂཔΉʂʂʂʂʂʂʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂʂʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂʂʂʂʂʂʂʂʂ

    View Slide

  65. @amagitakayosi

    View Slide

  66. https://veda.gl/

    View Slide