Ruby おみくじ

rubyの基礎を今日ちょっとだけ勉強したので、覚えたことを早速使ってやっぱりおみくじ作りました。
他のおみくじ

rubyの良さがわかってきた気がします。
余計なものを全て取っ払って、コードを最小限しか書かなくて良いような。まさに。
 
あと、今回新しく使ったこのオンラインでプログラミングができるサービスは、
repl.it
というサービスを利用しました。
すぐに利用できてこんな風にコードを記事に載せるのも簡単。
新しいお気に入りです。

 

WEBセキュリティについて考えてみる

セキュリティイメージ

 

今朝、JTBの個人情報流出がニュースになってました。
取引先を装った標的型攻撃メールの添付ファイルを開いたことによるウイルス感染か?ということで、最大でおよそ793万人分の情報が流出したそうです。
 
WEBセキュリティに関しては頭が良い人がやってくれてるんだろうなぁ。すごいなぁ。と少し前まで他人事で知らないまま生きてましたが、WEBを運営する人はみんな知っておかないといけないことだったんですね~。ダメエンジニアですね。
そしてこのサイトは大丈夫なのか。(‘ω’)
攻撃者は狙ったサイトを攻撃するために、まず踏み台になるサーバーを探すみたいなので、アクセス数が少ないこのサイトも狙われてるかもですね。いかにも脆弱っぽい見た目ですもんね。よくわからんコメントはよく来ますね。日本語以外は読めませんね。
CMSはとにかく更新更新。常に全てを最新状態にするのが大事。

不束ですが覚えたことをちょこっとメモしてみます。

 

★ SQLインジェクション
SQLインジェクションは有名で被害も多いです。
入力フォームなどからSQL文で個人情報をデータベースにリクエストし、情報を盗む攻撃です。
そんなに簡単なら自分でも盗めちゃいそうです。
ちゃんと知識さえあれば、対策は難しくないです。
バインド機構文字コードの指定などで対策できます。

 

★ XSS(クロスサイトスクリプティング)
XSSは入力フォームなどにWebページを操作するスクリプトを入力して送信する攻撃です。
ページの見え方や動作を変えられてしまいます。
HTMLエンコードなどで対策できます。
マークアップでできる対策としては、HTMLでシングルクォーテーションを使わない。でも基本HTMLでシングルクォーテーションは使わないですよね。

 

★ CSRF(クロスサイトリクエストフォージェリー)
CSRFはショッピングサイトなどの最終確定処理のリクエストを外部ページから行う攻撃です。
リクエスト送信のボタンが公開されていて誰でも押せる状態になってたとすれば、ショッピングサイト側には大量の注文が入ってくることになります。
対策としては、正規のユーザーかどうかをチェックすることが必要になります。
あるタイミングでトークンを発行し、確定処理されるタイミングでトークンを照合するなどで対策できます。

 

★ クリックジャッキング
クリックジャッキングは攻撃者自らのサイトの上に透過指定して透明な標的のサイトを被せます。
ユーザーからは攻撃者サイトしか見えていないことになり、攻撃者サイトのボタンやリンクをクリックさせることでユーザーに標的のサイトを操作させる攻撃です。
Webサイトから返されるHTTPレスポンスヘッダに「X-Frame-Options」HTTPヘッダの指定で対策ができます。

 

 

などなどこれ以外にもたくさんの脅威がweb上で溢れています。
悪い人は思ってる以上にいっぱいいますから、自分で自分の身は守れるようにしないとですね。

 

Vue.js を触ってみた

See the Pen vue練習 by NaoKidoguchi (@kumapoyo) on CodePen.

とても単純で読みやすいという印象でした。
これ以上シンプルなjsはないのでは?というくらい。
公式ページは綺麗な日本語ページがあり、デザインもとっても好きです。

https://jp.vuejs.org/guide/
こちらの公式のガイドを読むだけで、すぐにいろんなものが作成できて楽しいです。
このページを理解するだけで、何かそれなりのアプリを作れそうです。

上に置いたサンプルのjsを見ると、このコード量で双方向バインディングができてしまいます。
react.jsやknockout.jsより断然取っ付きやすかったです。
他のフレームワークとの比較も丁寧に記述してくれています。
https://jp.vuejs.org/guide/comparison.html

htmlの書き方はmustacheみたいで、とってもわかりやすい。
過去のmustache記事

まだ深く勉強してないですが、これは私の理想のjsライブラリかもしれないです。

 

mustache.js でファイルをインクルードしてみる

mustache

mustache.jsを使って、複数のテンプレートを一つのファイルにインクルードしてみました。

mustache

↑このリンクから自分が使いたい言語のmustacheをDLしてきます。
私はjsなので、このページのJavaScriptを選択するとgithubに飛ぶので、そこからmustache.jsを拝借します。

☆ まず、表示させるページ”index.html”に、記述はjqueryにしたいのでjqueryを読み込みます。そして先ほどのmustache.jsを読み込み、のちに使う”app.js”を読み込みます。
そして、今回は2ファイル読み込むので、ファイルを読み込む箇所(#target)を2つdivで作ってみます。

  
☆ 次に”app.js”を作成
中身はこんな感じにしてみました。このように”$.get“で表示させたいテンプレートファイルを取得してるみたいです。そして”Mustache.render()“でレンダリング(画面描画)してるみたいです。
“template2.html”は繰り返し表示させてみようと思ったのでなんかfor文書いてみました。

  
☆ そして、読み込ませるファイルはこんな感じにしてみました。(template1.html)

  
mustache.jsの名前の由来、{{}}が出てきました。
先ほどapp.jsで

のように書いてました。
ここでこのように好きな変数に好きな文字を入れとくと、{{}}で呼び出せるということです。
  
そうして、ブラウザでindex.htmlを開くと、このようになりました。
mustachetest
(色とかはcssでつけてます。)

  
上記の全てはここから
 
gulpはローカルサーバー立ち上げるだけです。
“npm i”でよければ使ってください。