はじめに 現在参画中の案件ではNode.js + Expressを用いた開発を行っています。 開発を行っているのはWebアプリのため、当然セキュリティ対策も必要になってきます。 今回は、CSRF(クロスサイトリクエストフォージェリ）対策として、 ミドルウェアであるcsurfを検証しました。 CSRF(クロスサイトリクエストフォージェリ）とは Webサイトにスクリプトや自動転送(HTTPリダイレクト)を仕込むことによって、閲覧者に意図せず別のWebサイト上で何らかの操作(掲示板への書き込みなど)を行わせる攻撃手法。 CSRFとは 〔 クロスサイトリクエストフォージェリ 〕 【 XSRF 】 - 意味/解説/説明/定義 ： IT用語辞典 この攻撃の特徴としては、利用者が攻撃者が用意したリンクやスクリプトにアクセスすることで、 本来フローとは異なるフローでアクセスを行うといった点でです。 対策と

プログラミングに関する格言みたいなのは昔から結構あって、例えばYAGNIみたいに日本でも十分浸透してるのは多いんだけど、やっぱり新しい概念はどんどん生まれていくので追いかけていると面白い。 というわけで、最近知った中でもっと日本でも言及されても良いと思ったやつを３つ紹介。 Simple Made Easy Rich Hickey（Clojure言語の作者）による講演(2011年)のタイトル。全文はここで読める。英語しんどくてPOSTDに投げたんだけど音沙汰がない。まだ全部見てないから和訳欲しい。 内容としては、みんな安易に「簡単」なものを選びがちだけど「シンプル」なものの方が価値あるぜ、というもの。曰く、「シンプル」は絶対的・客観的な指標だけど「簡単」は相対的・主観的なもの。例えば英語の話者にとってドイツ語は難しいが、それは自分にとって「遠い」存在であるだけで悪いものじゃない。 「慣れてい

何？ express-generatorで生成された雛形が、ES6の練習の土台によさ気に思えたので、ES6で動くようにする手順を考えました。 こんな感じ npm i -g babel express-generator express es5 cd es5 npm install とやって vi bin/www ↓一行目を編集 #!/usr/bin/env babel-node 以上で、ES6に書き換え放題です。 パッと見ただけでも↓直せます。 varで宣言しているところは全部constまたはletに requireでインポートしている箇所は全てimportに module.exportsでエクスポートしている箇所は全てexportに function(){}となっている箇所はarrow functionに オブジェクトのプロパティのバリューをDestructuring assignmen

Expressで簡単なプロダクトを作る時のオレオレ最小構成です。 要件 サーバーサイドもクライアントサイドもES2015(ES6)で書く サーバーサイドはNode.jsがv4以上だとES2015で書けるはず importなどが使えないと知ったので、babel-nodeを使います クライアントサイドJSはBrowserify + Babelifyでコンパイルする 開発時はWatchifyする ビルド時はUglifyする CSSはStylusで書く StylusはExpressのMiddlewareで都度コンパイルする ライブラリはkouto-swissを使う ベンダープレフィックスはautoprefixerでつける ViewはJadeで書く サーバーからJadeに変数を渡したりする Gulpなどのタスクランナーは使わない $ npm run xxxでやる 画像のSprite化とかするならGu

Why Meteor.js?Stop fighting with frameworks and ship real products to production. Front-end Agnostic Choose your preferred front-end framework like React, VueJS, Blaze, Svelte, or Solid. Apps for Any Device Create apps for Mobile with React Native or Cordova, or Desktop with Electron with the same code base.

Todoアプリの公式チュートリアルをやってみる 前回記事にて、Todoアプリをたかだか1コマンドで生成し、実行したあとでとてもアレなのだが、フレームワークを理解するために今度は自分でやってみようと思う。最近では、Angular JSが必要な開発に直面していることもあり、チュートリアルはAngular版Todoのものをやってみたいな…と思ったのだが、よくよく見てみるとほとんど普通のAngularっぽい感じだったので、ここは思い切ってMeteorの標準(?)のBlazeの構文でやってみようと思う。 2017年4月14日更新 Blazeの注意点については下記の記事を参照。Meteor 1.4より、BlazeはMeteor公式という立ち位置からは外れている。Blazeは簡素フレームワークのため、現状でもチュートリアルには向いている。 Meteorアプリケーション(Blaze)の運用をしてみてハマっ

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python 未だに form の validation って, とりあえずなんでも受け付けてサーバー側で してエラー返ってきたらヘッダーなりダイアログなりでエラーメッセージを表示するなんてのをよく見ます. 某大手サイトなんかはエラーがあるとリロードしちゃったりするし... ユーザーさんからすると入力した段階で何かしら間違いがあったらすぐに教えて欲しいですよね. 実はこの辺って HTML5 からクライアントサイドでもある程度チェックできるように整備されています. なのでライブラリを使わなくてもある程度サーバーに送る前に