Rails5のapplication_contorollerに書いてあるprotect_from_forgery with: :exceptionとはなんぞや
rails触り始めてまだ2ヶ月も経ってない、ペーペーです
だいたいMVCの流れとかわかって来て、簡単なエラー解決くらいはできるようになったんだけども、大切なところからは未だに目を背けがちなので、、、、、
深堀ってみるのもありかなと思いまして、
ブログ再開と致します*ˊᵕˋ*
今日はこれ
application_contoroller内に書いてある
protect_from_forgery with: :exception
こいつはなんぞや
ということについて調べていきます
これを結論から言うと、
railsのセキュリティ対策に必要な一文
くらいの感じなんですけど、違うかな
protect_form_forgreyについて調べてみた
protect_from_forgery with: :exception
これはRailsが生成するすべてのフォームや
もしセキュリティトークンが想定されている値と一致しなければエラー吐きます
↓これがapplication_controllerの中身ね
----------------------------------------------------------------------------------------------
class ApplicationController < ActionController::Base
# Prevent CSRF attacks by raising an exception.
# For APIs, you may want to use :null_session instead.
protect_from_forgery with: :exception
end
------------------------------------------------------------------------------------------------
↑この赤い部分について調べてみたよ
・protect_from_forgery メソッドがコントローラーに記述されていると、
CSRF対策が有効になるらしい
つまるところの不正な行為のこと(アクセス回数稼ぎとか)
この攻撃は被害者が対象のアプリケーションで認証済みになっている時
ログインしたのに他のタブ開いてログインし直すとか、そういうちょっとした不正行為ね
こう言う時に役に立つそうな。
controllerでprotect_from_forgeryを呼び出すと
↓
verify_authenticity_token メソッド
verify_same_origin_request メソッド
これらが呼び出され、フィルターがかかる
(全て該当コントローラにて展開)
---------------------------------------------------------------------------------------------------
■verify_authenticity_token メソッド
このメソッドが呼ばれると
↓
内部でverified_request?メソッドを呼び出しリクエストが正当かどうかの判断を行う
---------------------------------------------------------------------------------------------------
[検証内容]
①設定ファイルで config.application_controller.allow_forgery_protectionをfalseに設定しているか
(config.action_controller.allow_forgery_protection は、CSRF保護をオンにするかどうかを指定する。testモードではデフォルトで false、それ以外では true に設定)
②リクエストのHTTPメソッドはGET,HEADであるか
トークンチェックを行わない理由 →GET, HEAD, OPTIONS, TRACE
これらがチェック対象外となっている理由は、アプリケーションの状態を変更するようなリクエストを実行するためのメソッドではないため)
(params[:authenticity_token]またはrequest.headers['X-CSRF-Token’]が
---------------------------------------------------------------------------------------------------
リクエストが正常に終了→処理は完了して通常フローへ
エラー→リクエストからセッション情報をリセット
他の方のブログやコードリーディング等々参考にさせていただきつつ、、、
railsを書くようになりました。
お久しぶりです。
最後の更新から2ヶ月も経っていた(震)
今日から！ちゃんと！知識のアウトプットを！！！します！！！
いろいろあって昨年12月からrailsを勉強しているわけなんですけども、
やはりインプットだけでは完璧に理解はできませんね！！
と、いうことで
1日1つくらいのペースで適当にノートを作る感覚で
書いていこうかなと。
せっかくなので誰かの参考になればいいなと！
頑張る*ˊᵕˋ*
お久しぶりです。
お久しぶりです。最終更新からどれだけたつかしら！
報告も何もしてなかったのでただのサボりみたいになっちゃったと思いませんか、んふふ
じつは2017/12/1から、無事に社会人になってます
本当はwebデザイナー目指してたんだけど、今はいろいろあってrailsを勉強している感じになってます
できれば、できればまだweb業界に戻りたい気持ちはある
ひとまずしばらくは頑張ってみるんだけど......
これからはぼちぼち、webアプリの開発のことを書いていこうかなと思ってます
IT業界に入りたいと思ってこのブログはじめて、
未経験からでも絶対にエンジニア目指す〜とか言いながら、
なんだかんだで無事に就職できましたっていう、目標は達成できたかもしれないことを報告致します。
またいつか更新します〜〜〜
PHP構築実習②-基本的な要素
PHPの基本的な書き方。HTMLに実装します。
PHPタグを使う
HTMLでは、
<?php (命令) ?>
この形でPHPの記述がなされます。
これをPHPタグといいます。
実際に画面に表示する時には、Apache経由でPHP言語をHTML言語に変換する必要があることが分かりましたので、HTMLとPHPの記述に関してはあまり難しくないかも知れません。
では、要素のいっちゃん簡単なヤツをいくつか説明します。
1.文字列
PHPの世界では、文字列を表現するために、
” ” もしくは ’ ’
を使います。
このダブル/シングルクォーテーションで囲むことで、PHP言語に文字を認識させることができます。
2.エコー命令
Cでいうとprintf的なヤツです。出力命令。
<?php
echo "hello,PHP!";
?>
このように使います。
hello,PHP!
これが出力結果になります。
文法ルールは、
○命令の右側にある文字列のみが出力の対象
○複数の文字列は渡すことができない
○ドットをはさむとその両端の文字列をくっつけられるので、出力可能
3.セミコロン
；←こいつです。
プログラミングでは、だいたい文末にセミコロン必須ですね。
例外なしに、PHPも必須です。
これが抜けていることによるエラーは頻発しますし、ケアレスミスなだけに、結構へこみます。
これを踏まえたうえで、
「こんにちはPHP」と出力するプログラムを書いてみます。
無事にHTMLで出力されました。
コメントアウトについては、
HTMLでは<!--コメントアウト-->
ですが、
PHPタグ内では、プログラミング同様、
//行コメントアウト
で行います。
複数行の場合は、
/*複数行コメントアウト*/
PHP構築実習①-PHPとHTML
本日よりPHP構築実習。まずは概要から。
ほんっとうに内容はことごとくシンプルでそして簡単！！！でもプログラミングが苦手な人にはまぁまぁ好かん内容にはなっています。
と思います。
まずは概要云々から。
プログラムとは
式次第、手順書のこと。
プログラム言語とは
指示書「プログラム」を書くときのルール（文法）を決めたもの。
プログラム言語には、文法の違いにより色々な種類がある。
PHPの概要
PHPは開発開始から2年ほどで開発された、世界初のweb用言語。
初心者に優しく、かつパワフルな言語です。Web業界では非常に人気だそう。
まだまだ活発に発展中の22歳。（1995年生まれ）
Facebook、Wikipedia、Wordpressなど、PHPの実績は非常に豊富です。
JavascriptとPHPの違い
コンピュータに動作を指示するという点ではJSもPHPも変わりませんが、
JSはフロントエンド、
PHPはバックエンドで動作します。
活動する場所が違うため、それぞれ学んでおく必要があります。
フロントエンドとバックエンドの違い
フロントエンドとは
ブラウザ側で動くプログラムのこと。
ユーザに直接反応するため、フロントエンド（手前）という。
現在では、Javascriptのみとなっている。
リアルタイムでの処理が得意だが、ブラウザに依存していないと使用できない。
フロントエンドでしかできないこととして、
* リアルタイム処理（アニメーション)
* インタラクティブ（クリックしたらアニメーションする）
等があります。
バックエンドとは
サーバ側で動くプログラムのこと。
PHPのほかに、Java言語などもそれに当たる。
情報の処理や保存、検索など、PCの能力をフルに活かすことができる。
バックエンドでしかできないこととして、
* 情報の保管(データベース)
* メールの送信
* インターネット上での情報公開
* 会員サービス提供
等があります。
HTML/CSS の加工や、他のサーバーとの連携は、どちらでもできます。
PHPを簡単に動かしてみる
今回私はxamppを使います。xamppをインストールしたときに一緒にPHPもついてきているので。
PHP言語の拡張子は.phpです。テキストエディタで以下の内容を作成し、実行してみました。
まずはxamppのApacheを起動します。ApacheとPHPが連携していないと、バックエンドでの処理が不可能になり、.phpファイルは開けません。
そしてそのXAMPPのフォルダを探し、その中のhtdocsにドキュメントルートフォルダを作成しましょう。今回のPHP構築の基盤になります。
たとえばhtdocsの中にworkというフォルダをつくり、hello.phpというファイルを作成したとしましょう。
その後で
http://localhost/work/hello.php
にアクセスして下さい。PHP が実行され、その結果がHTML として表示されます。
つまり、CP内部→xampp→htdocsまでが、「localhost」という扱いになるのです。
では、以下のプログラムを書いてみましょう。以下からは、PHPのメカニズムの解説です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PHPtest</title>
</head>
<body>
<p><?php echo "Hello,PHP!";?></p>
</body>
</html>
<?php
echo "Hello,PHP!";
?>
この部分がPHPの記述です。
実行結果は以下。
しかし実行ソースを見てみると
ただのHTML言語になっています。
PHPは実行するとき、ただのHTMLを実行するのと同じ扱いになります。
もともとあった<?php echo "hello PHP!"; ?> の部分が hello PHP! だけになっています。
この置き換えこそPHP のプログラムが実現しているということです。
先ほど説明した、「ApacheとPHPが連携していないと、.phpファイルは開けない」という話ですが、
たとえ話をすると、Apacheは受付のお姉さんで、PHP言語を専門家とし、ブラウザがお客さん。
ブラウザは開いてほしいファイルを受付に持っていきます。ここではPHP。
でも、受付のお姉さんはフロントエンドなので、JsもしくはHTMLのみしか知らない。なので、お姉さん一人の力だと、PHPファイルは開いてもらえません。
ここで登場するのがバックエンドの専門家、つまりはPHP言語。この専門家が.phpを解析し、HTMLファイルに変換、その結果、受付のお姉さんが案内できる形になり、お客さんであるブラウザで表示できます。
受付のお姉さんがApache、専門家がPHP言語なので、ここの連携がないと開けないというはこういうことらしいです。
（要するに、ApacheがあればHTMLの形で帰ってくるので、必須ということだけは今理解できた）
PHP はHTML を作る道具
PHP はWeb サーバー上で動作します。
Web サーバーの目的は、利用者にHTML をサービスすることです。
そこでPHP もHTML を作り出す道具として働きます。
動く場所は違えど、JavaScript も同様の位置づけでした
HTML を作る道具という意味では、PHP は特殊なテキストエディタのようなものです。
テキストエディタと同様、PHP には文字を扱う機能がいろいろあります。
PHP のプログラムのソースは、PHP 言語の世界の中で解釈されます。
次回からは、PHP言語の要素やタグについて、書いていこうと思います。
ここで書いていく内容はめっさ簡単。
ついでに言うことではないかも知れませんが、内定貰いました。やったー。
Wordpress⑥-本番サーバーへアップロードする
ここまで作成してきましたが、
実はインポートとエクスポートで移設しても、
テーマやカスタマイズは反映されません。
Wordpressのメインは「記事」ですので、
まじで「記事」の部分しか移行してくれない。
固定ページとか投稿とかしか移行してくれない。ふつうにバグかと思ったけど、世の中そんなに甘くないことを実感。
- 本番サーバーにBlog を移設しよう
- (1)FTP を使って本番サーバーにアップロード
- (3)サーバー上でWordPress のインストール
- (4)元Blog からエクスポート
- (5)加工
- (6) 本番サーバーのダッシュボードからデータベースのデータをインポート
- (7)インポート後のゴミ片付け
- インストールで問題が発生したら？
本番サーバーにBlog を移設しよう
localhost で完成させたBlog を本番サーバーに移築します。
WordPress の情報は
フォルダ、
wp-config.phpファイル、
データベースのテーブル
以上の３つに分散されており、この３つ全ての面倒を見てあげることがWordPress の移設作業となります。
手順
1. フォルダのコピー
2. 本番サーバー上でのWordPress のインストール
(インストールすることによってwp-config.php が作成されます)
3. データベース内情報(テーブルの中身) もコピーする必要がある
エクスポート(輸出)・インポート(輸入) 機能によって行う
この３つを７ステップの手順で順序よく行っていきます。
(1)WordPress 本体と記事の画像素材等のファイル一式のコピー
(2)サーバー上のWordPress に対して、書き込み権限を与える
(3)データベースとBlog の基本情報を設定する
(4)(5)(6) Blog の記事情報を移設する
(7) 不要なデータをダッシュボードから削除する
移設していきましょう。
(1)FTP を使って本番サーバーにアップロード
まずはレンタルサーバーを借りてください。あとwinSCPも落としてください。めんどくさくてだんだん投げやりになってきました。
winSCPを使用しますが、他のはよく分かりません。すいません。でもたぶんやることやれば他のでもできます。他のでもできそうな感じで書いていきますので見てみてね。
他の方の記事ですので掲載はできませんが、
winSCPで検索するとかなり詳しく手順を書いてくださっている方がいらっしゃいますので、そちらを参考に落としていただけるといいかと。
winSCPを持っていて、レンタルサーバーも借りてて、かつ使い方がなんとなく分かる前提で進めますね！！！めんどくさがりでごめんね！！！
はい、では手順に移ります。
サーバー側
[右クリック] - [新しいディレクトリ] - [ディレクトリ]
ワードプレスのフォルダを新しく作成します。フォルダ名がurlの一部になるので、面倒なのはやめたほうがいいよ。
（ここではwpというフォルダにしますので、wpと記載します）
wp フォルダの中にlocalhost の、
ワードプレスの解凍後に作った(WPの任意の名前)フォルダをまるごとコピー
この(WPの任意の名前)フォルダは、序盤でxamppの中のhtdocsにぶち込んだアレです。コピぺで結構。
そして今回は、winSCPで設定したはずのホスト名がそのままドメイン的なアレになるので、きちんと覚えといてくださいね。
本番サーバーのドキュメントルートについて
XAMPP でのドキュメントルートはC:\xampp(XAMPPの任意のフォルダ名)\htdocs に設定されていました。
本番サーバーでは、それぞれが独自のドキュメントルートもつように設定されています。
この段階でまずは、本番サーバーにおけるディレクトリ構造を確認しておきましょう。
できれば、URLを自分で組み立てられるようになっていてほしい。
(2)ファイル・フォルダへの書き込み権限を与える
WordPress のプログラムが自由にファイルへの書き込みができるように(WPの任意の名前)フォルダ全体に許可を与えましょう。
winSCPの場合、(WPの任意の名前)フォルダを右クリックし、
プロパティを設定する
W の列に全てチェックを付け、
同じパーミッション/グループ/所有者を再帰的に設定にもチェックを入れましょう。
この、同じパーミッション/グループ/所有者を再帰的に設定とは、
このフォルダ以下の全フォルダ・全ファイルに同じ設定を適用する
という意味です。
(3)サーバー上でWordPress のインストール
※注意
インストールの前に、サーバー上のwp-config.php ファイルを削除しておいてください。
wp/lesson1/wp-config.php
このファイルがあるとインストール済みとみなされ、インストーラーが起動しないためです
そんでもって、本番サーバからwordpressをインストールし、
投稿と固定ページ以外をカスタマイズします。
(4)元Blog からエクスポート
http://localhost/(WPの任意のフォルダ名)/wp-admin/
ここにアクセス
[ダッシュボード] - [ツール] - [エクスポート]
すべてのコンテンツを選択して[エクスポートファイルをダウンロード]
.xml ファイルが手に入るので、テキストエディタで開きます。
(5)加工
URL の書き換えが必要です。
なぜなら、localhost は常に自分のPC を指すため、インターネット上では無効であるからです。
localhostの部分を、自分のドメインに書き換えましょう。
テキストエディタの置換ツールを使って作業を行うと楽。
箇所も多いので、一発で置換できます。
(6) 本番サーバーのダッシュボードからデータベースのデータをインポート
[ダッシュボード] - [ツール] - [インポート]
インポート元のシステムとして、 WordPress のところにある
[今すぐインストール] をクリック
サーバーのID/パスワードを聞かれる画面になるので、
自分が使っているサーバーのデータを入力しましょう。
[開始]
↓
「インポーターの実行」を選択
WordPress のインポート
WordPress eXtended RSS (WXR) ファイルをアップロードすることでインポートできます。
投稿、コメント、カスタムフィールド、カテゴリー、タグあたりしかできないと思います。テーマとかカスタマイズはたぶん対象外。
[選択...] から、エクスポートした.xml ファイルを指定、
[ファイルをアップロードしてインポート]
WordPress のインポートの画面はいじらなくても問題なさそう。てか私は触ってない。
[Submit]で送信
(7)インポート後のゴミ片付け
WordPress インストール時に自動的にできるサンプル記事を削除するなり編集するなり煮るなり焼くなりコロ助ナリ
画像が見えない人は、.xml ファイルの置換ミスが考えられます
残念ながら再インポート作業は行えないので、
その際はそれぞれの記事のソースを一つづつ修正する必要がありますがクソめんどい。
インストールで問題が発生したら？
以前と同じテーブル接頭辞を指定した場合
次のエラー画面になります。
// すでにインストールされています
すでに WordPress をインストール済みのようです。再インストールするには、
まず以前のデータベーステーブルを削除してください。
[ログイン] //
再度最初からインストールをしなおしましょう
再度インストールするには
1. フォルダの中にある wp-config.php を削除してください。
このファイルはインストール後に自動生成されるものなので、
これを削除することで「インストール前」の状況に
戻すことができます。
2. WordPress のURL にアクセスすると、
http://localhost/lesson2/
インストール画面が表示されます。
インストール手続きを進めて下さい。
3. テーブル接頭辞は以前のものは「使用済み」になるので、
末尾を変更するなどして、別のものを指定してください。
Wordpress、おつかれさまでした。
Wordpress⑤-セットアップ～簡単なブログの構築
さくさく進めていきましょう。まじ先生のノート神。
ブログの構築については、本当に分からない人や、どうしたらいいのか分からない場合に参考にしてくださいね。でもたぶん、ここにくるってことは実際に目的を持ってWordpressを構築したい人が多いでしょうから、構築の内容についてはスルーしてもらって全然よかです。もしくは、初心者さん向けです。
WordPress のセットアップ(初期設定)
WordPress の管理画面(ダッシュボード) にアクセスする
http://localhost/(WPの任意のフォルダ名)/wp-admin/
ここは、
必ずブックマークしておくこと。なぜか入れなくなって泣くことがあります。
拡張機能として、
[ダッシュボード] ⇒[プラグイン]
"WP Multibyte Patch" を有効化
これによって日本語の扱いの不具合が無くなるので必ず有効化しておく
ダッシュボードは簡単な機能がいくつもいくつもあります。
いきなり全体図を作ろうとしてもまぁ無理な話なので、
最初から全部を相手にしようとせず、少ししか使わないつもりでまずは構築していきましょう。ゆっくり、こつこつと。
それでも十分にBlog を作ることができます。
簡単なBlog を作る
WordPress の全体像はとてもボリュームがあります。
流れのために、今回はWordpressの細かい機能は省略します。
なぜなら、そんなに難しくはないし、むしろ非常に簡単だからです。
勉強する時のコツは、"なるべく小さなシステム" と見ようとすること。
そのようにすれば、使っていくうちにわかってきますし、慣れも早いものです。
WordPress が扱うのは「記事」です。
実際には「記事」が「投稿」と「固定ページ」の二種類に分けられています。
「投稿」は日記のように時系列で一覧表示される扱いになります。
「固定ページ」はグローバルナビゲーション上に固定的に配置され、いつでも閲覧できるページという扱いになります。
そこで、Blog の本文は「投稿」として作成し、
著者プロフィールのようなご挨拶ページは「固定ページ」とする等、使い分けを行います。
それでは、間単にブログを作ってみましょう。
落としたてのWordpressには、無駄な要素が多いので、まずは削ることから始めます。
ここからの手順は、私みたいな初心者さん向けの内容です。
作成の目的がある人は、レッツ製作してください。
テーマ設定
[ダッシュボード] - [外観] - [テーマ]
[(+)新しいテーマを追加]
[テーマを検索] から 好きなものを探す
[インストール] - [有効化]
これでまずはテーマが変更できたはずです。
もう50%くらいいけた気がしますよね。
ナビゲーションを削る
今回作るのは極めてシンプルなのBlog ですから、ナビゲーションが多いのは不親切です。
はじめにナビゲーションを削ることにしましょう。
[ダッシュボード] - [サイトをカスタマイズ]
この画面では、右側にフロントページ(※)のプレビューを見ながら、
直感的にカスタマイズすることができます。
※フロントページとは、読者が見るBlog のトップページのことです。
[保存して公開]を押さないと保存されないので注意
フロントページから動作確認ができます。
左上の家のアイコンをクリックすることで、フロントページに切り替えることが
できます。
プロフィールを固定ページとして作る
[ダッシュボード] - [固定ページ] - [新規追加]
タイトルと本文を書いて、[公開] をクリックで一般画面に反映されます。
投稿を作る
[ダッシュボード] - [投稿] - [新規追加]
以上（簡単すぎる）
上部に表示されている管理者向けのナビゲーションは、管理者ログイン時のみ確認できるものなので、一般人には見えてないです。なので、大丈夫です。
投稿に画像を追加する
[ダッシュボード] - [投稿] - [投稿一覧]-[メディアを追加]-[ファイルをアップロード]
（めっちゃ簡単、まじで）
ちなみに、 HTML/CSS をどうしても使いたい場合は[ビジュアル] ではなく[テキスト] から入力することができるらしいっすよ。
フロントページに、最新の三件の投稿のみを表示するようにする
[ダッシュボード] - [設定] - [表示設定]
[１ページに表示する最大投稿数]に３を入れて[変更を保存]
こうすることで、
４件目以降の投稿は２ページ目に表示されるようになりました。
ゴミ整理
インストール時にサンプル記事が投稿されています。
サンプルのままだともったいないので、捨てるなり編集するなり、煮るなり焼くなりコロ助ナリ
さて、ここまででlocalhost 上(XAMPP 上) にて簡単なBlog を完成させることができました。
XAMPP 環境上でBlog を作り、そこそこの状態になったら、
本番サーバーを用意してそこへの移設作業を行います。
次回、インポートとエクスポート！！！！
