DevTools を開いたら人類滅亡

7b7067dda63cff8edc9ecfd1345cd316?s=47 diescake
March 24, 2018

DevTools を開いたら人類滅亡

DevTools を開いたら人類が滅亡するジョークライブラリの紹介から、その技術的な仕組みについて簡単に解説

* 2018/3/24 Manabiya Teratail Developer Days [Web LT]

7b7067dda63cff8edc9ecfd1345cd316?s=128

diescake

March 24, 2018
Tweet

Transcript

  1. DevTools を 開いたら 人類滅亡 2018/03/24 ACCESS CO., LTD. Daisuke Kondo

    @diescake
  2. ACCESS CO., LTD. Daisuke Kondo @diescake * Frontend / xR

    * 大喜利エンジニア * Vim * きのこの山 * iPhone * ガチャピン * 目玉焼き→ソース派 * たいやき→頭から * クラフトビール * テニス * せいそくち 浅草 自己紹介
  3. ACCESS CO., LTD. Daisuke Kondo @diescake * Frontend / xR

    * 大喜利エンジニア * Vim * きのこの山 * iPhone * ガチャピン * 目玉焼き→ソース派 * たいやき→頭から * クラフトビール * テニス * せいそくち 浅草 自己紹介 会社が休みになるボタン https://qiita.com/diescake/items/d4e1fb2dccc2fd4c92d8
  4. ACCESS CO., LTD. Daisuke Kondo @diescake * Frontend / xR

    * 大喜利エンジニア * Vim * きのこの山 * iPhone * ガチャピン * 目玉焼き→ソース派 * たいやき→頭から * クラフトビール * テニス * せいそくち 浅草 自己紹介 布団から腕すら出さずに会社を休む [Google Home] https://qiita.com/diescake/items/4f354a5dc7cb738efd4f
  5. DevTools を 開いたら 人類滅亡?

  6. None
  7. None
  8. None
  9. devtool-meteor * DevTools が開かれたら、人類滅亡動画が ウィンドウ一杯で再生されるだけの ジョークライブラリ $ npm install --save

    devtool-meteor import 'devtool-meteor'; https://github.com/diescake/devtool-meteor
  10. 仕組み

  11. devtools-detect * DevTools の開閉が検出可能な EventListener を提供 $ npm install --save

    devtools-detect windows.addEventListener('devtoolschange', (e) => { console.log(`is DevTools open? ${e.detail.open}`); }); * 要するに devtools-detect 使って、 iframe で YouTube 展開しただけ… https://github.com/sindresorhus/devtools-detect
  12. window.outerWidth window.innerWidth 仕組みは単純 >160px then detected !!

  13. window.outerHeight window .innerHeight 仕組みは単純 >160px then detected !!

  14. 単純過ぎない? 副作用とかありそう…

  15. window.outerWidth window.innerWidth あっ…、サイドバー… >160px !!

  16. window.outerWidth window.innerWidth あっ…、サイドバー… >160px !!

  17. Pros/Cons * Pros * Chrome, Firefox, Safari, Edge に対応 *

    今後対策される可能性は低い * Cons * DevTools を別ウィンドウにされると 手も足もでない * 性質上 false positive な面が強い
  18. 他の手段

  19. Object の id を利用 const e = document.createElement('any'); Object.defineProperty(e, 'id',

    { get:() => { alert('devtools open !!') } }); setInterval(() => { console.log(e); }, 2000); * DevTools 表示時に console.log が処理され id が取得される性質を利用
  20. Pros/Cons * Pros * Chrome, Safari, Edge に対応 * DevTools

    が別ウィンドウでも検出可能 * Cons * Firefox 非対応 * 今後対策される可能性がある
  21. まとめ * DevTools を検出する銀の弾丸はない * DevTools が利用される前提の作りを * ヘイトを集めるような使い方は NG

    * 本気出されたら何やっても無理 * 大喜利楽しい
  22. エンジニア絶賛募集中 https://www.access-company.com

  23. ご清聴ありがとうございました