CSRF対策の話

先週のバイトで学んだことで書き忘れがあったのでメモ。

【やったこと】

ドットインストールを参考にしながら、お問い合わせフォームにCSRF対策を施しました。

#06 CSRF対策を施そう | お問合せ管理システムを作ろう - プログラミングならドットインストール

動画を見ながら思った事。

そもそもCSRFって何だ？

初耳だし何度読んでも覚えられないので、しっかりと調べて記憶を定着させる事にします！

【調べた事】

CSRFとは

リクエスト強要(Cross-Site Request Forgery)の略称で、特定の情報を特定のページにユーザーの意図とは無関係に送信させる攻撃のこと。情報漏洩やユーザーの意図しない操作が起こるなどの問題が起きる。Webアプリが以下の仕組みで動作している場合、

　・Cookieでセッション管理を行っている

　・HTTPの基本認証、SSLクライアント証明書を利用している

ユーザーからのリクエストを本人のリクエストだと判別する仕組みを持っていないとCSRF脆弱性になる。

Cookieとは

Webサイトの提供者が、Webブラウザを通じて訪問者のコンピュータに一時的にデータを書き込んで保存させる仕組みのこと。CookieにはWebサイト(Webサーバ)側が指定したデータを保存しておくことができ、利用者の識別や属性に関する情報や、最後にサイトを訪れた日時などを記憶しておくことが多い。

CSRF攻撃具体例

ユーザーがWebアプリケーションにログインすると、CookieにセッションIDが保存される。ブラウザを閉じずその状態のまま他のサイトに移動しても、CookieにセッションIDは残ったままになっている。このとき、ユーザーが罠サイトにアクセスして、WebアプリケーションにPOSTリクエストを送信するリンクをクリックする、またはスクリプトが実行されると、ブラウザはCookieのセッションIDとパラメータをWebアプリケーションに送信してしまう。つまり、Webアプリケーションから見ると、CookieにセッションIDが入っているため、正規のユーザーが正当なリクエストを送信して来たと判断してしまうことが、この攻撃のやっかいなところである。

CSRF対策

ワンタイムトークンについて、yahoo知恵袋でとても分かりやすい質問をしている質問者様がいたのでリンク貼っておきます。

PHPでのCSRF対策をしたいと思い調べているのですが... - Yahoo!知恵袋

超分かりやすい。

今回CSRF対策を実装してみて、サイバー攻撃の怖さを痛感しました。

小学生の感想文並みの感想ですが、何が怖いって、対策するべき敵を知らない私自身です。ドットインストールさんのレッスンに、CSRF対策の項目が入ってなかったら、私はCSRFのことなんて考えずにHP作成を終えていたと思います。

プログラミングの勉強も大切ですが、webについての知識も身につけて行きたいと思いました。

ラスボス・文字化けオバケを魔法の呪文で倒した話

今週ようやく会社HP作成が完了しました(*°ω°*)

最後の最後にとんでもないラスボスが現れて、てんてこ舞いに...笑

未来の自分のために、ラスボスとの戦いのここに記録をしておきます。

【問題】

・お問い合わせフォームから送ったデータが、MySQL上で文字化け(åがたくさん出てくる)してしまう。

なお、お問い合わせフォームを作り方はドットインストールさんを参考にしました。

お問合せ管理システムを作ろう (全21回) - プログラミングならドットインストール

【てこづったこと】

・なにも考えずググッて出てきたものを手当たり次第試したことが失敗でした。肝心な目線が抜けていたのです。それは、今使っているphpやMySQLのヴァージョンはいくつなのか？という視点です。会社サーバー内のphpが結構古いヴァージョンだったので、そこが盲点でした。どうやらphpは5.3.6を境に仕様がガラリと変わったみたいですね。

PHP 5.3.6より前のバージョンの PDO MySQL で charset を指定する - Qiita

php 5.3.3とにらめっこしていた私は、見事文字化けオバケの餌食になりました...とほほ。これからはちゃんとヴァージョン確認してググりたいと思います。

【魔法の呪文】

ラスボス退治に使った魔法の呪文はこちらに書いてありました。

MySQLで文字化けしたときの対処法 - Qiita

skip-character-set-client-handshake

"クライアントがどういう形で要求してこようがUTF-8で返答する"

問答無用で叩き切る感じがすごいコマンドですね。こちらを追記したら無事MySQLが日本語になりました。

【具体的に書いたコード】

(注1: php 5.3.3, MySQL 5.1.73を使っています)

(注2: ドットインストールに則ってファイルを作っています)

function.php

<?php

     function connectDb( ) {

       try {

           array(PDO::MYSQL_ATTR_READ_DEFAULT_FILE => '/etc/my.cnf',

                    PDO::MYSQL_ATTR_READ_DEFAULT_GROUP => 'php',

                    );

           return new PDO(DSN, DB_USER, DB_PASSWORD);

        } catch (PDOException $e) {

        echo $e->getMessage();

        exit;

       }

    }

  (以下の関数は省略)

?>

PDOについてはこちらに書いてあります。

PHP: MySQL (PDO) - Manual

/etc/my.cnfのphpグループを読み込めという命令を、ドットインストールで書かれているプログラムに追加しました。

そして、my.cnfファイルを以下のように書きました。

/etc/my.cnf

[mysqld]

character-set-server = utf8

skip-character-set-client-handshake

を、「symbolic-links=0」の下に追記

[php]

default-character-set = utf8

connect-timeout = 1

の項目を最後に追加。

こうしたら日本語でMySQLにデータが入るようになりました。

大好きな漫画でテスト投稿してみました。

解決してとても嬉しかったです。

引き続きプログラミングの勉強頑張ります(｀・ω・)

ゼロから会社のHP作成してみて学んだこと

会社のHP作成をテンプレート等抜きでゼロから自分で作ってみて、

ドットインストールやProgateやTechAcademyだけでは学びきれなかったことを学びました。未来の自分のために覚書きしておきます。

・cssリセットを忘れずに行うこと。怠ると、違うブラウザやデバイスで見た時に、思わぬところに色がついちゃったりする。

貼り付けておきます: CSS Reset - YUI Library

・ヘッダーやフッターなど、どのページでも共通の部分は、事細かにidをつけて定義した方が良い。

(なぜそう思ったか) フッターに<table></table>で情報を書いていて、とあるページで、メインの中にも<table></table>を用いた時、フッターの微調整をするつもりでtableのcssを弄ったら、メインのtableの書式も変わってしまったから。出来る限り細かくidで指定しようと思いました。tableだけに留まらず、<p></p>なんかも、メインとは違うフォントサイズになることが多いので、idつけようっと。

・レスポンシブデザインにするべし

(なぜそう思ったか) レスポンシブデザインの真価は、どんなデバイスでも見栄えが良いということではなく、実装側の工数を最小限に抑えることにあるのだと今回身を持って体感しました。スマホサイトを別途作るということは、別のサイトをもう一個作ることと同じなのです...！作るのはそこまで大変じゃないのですが、実装後(リリース後)死ぬほど大変なんですよ。

例えば、「役員の写真を差し替えといて―」という状況になったときに、imgフォルダを2ついじらないといけなくなる。つまり、

/var/www/pc/img

/var/www/pc/sp/img (sp...スマホサイト用のディレクトリの意)

の２つをいじるということです。

「いやいや、/var/www/pc/imgだけ設置しておいて、スマホサイト用のhtmlやcssの相対パスを弄ればいいんでないの」

というご意見もあるかと思います。私もそう思ってました。

しかし、.htaccessで「PC以外のデバイスでアクセスした時に自動的にspディレクトリへリダイレクトする」という設定を行ったところ、相対パスで指定した部分が読み込めなくなるという事態に陥りました。具体的には、サーバーに上げた会社HPディレクトリにvim .htaccessで.htaccessファイルを作って、

.htaccess

RewriteEngine on

RewriteCond %{REQUEST_URI} !/sp/

RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)

RewriteRule ^(.*)$ sp/$1 [R]

RewriteBase /

RewriteCond %{REQUEST_URI} /sp/

RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android|Windows\ Phone)

RewriteRule ^sp/(.*)$ $1 [R]

RewriteBase /

を作りました。

参考: htaccessによるデバイス振り分け - Qiita

これは私の推測ですが、

スマホ用HTMLさんとCSSさん「背景を取得しに、pcディレクトリ内のimgディレクトリ行って来まーす」

.htaccesさん「PC以外はspディレクトリに強制リダイレクトじゃ〜〜〜〜」

スマホ用HTMLさんとCSSさん「NOOOOOO !」

ということだと思います。つまり、PC以外はspディレクトリよりも上の階層のディレクトリへのアクセス権がないということです。

このめんどくささ、おわかりいただけたでしょうか。

次の仕事でHP作成するときはどのページも全部レスポンシブにします(´；ω；｀)

.htaccessと4時間くらい戦ったんですが、見事敗北しました。

どのページにも共通するようなファイルは一括で管理したいと思ったので、他の戦法を考えました。

そんな私の解決策は以下のとおりです。

(前提条件)

・会社HPのトップ、採用情報、企業情報はPC用とスマホ用の2種類のHTMLがある(例: index.htmlとindex-mob.html)

・その他のページはPC用とスマホ用で共通

(やりたいこと)

・トップ、採用情報、企業情報にアクセスしたときに、PC以外からのアクセスだったら、スマホ用のページに自動的に飛ばす

(やったこと) 

・PC用HTMLにJavaScriptで呪文を書いた。

index.html

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>株式会社XXXX</title>

<link rel="stylesheet" href="css/index.css">

<!-- リダイレクト -->

<script>

if ((navigator.userAgent.indexOf('iPhone') > 0 && 

navigator.userAgent.indexOf('iPad') == -1) ||

navigator.userAgent.indexOf('iPod') > 0 ||

navigator.userAgent.indexOf('Android') > 0) { location.href =

'http://XXX/index-mob.html'; }

</script>

<!-- jQuery読み込み -->

...

参考: リダイレクトだけじゃない！スマートフォンサイトを作ったら設定するべき3つのこと | Web制作会社スタイル

これで無事PC以外でのアクセスでは、スマホ用サイトへ自動的に飛ばすことができました。すごいよ、実装5秒で終わったよ。

JavaScript信者になりました。

勉強頑張ります！

nanoemで初音ミクちゃんを動かしてみたよ

MikuMikuDanceのwikipediaを読んでいたら...

MikuMikuDance - Wikipedia

MMDはニコニコ動画で大きな反響を呼び、ソフトウェアの完成度の高さに感動し、金を払って買いたいが作者が金銭を受け取る気が無いため買わせてくれないとして「振り込めない詐欺」とも評された[7][4]。樋口はこうした反響に対し「寄付してもいいと言ってもらえるのはたいへん光栄だが、それほど気に入っていただけたら、ぜひこのソフトを使ってすばらしい動画を作って公開してもらい、私をニコニコさせてほしい」とコメントしている[4]。

作者の樋口さんのコメントがあまりにもかっこよすぎで、これぞまさに理想のハッカーだと思い、プロダクトに触れたいと思ったのがきっかけでした。

しかし、残念ながらMMDはmacでは使えません。

諦めきれずググったらこんな記事を発見しました。

MacでもMMDが出来る！？その名も"nanoem"！！ - NAVER まとめ

早速DLページヘ...

こんな素晴らしいソフトウェアを作ってくださって、

しまぴょんさんありがとうございます(´；ω；｀)

nanoem-macOS-1.11.2.0-beta - BowlRoll

インストールを完了し、アプリを開くとこのような画面が出てきます。

日本語で非常にわかりやすいです。

メニューバーからファイル→読み込み→モデル

を選択し、モデルファイルを読みこめばOKです！

モデルファイルは簡単に言うと、

・動かしたいモデルさん

・モデルさんを動かせたいステージ

の２つを指します。

今回はこちらの２つを用いました。

動かしたいモデルさん: Tda式初音ミク・アペンドVer1.00 - BowlRoll

モデルさんを動かせたいステージ: 

【MMDステージ配布】静穏な月夜 WW2【スカイドーム】 / 怪獣対若大将P さんのイラスト - ニコニコ静画 (イラスト)

それぞれDLして解凍します。注意書きも熟読します。

ディレクトリの中にはたくさんのファイルがありますが、拡張子が.pmxのものを選択すればOKです。

そうすると、満月の夜空の下に美しいミクちゃんの姿が現れます！

マウスを適当に動かしたり、適当に色んな物をクリックして、画面に慣れてみてください。ミクちゃんが変になったら(あらぬ方向に曲がったりとか)、１回アプリを終了させて、もう一度読みこめば大丈夫です。私もよくわからず動かしてミクちゃんが曲がってしまい、何度も終了しました(笑)

そしていよいよ、ミクちゃんに好きなポーズになってもらいます。

実は踊らせることも可能です。

ポーズや踊りなどの"動き"のデータは、モデルのデータとはまた別の拡張子なんです。

最近HP作成ばっかりやってるからか、HPに似ているなぁと思いました。

HP作成でいうところの、HTMLファイル, CSSファイルで静的な実装を行い、JSファイルで動きをつける、そんな感じです。

というわけで、ポーズのファイルを読み込みましょう。

【ポーズ配布】いろいろなポーズ / lite さんのイラスト - ニコニコ静画 (イラスト)

今回はこれのB1を利用させて頂きました。.vpdという拡張子のファイルです。

先ほどのスクリーンショット画面左側にある、

▼モデル

　・Tda式ミク・アペンド

をクリックして下さい。

そうするとモーション選択ができるようになります。

モーション▶モーションの読み込み

をクリックして、先ほどの.vpdファイルを開きます。

そうすると、ミクちゃんがそのポーズになってくれます！このとき、このポースが確定されていないので、登録ボタンを押すのを忘れないようにして下さい。

そうしたらほぼほぼ完成です！！！！

あとは影を消したり、カメラワークを凝ったり、光源を調整すれば、こんな感じになります。

超楽しいです。

皆さんもぜひ遊んでみてください。

イルカちゃん(MySQL)を愛でるの巻

会社のHP作成もいよいよ終盤で、

お問い合わせフォームの実装までこぎつけました。

先週、お問い合わせフォームのHTML, CSSを書き終えてたので、

今度はお問い合わせ内容を保存するためのデータベースを扱います。

データベースといえばそうです、イルカちゃん(MySQL)です。

ということで、まずはこれで勉強しました。

dotinstall.com

今までMySQLの事がさっぱりわからなかったのですが、

入門に触れてみて、Terminal上で動かすエクセルだと感じました。

#02 データベース用語について | MySQL入門

これを見ていただくと、感じた理由がわかると思います。

今回の最終目的であるお問い合わせフォームの実装では、sshで会社HPのサーバーにTerminalからアクセスし、MySQLをサーバーにDLしてあげて、そこでデータベースを作っていけばいいということです。

社長に聞いたら、すでにMySQLはサーバーに入っているということなので、データベース作成から仕事を進められそうです(*^^*)

MySQLってなに、プログラミング言語？なんなの？

数日前までそんな感じでしたが、なんのことはない、

MySQLはコマンドラインで動かすエクセルみたいなものでした。

認識が変わると、怖くなくなりました(笑)

これからイルカちゃんを愛でて行きたいと思います。

さて、まだまだコマンドがうる覚えなので、こちらを貼っておきます。

Mysqlコマンド - Qiita

それから本題である、お問い合わせフォームの実装の仕方もドットインストールに載ってたので貼っておきます。

dotinstall.com

明日もバイト頑張ります！！！！

ちょっとした工夫が全てなんだろうな

どうもMiです。

今週もバイトで唸りながら会社HPリニューアルに勤しんでいます。

ヘッダー、フッダーなど、どのページに行っても同じ部分を微調整をしているときに、パーシャルで管理すればよかったぁああああああ！！！！と心底思いました。

開発の高速化を考えた時に、共通部分は全部同じファイルで管理するのが一番効率がいいということを身をもって体験できて良かったです。

実戦あるのみですね！たくさん失敗を重ねて次に活かします(｀・ω・)

それから、ヘッダーのcssをちょっくら改善しました(青い部分)。

header {
background-color: #f6f3f1;
opacity: 0.95;
box-shadow: 0 3px 5px rgba(148, 135, 115, 0.4);
height: 55px;
width: 100%;
position: fixed;
z-index: 1;
display: table;
font-size: 16px;
}

少し透過させて、下に薄っすらと影をいれたらググッと見栄えが良くなりました。

また、aタグのCSSには全て:hoverを入れました。装飾はなんでも良いのですが、やっぱりカーソルが載った瞬間に変化が起こらないとモヤモヤしますよね。実装したら一気にポチポチ押したくなるサイトになったので、これからも:hoverまで気をまわして実装したいと思います。

さらにお問い合わせフォームも作ったのですが、その際にとても有益な記事を見つけたのでシェアさせて頂きます。

websae.net

よく、性別や年齢を尋ねるお問い合わせフォームを見かけますが、あれ、本当に必要ですか？

このツッコミにグッと来ました。

本当にその機能は必要なのか？

議論に議論を重ねて、最低限必要な機能に注力する。

そういう議論が巻き起こる仕事がしたい＞＜超楽しそう！

というわけで、今日はちょっとした工夫が全てなんだということを学びました。

影をつけたり、透過させたり、:hoverで変化を起こしたり、「そもそもその機能要るのか？」とゼロベースで考え直したり...

良いデザインはちょっとした気遣いと気付きで生まれるものですね。

明日はMySQLと戦います(唐突)。ではでは。

三本線のアイツ

ハンバーガーナビゲーションの実装ができるようになったので、学びの整理。

(1) 概要

会社HPのスマホ用サイトを構築するべく、画面の隅っこに必ずいる三本線のアイツ、ハンバーガーナビゲーションの実装を行うことにしました！

(2) ハンバーガーナビゲーションアイコンをHTMLとCSSで自作する

まず最初に悩んだのが、ハンバーガーアイコンを画像として貼り付けるか、CSSを用いてアイコンを自作するかということ。ググってみると、CSSで自作すれば、ハンバーガーから×に変化させるアニメーションを実装できることがわかったので、自作することにしました。以下参考にさせて頂いたページです。

www.nxworld.net

こちらの1番を用いました。

余談ですが自作にあたって一番驚いたのが、ハンバーガーナビゲーション部分のHTMLファイルが

HTML

<a class="menu-trigger" href="#">

<span></span>

<span></span>

<span></span>

</a>

こんなに簡単な記述だということでした。spanの空タグとは予想外。 

(3) クリックするとハンバーガーが×になるアニメーションを実装する

続いて、アニメーションの実装を行いました。

CSS (一部のみ)

.menu-trigger.active-btn span:nth-of-type(1) {
-webkit-transform: translateY(15px) rotate(-45deg);
/*transform: translateY(20px) rotate(-45px);*/
}

JS

$(function( ){
   $('.menu-trigger').on('click', function( ) {
   $(this).toggleClass('active-btn');
return false;
});
});

起こしたい変化(今回はハンバーガーから×になること)にクラス名をつけて、それをjsファイルで「クリックしたらそのクラスが追加されるよ」と書けばいいだけなんですね...

HTMLファイルは全くいじらないということに驚きました。

(4) ハンバーガーをクリックしたら、メニューも出てくるようにしたい

続いて、ハンバーガーをクリックしたら、メニューも出てくるようにするために、メニューを実装しました。まずはそのビュー部分から。

HTML

<div id="menu-bar-item">
 <ul>
  <li><a href="#section1">ニュース</a></li>
  <li><a href="#section2">事業内容</a></li>
  <li><a href="#section3">実績紹介</a></li>
  <li><a href="#section4">VISION</a></li>
  <li><a href="#section5">CONTACT</a></li>
</ul>
</div>

CSS

#menu-bar-item {
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: right;
  margin-top: 0px;
  width: 360px;
  margin: 0 auto;
}

#menu-bar-item li {
  padding: 16px;
}

#menu-bar-item li:not(:last-child) {
  border-bottom: 1px solid white;
}

#menu-bar-item a {
  color: white;
}

#menu-bar-item a:hover {
  color: pink;
}

ポイントはモーダル実装でお馴染みの、初期値はdisplay: none;にすることです。

続いて、起こしたい変化にクラス名をつけてその中身を実装していきます。そのときに参考にさせて頂いたのかこちらの記事です。

qiita.com

これを元に書いたCSS、JSがこちら。

HTML

#menu-bar-item.active-btn {
  display: block;
  opacity: 1;
  animation-duration: 0.5s;
  animation-name: fade-in;
  -moz-animation-duration: 0.5s;
  -moz-animation-name: fade-in;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-name: fade-in;
}

@keyframes fade-in {
0% {
  display: none;
  opacity: 0;
}

20% {
  display: block;
  opacity: 0.5;
}

100% {
  display: block;
  opacity: 1;
}
}

@-moz-keyframes fade-in {
0% {
  display: none;
  opacity: 0;
}

20% {
  display: block;
  opacity: 0.5;
}

100% {
  display: block;
  opacity: 1;
}
}

@-webkit-keyframes fade-in {
0% {
  display: none;
  opacity: 0;
}

20% {
  display: block;
  opacity: 0.5;
}

100% {
  display: block;
  opacity: 1;
}
}

JS

$(function( ){
  $('.menu-trigger').on('click',
  function( ){
  $(this).toggleClass('active-btn');
  $('#menu-bar-item').toggleClass('active-btn');
return false;
});
});

今回の実装一番の学びが、クリック１つで２つのイベントを起こしたいときに、２つ連ねて書けばOKだということでした。

というわけで、無事、ハンバーガー完成です(｀・ω・)b