Umi Uyuraのブログ

プログラミング関連の作業ログ

アクセス元のIPアドレスをメールで通知してくれるサイトを作ってみた(Heroku Button対応)

Heroku Node.js

かれこれ2週間前くらいのことですが、会社の先輩のところに某メッセンジャーサービスのアカウント乗っ取り詐欺のメッセージが来ました。

魔法の言葉を返そうとか、アクセス元調べようとか話してたんですが、初めて目にした実際の詐欺メッセージを前にわたわたしているうちに、音沙汰がなくなってしまいました。

特に面白いこともできず、残念。

まあそれとは関係ないですが、ふと「アクセスされたらアクセス元のIPアドレスをメールで通知してくれるサイト」のテンプレートなどあると何かに使えるかも、と思い週末作ってみたので、せっかくなので記録しておきます。

どのような用途があるかわかりませんが、例えば、ネット上で誰ともつかないけど友達を装っているっぽい人から、プリペイドカードを買って写真を送るという簡単なお仕事をお願いされることがあったとして、「オンラインストレージにアップしたから」とか何とか言いつつこのサイトのURLを教えてみると、相手がうっかりアクセスしてくれれば、とりあえず相手がアクセスしてきているIPアドレスを入手したりすることができるかもしれません。

もっとも、いろんな踏み台を経由している可能性はあるので、本当のアクセス元のIPアドレスかどうかはわかりませんが、まあ何もしないよりは、という感じで。

Herokuで動かす想定で、最近話題のHeroku Buttomも付けておいたので、いざというときにはHeroku Button押してチョチョッと設定すれば、3分くらいで設置できます。

前提条件

使うためには、以下の条件があります。

  • Herokuアカウントを持っている
  • Herokuアカウントにクレジットカードが登録されている（アドオンを使うので）

使い方

GitHubリポジトリのHeroku Buttonを押す

umi-uyura/ip-gather

このボタンです。

f:id:umi-uyura:20140910232845p:plain

アプリ名と環境変数を設定

Herokuにログインしていなかった場合は認証画面が出てくるので、まずはログインしてください。

ログインしていると、自分のHerokuアカウントで立ち上げるアプリに関する情報を設定する画面が表示されます。

f:id:umi-uyura:20140910232914p:plain

f:id:umi-uyura:20140910232927p:plain

以下の設定をおこなうことで、メールで通知する以外にも、Google Analyticsを忍ばせてみたり、BASIC認証をつけてそれっぽく？見せることもできます。

メール通知用の設定

サイトにアクセスがあったときにメールで通知をしたい場合は、この部分を設定します。

環境変数 目的
NOTIFY_EMAIL_TO 通知先メールアドレス。
この値が設定されている場合、メール通知機能が有効になります
NOTIFY_EMAIL_FROM 送信メールのFROM
NOTIFY_EMAIL_SUBJECT 送信メールの件名

BASIC認証をつける

BASIC認証をつけたい場合は、以下の環境変数を設定します。

環境変数 目的
BASIC_AUTH_USER BASIC認証時のユーザー名
この値が設定されていると、BASIC認証が有効になります
BASIC_AUTH_PASS BASIC認証時のパスワード

Google Analyticsを設置する

Google Analyticsによるアクセス解析を埋め込みたい場合は、以下の環境変数を設定します。

環境変数 目的
GOOGLEANALYTICS_TRACKINGID Google AnalyticsのトラッキングID
この値が設定されていると、Google Analytics機能が有効になります

デプロイ実行

必要な設定が済んだら、「Deploy for Free」ボタンを押します。

f:id:umi-uyura:20140910232959p:plain

すると、自動的にアプリの作成や環境変数の設定などの処理が走り、最終的にアプリがHerokuへDeployされます。

f:id:umi-uyura:20140910233014p:plain

Deployed to Herokuまで到達したら、その下のView itのリンクをクリックすると、デプロイされたサイトへアクセスできます。

どうなるか

サイト自体は、アクセスすると単純にアクセス元のIPアドレスを表示するだけです。

せっかくStylusを有効にしていますが、センスがないのでデザイン的なところはデフォルトのままいじってません。

f:id:umi-uyura:20140910233135p:plain

メール通知の設定が行われていれば、送信先のアドレスにこんな感じの通知メールが飛びます。

f:id:umi-uyura:20140910233146p:plain

※IPアドレスなど一部情報はマスクさせて頂いております。

ざっくりとした作り方

何となくメジャーバージョンが4になったExpressフレームワークを触ってみたかったので、それをベースにしています。

つい最近4.x系になったと思っていたのですが、すでに最新版は4.8まで進んでいるですね。

（と思ったら、ブログだらだら書いている間に4.9が出てた）

express-generatorをインストール

Express - guide内のUsing express(1) to generate an appを参考に。

プロジェクトのテンプレートを生成してくれるexpressコマンドは、4.xからexpress-generatorで提供されるように変わったということで、まずはそれをインストール。

$ npm install -g express-generator

プロジェクトの生成

普段使うことが多いstylusを有効にしておきたかったので、--css stylusオプションを付けてプロジェクトを生成。

$ express --css stylus ip-gather

生成されたpackage.jsonを見たら、express本体をはじめ各種モジュールのバージョンが少し古かったので、最新のバージョンを反映。

その際、npm-check-updates: package.json 内の npm version を一括で最新に書き換える | deadwoodで、npm outdated以外にnpm-check-updatesという便利なツールがあることを知り、これを活用しました。

SendGridモジュールを導入

$ npm install sendgrid --save

Node.jsからの呼び出し方は、Herokuのドキュメントを参照、というかコピペでOK。

SendGrid | Heroku Dev Center

以下省略

メール送信ができれば、あとはリクエストヘッダからIPアドレスやUser-Agent取得したり、Google Analyticsのコードをviewに追加したりと大したことはしていないので省略。

サンプル

いちおうサンプルとしてここで動かしていますが、サイト自体にあまり意味はないので、試してみたい方はHeroku Buttonから複製してもらって、遊んでいただくのが良いかと思います。

BASIC認証が有効になっているので、ID: user1 / PW: pass2 で通れます。

IPアドレスを収集されても良い方はアクセスしてみてください。

私のところにメールが飛んできます。

まとめ

今回はじめてSendGridを使ってみましたが、メールサーバーのことを気にせずメールを送ることができて、非常に簡単でした。

とは言え、「メールを送る」というのはあくまで基本機能の一つに過ぎず、他にも色々とできるみたいなので、次はもっと有益なことに使うようにしたいと思います。

あー、私のところにLINE乗っ取り詐欺犯からメッセージとか来たら、このサイト使ってみられるのになー。