ブラウザクラッシャーを作りたい!
ブラクラって知ってますか?
こんにちは、犬を飼いたい社内ニートの Castoroides です!結構有名なんですが、皆さんは「you are an idiot」ってご存じですか?
■ you are an idiot について
直訳すると「お前は馬鹿だ」です。いわゆるジョークプログラムの一種ですが、置いてあるサイトはすでにリンク切れとなっているようです。
挙動は以下の通り。
www.youtube.com
「you are an idiot, hahahahahaha」と音を出しながら、ウィンドウが無限増殖していきます。
放っておくとブラウザおよびPCが負荷に耐えられず、ブルースクリーンが表示されてしまうといった挙動らしいです。
所詮はブラウザ内で動くプログラムなので危険性は低いです。
なぜならタスクマネージャーから強制終了できるから。
このようにブラウザを操作して、ユーザに嫌がらせをするプログラムをブラウザクラッシャー、略してブラクラと言ったりするんですが…
なんだかとっても楽しそうですよね?
と、いうわけでさっそく作っていきたいと思います!
コンセプトは「令和のブラクラ」!!!
念のため断っておきますが、上記で紹介した you are an idiot
これ普通にPCに悪影響ある可能性あるらしいのでお気を付けください。
(ウェブアーカイブ残っているぽいので念のため)
今回は安全性を意識した、全く悪意のないブラクラを作るつもりですので
ぜひ最後まで読んでいただければ幸いです!
令和式ブラクラを作成する
■ Step1 ブラクラ用Webページを作る
そこからかよって感じですが、モチベに関わるのですごく大事なところです。
ということで、おしゃれなページつくるぞ~~!!!
~
~
~
(10分後)
~
~
~
1時間後…
~
~
~
(2時間後)できた!!!!!!!
https://castoroides.github.io/burakura/1_burakura_kari.html
なんということでしょう(匠)
素敵な?Webページが完成したので、これよりようやくプログラムを書いていきます。
ちなみにこのWebページには、すでに嫌がらせ要素を組み込んでいるのでクリックされる際はお気を付けください。
■ Step2 プログラムを組んでみる
先ほども書きましたが、以下のWebページには既に嫌がらせプログラムを設定しています。https://castoroides.github.io/burakura/1_burakura_kari.html
内容はこんなの。
<script> function buttonClick(){ for(i=10; i>0; i--){ alert("あと" + i + "回押してね(笑)"); } } </script>
「クリック!」を押すとアラートが10回表示されるってだけ。
ここから嫌がらせの強度を上げていきたいと思います!
できました!
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script> <script> const url = "https://castoroides.github.io/burakura/2_burakura_kari.html" // ページが読みこまれた際に実行される、1フレーム(1/60秒)ごとに実行される関数 function draw() { //無限タブ増殖 window.open(url, "_blank") } function buttonClick(){ for(i=10; i>0; i--){ alert("あと" + i + "回押してね(笑)"); } } // Close字のメッセージ window.onbeforeunload = function(e) { e.returnValue = "また来てね^^"; } </script>
まずは1行目、
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"
で、
フレーム処理を行うためのスクリプト「p5.js」を読み込んでます。
これは本来、アニメーションを組む際に利用するオープンソースライブラリです。これを読み込むことでfunction draw()
が使えるようになります。
そしてブロック内のwindow.open(url, "_blank")
であらかじめ設定していたURL(本コードでは自分自身)を呼び出して、新規ウィンドウとしてオープンしています。
最後のここで、ウィンドウクローズ時にポップアップを表示させるよう設定しています。
※e.returnValue = "また来てね^^";
でテキストを変更できるみたいですが2021年現在ではほとんどのブラウザで定型文が用意され、反映されないようになってるぽいです。
// Close字のメッセージ window.onbeforeunload = function(e) { e.returnValue = "また来てね^^"; }</code>
■ Step3 さっそく動かしてみる
さっそくブラウザで動かしてみました!…が、
ですよね~~~!!!!
流石ですchrome先輩!!!!!
我々がブラウザによって ”守られている存在” であることを再認識しつつ、
早々にブロックを解除します。
「完了」を押した途端、
うわぁ~~~~~~~~~!!!!!!!!!!
タブがものすごい勢いで錬成されていきます。
ちゃんとできてるみたいで安心です(最終的に重すぎてブラウザが落ちました)
しかし、このままでは真ん中のクリックボタンの存在意義がないので役割を持たせてあげようと思います。
できました、結構変わってます!
<script> var dialog_list = ["ようこそ!", "これはブラウザクラッシャーです!","その後省略"]; function introduce(){ for(i=0; i<10; i++){ alert(dialog_list[i]); } } const url = "https://castoroides.github.io/burakura/3_burakura2021.html" function buttonClick(){ document.getElementById("change_txt").innerText = "頑張って閉じてね!!!!!"; while(true){ window.open(url, "_blank")//無限タブ増殖 // 0.2秒待機 var startDate = new Date(); while (new Date() - startDate < 200); } } // Close字のメッセージ window.onbeforeunload = function(e) { e.returnValue = "また来てね^^"; } </script>
さっきのは開いた直後に無限フレーム処理をさせてましたが、ボタンクリックで無限ループに入るように変更しました。
あと、最悪の事態を回避できるようブロック内で0.2秒待機するようにしてます。
(待機なしで処理させた際、テストランでPCがなかなかしんどそうだったので…)
// 0.2秒待機 var startDate = new Date(); while (new Date() - startDate < 200);
new Date
で最新の時間が取得できるので、保存しといた時間と照合することで待機させています。
また、雑魚いブラクラの製作者のもとに警察からTELが来る事案もあるそうですので、説明ボタンを追加しています。
https://castoroides.github.io/burakura/3_burakura2021.html
動かしてみたらこんな感じ!
youtu.be