DevTools を開いたら人類滅亡

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

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

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 を 開いたら 人類滅亡？
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. ご清聴ありがとうございました