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

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

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

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

DevTools を 開いたら 人類滅亡？

No content

No content

No content

devtool-meteor ＊ DevTools が開かれたら、人類滅亡動画が ウィンドウ一杯で再生されるだけの ジョークライブラリ $ npm install --save devtool-meteor import 'devtool-meteor'; https://github.com/diescake/devtool-meteor

仕組み

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

window.outerWidth window.innerWidth 仕組みは単純 >160px then detected !!

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

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

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

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

Pros/Cons ＊ Pros ＊ Chrome, Firefox, Safari, Edge に対応 ＊ 今後対策される可能性は低い ＊ Cons ＊ DevTools を別ウィンドウにされると 手も足もでない ＊ 性質上 false positive な面が強い

他の手段

Object の id を利用 const e = document.createElement('any'); Object.defineProperty(e, 'id', { get:() => { alert('devtools open !!') } }); setInterval(() => { console.log(e); }, 2000); ＊ DevTools 表示時に console.log が処理され id が取得される性質を利用

Pros/Cons ＊ Pros ＊ Chrome, Safari, Edge に対応 ＊ DevTools が別ウィンドウでも検出可能 ＊ Cons ＊ Firefox 非対応 ＊ 今後対策される可能性がある

まとめ ＊ DevTools を検出する銀の弾丸はない ＊ DevTools が利用される前提の作りを ＊ ヘイトを集めるような使い方は NG ＊ 本気出されたら何やっても無理 ＊ 大喜利楽しい

エンジニア絶賛募集中 https://www.access-company.com

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