二番煎じ感ある偽警告サイト作成
二番煎じ感ある偽警告サイト作成:
よくある警告サイトを仕組みを知りたいと思い作成することにしました。
コードはhttps://github.com/aoharu514/fakepop-up に置いてあります。
HTML部分は、単純に警告文が表示するだけの構造です。特にこれと言った難しいことはしていません。
基本的なHTML5入門書レベルで書けると思います。CSSは、マテリアルデザインのを適用しています。
今回はJavaScriptライブラリのjQueryを使っています。
最初にポップアップのOKボタンを押したときに流れる音声ファイルを定義します。
で、関数を定義します。
ここで音声ファイル（警告音とメッセージ音）を参照する変数を決めます。そのあとにサウンドが流れることを意味する関数を書きます。
その後にスマートフォンなどでサウンドが再生されている間にバイブするようにします。
ここではブラウザバックを無効化して、もしブラウザバックが押されたら最初に書いたサウンドが流れるようにしています。
二行目は戻るボタンが参照するページ情報を定義する部分で、ここをすべてnullにすると参照するページ情報が失われ前のページに戻れなくなります。
三行目以降は戻るボタンをクリックしたときの動作についてです。ここでは、戻るボタンをクリックすると警告音が鳴るようにしています。
ここでが、スマートフォン等であればAndroid・iPhone・iPadかをそれ以外であれば端末と表示するようにしています。一行目でユーザーの端末がAndroid・iPhone・iPadを識別しています。
二行目以降では、PCとかの端末でAndroid・iPhone・iPadに当てはまらなかったときに表示する文字を指定しています。
ここでは、ポップアップの制御をしています。ここは、ポップアップが表示されたときにクローズが定義されたボタンを押さないとポップアップが閉じないようにと、ポップアップを閉じたときに警告音がなるようにしています。
ここでは、あと何秒です！という部分のカウントをする部分です。一行目で初期値、二行目以降でカウント制御します。ここでは時間はミリ秒なので注意。
大体の広告で表示される偽警告サイトはこんな感じの仕組みだと思います。このようなサイトに遭遇したらリンクはこちらとかのボタンをクリックせずにタブを閉じ、気になる人はセキュリティソフトでウイルスチェックすることがいいと思われます。誤ってリンクはこちらを押さないようにして偽警告サイトの被害に合わないようにして欲しいです。
あとこの偽警告サイトの技術を応用して本物の偽警告サイトを作らないでください。不正指令電磁的記録に関する罪で捕まりますので。この記事はあくまでも偽警告サイトの仕組みを知ることが目的ですので。
よくある警告サイトの仕組みが知りたい
よくある警告サイトを仕組みを知りたいと思い作成することにしました。コードはhttps://github.com/aoharu514/fakepop-up に置いてあります。
HTML部分
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>fakesite</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Refresh" content="110;URL=https://www.mcafee.com/ja-jp/index.html">
<meta name="description" content="よくある警告サイトを作ってみました。特に閲覧しても問題ないです。エンジニア向けに公開しているだけです。">
<!-- このソースコードは閲覧者のPCにウイルスなどの影響を与えないものです。
また、このソースコードとそのソースによるサイトは、ウィルスニセ警告サイトの注意喚起をするものです。
このHTMLファイルとJavaScriptファイルを読み込んでも影響はございません。
このコードを改変し、悪用した場合には不正指令電磁的記録に関する罪にて懲役の処分を受けることがあります。-->
<!-- 参考 https://github.com/yoidea/fake_warning -->
</head>
<body class="red darken-2 white-text">
<div class="container">
<!-- 不安を煽る文章 -->
<h1>⚠警告！</h1>
<h4>あなたの<span id="device"></span>からウイルスを検知しました！</h4>
<p class="flow-text">ウイルスを駆除しなければ、あなたのデータが盗まれる危険性があります。</p>
<p class="flow-text"><span id="timer" style="font-size: 2em"></span>秒以内に以下のリンクからウイルスを駆除してください！</p>
<!-- 飛ばしたいリンク。今回は正規のセキュリティソフト販売会社サイトにした。 -->
<a href="https://www.mcafee.com/ja-jp/index.html" class="btn btn-large">ウイルスを駆除する</a>
<div id="alert" class="modal">
<div class="modal-content black-text">
<h4>警告</h4>
<p>これはデモ画面です！あなたの端末からウイルスが検出されました。次のページからウイルスを駆除してください！これはデモ画面です！</p>
</div>
<div class="modal-footer">
<button id="close" class="btn">OK</button>
</div>
</div>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="fake.js"></script>
</body>
</html>
基本的なHTML5入門書レベルで書けると思います。CSSは、マテリアルデザインのを適用しています。
JavaScript部分
今回はJavaScriptライブラリのjQueryを使っています。
サウンド部分
function play_se(){
//音声ファイル https://on-jin.com/ On-Jin ～音人～
var waring = new Audio ('keikoku1.mp3');
var voice = new Audio ('voice.wav');
waring.play();
voice.play();
navigator.vibrate([200, 100, 200, 100, 200, 100, 200]);
}
function play_se(){
var waring = new Audio ('keikoku1.mp3');
var voice = new Audio ('voice.wav');
waring.play();
voice.play();
navigator.vibrate([200, 100, 200, 100, 200, 100, 200]); }
ブラウザバックを無効化
$(function(){
history.pushState(null, null, null);
$(window).on("popstate", function(e){
if (!e.originalEvent.state){
play_se();
history.pushState(null, null, null);
return;
}
});
二行目は戻るボタンが参照するページ情報を定義する部分で、ここをすべてnullにすると参照するページ情報が失われ前のページに戻れなくなります。
三行目以降は戻るボタンをクリックしたときの動作についてです。ここでは、戻るボタンをクリックすると警告音が鳴るようにしています。
デバイス名表示部分
var device = navigator.userAgent.match(/Android|iPhone|iPad/);
if (device == null){
device = 'デバイス';
}
$('#device').text(device);
二行目以降では、PCとかの端末でAndroid・iPhone・iPadに当てはまらなかったときに表示する文字を指定しています。
ポップアップ制御部分
$('.modal').modal({dismissible: false});
$('#alert').modal('open');
$('#close').click(function(){
$('#alert').modal('close');
play_se();
});
カウント部分
var time = 114;
setInterval(function(){
time--;
$('#timer').text(time);
}, 1000);
});
最後に
大体の広告で表示される偽警告サイトはこんな感じの仕組みだと思います。このようなサイトに遭遇したらリンクはこちらとかのボタンをクリックせずにタブを閉じ、気になる人はセキュリティソフトでウイルスチェックすることがいいと思われます。誤ってリンクはこちらを押さないようにして偽警告サイトの被害に合わないようにして欲しいです。あとこの偽警告サイトの技術を応用して本物の偽警告サイトを作らないでください。不正指令電磁的記録に関する罪で捕まりますので。この記事はあくまでも偽警告サイトの仕組みを知ることが目的ですので。
コメント
コメントを投稿