スタイル・エッジ技術ブログ

士業集客支援/コンサルティングのスタイル・エッジのエンジニアによるブログです。

フォーム作成時に気をつけること（セキュリティ編）

セキュリティ

f:id:styleedge_tech:20190708200332p:plain

初めまして！スタイル・エッジ　システム事業部のMです。 業務ではPHPでの実装をはじめ、システム設計やチームマネジメントなど色々と経験を積んできています。 また、セキュリティ顧問になるべくセキュアコーディング面での技術向上と後輩エンジニアへの指導も行なっています。

今回はみなさん一度は作成したことのあるフォーム画面について、 少し似ている二つの攻撃とその対策についてお話しできればと思います。

今回扱うテーマ

XSS
  • 概要 XSSはwebページ内で不正なスクリプト（処理）を実行される攻撃です。

例えば、この攻撃に対する脆弱性があるサイトの <script>alert('あなたの個人情報を取得しました。')</script> をURLに含むリンクをクリックすると上記メッセージがポップアップで表示されます。
この場合は利用者に実害はないですが、それでも利用者を不安がらせ、サイト運営者への信頼を損なうことになります。 接続情報を取得するようなスクリプトであれば、第三者による不正アクセスも可能になってしまうため特に注意が必要です。

  • 対策
    対策としては以下が挙げられます。
    • フォームの値を画面に出力する際はhtmlspecialchars()などで特殊文字をエンティティに変換する
      →画面上にはただの文字列として表示されるので、不正なスクリプトが実行されなくなります。
    • CookieにHttpOnly属性を付与する
      →JavaScript経由でCookieの値を取得できないようにします。
CSRF

  • 概要 CSRFはwebページ内の特定の機能を意図せず実行させられる攻撃です。
    SNS・掲示板に犯行予告の書き込みを行なってしまうなど、かつて大きな話題になりました。
    この攻撃に対する脆弱性があるサイトにログインした状態のまま「『〇〇で△△する』と投稿する」URLのリンクをクリックした場合、
    ログインしているユーザとしてその内容を投稿してしまいます。
    つまり、攻撃者は他人の正規アカウントを利用して投稿を行うことができるのです。
    身に覚えのないうちに犯罪予告をしてしまうなど、この攻撃により利用者が大きな被害を被る可能性があるので 運営者としては防いでおくべき攻撃の一つです。

  • 対策
    対策としては以下が挙げられます。

    • フォーム画面にトークンをセットし、正しい流れで送信が行われていることを確認する。
      →現在よく使われている手法です。弊社の開発標準になっているLaravelでもこの機能が実装されています。
    • CookieにSameSite属性の'Strict'または'Lax'を設定する
      →Strictでは他のドメインからのリクエストからCookieが自動で付与されないことで、ログインが必要なサイトであればログイン画面が必要になります。
      また、LaxでもPOSTメソッドの場合はCookieを送らないようにします。
まとめ

今回挙げた内容は数多くある攻撃・対策のほんの一部です。 この他にもSQLインジェクションやメールヘッダインジェクションなど、 フォームに関連するセキュリティ対策だけでも様々ありますので、 気になった方はぜひ調べてみてください！

最後に

スタイル・エッジ　システム事業部では、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください！

株式会社スタイル・エッジLABO採用サイト

新卒未経験でITエンジニアを目指す前に、知っておいたほうがいいこと

新人エンジニア

こんにちは〜

スタイル・エッジ　システム事業部のしんちゃんです。
今年(2019年)の4月から新卒未経験でシステム事業部に入社しました。


今回は、もしあなたが、新卒未経験でエンジニアを目指そうと思っているなら、
これだけは知っておいたほうがいいよーということを２つほど、
私がこの２ヶ月半で感じたことを踏まえてお伝えしようと思います。

f:id:styleedge_tech:20191129154919j:plain フリー写真素材ぱくたそ


1. ITエンジニアと言っても色々種類がある

これは結構重要なんじゃないかなと思います。

私の友達にも何人かエンジニアになった人たちがいますが、このことを知らずに入り、
「全然コード書かないじゃんっ」　「思ってたことと全然違うっ」
などと言っている人が結構います。

実際私もこのことを知らず、ITエンジニア = "コードを書いてシステムやアプリを作る人"と思ってました。

★主なITエンジニアの種類★

  • フロントエンドエンジニア
    あなたが今見ているような、サイトの画面側を作るエンジニアです。
    言語としては主にJavaScript、HTML5/CSS3等が使用されます。


  • サーバーサイドエンジニア
    フロントエンドエンジニアとは違い、表には見えない部分を開発します。
    説明が難しいですが、画面を動かすだけではできない処理、裏側（サーバ側）の開発を行います。 言語としては、PHP、Perl、Ruby、PythonやJava、C、C++など色々と使用されます。


  • インフラエンジニア
    縁の下の力持ちとして、上記のエンジニア達が開発したシステムが動くように、
    サーバーやネットワークなどの環境構築を行います。
    ちなみに場所によって違うとは思いますが、コードはほとんど書きません。


わかりずらく申し訳ないですが、こんなに種類があるんだーとわかって頂ければ本望です。

また、ITエンジニアの種類は、これでも一部でしかないし、人によって捉え方が様々なので、
興味のある方は調べてみて、自分がどんなエンジニアを目指したいのか考えてみてください。




2. プログラミング言語と言っても色々種類がある


IT業界を目指す人なら知ってる方が多いかと思いますが、 私はこの業界に入るまであまりわからなかったので、 簡単に解説しておきます。

先ほどの説明で、色々と言語がでできたと思いますが、
まず、プログラミング言語とは...から説明しときます。


★プログラミング言語とは

  • 人が使う言葉のように「人　vs　コンピューター」間の言葉です。
    そのため、日本人が外国人と話すときに英語を使うように
    伝えたいコンピュータによって言語も異なります。

以下に簡単な具体例を示します。

★プログラミング言語の例

  • 人工知能や機械学習などを作りたいなら、「Python」という言語

  • webアプリが作りたいなら、「PHP」という言語

  • iPhpneのアプリが作りたいなら、「Swift」という言語


というような感じです。
話したい（作りたい）ものによって使う言語が違うということだけわかって頂ければ大丈夫です。
(全部一緒の言語にしてくれればいいのに...)


自分がこの先どんなものを実現したいかが明確にある人は
調べてみた方がいいと思います。




今回はこんな所で終わろうと思います。


最後に スタイル・エッジ　システム事業部では、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください！

株式会社スタイル・エッジLABO採用サイト

技術書輪読会、はじめました

エンジニアコミュニケーション チームビルディング

f:id:styleedge_tech:20190603132534j:plain
congerdesignによるPixabayからの画像

はじめまして！スタイル・エッジ　システム事業部のやっすんです。
現在は主にLaravelでのアプリケーション開発に携わっています。

スタイル・エッジのシステム事業部には20代以下の若手が多いため、
週1で若手だけの技術書輪読会を行い、スキルアップと技術的なコミュニケーションの促進をめざしています。
今回は、上記を目的とした技術書輪読会の進め方について紹介します。

続きを読む

YAMAHAのRTXにL2TP/IPsecを実装する１

ネットワーク インフラ

はじめに

こんにちは！　スタイル・エッジ　システム事業部のKYTです。

このブログを書いているメンバは開発担当がほとんどなのですが、 私はそのなかでは数少ないインフラ担当です。

これまでネットワークエンジニアとして働いていたこともあり、 弊社システムと社内LANの ネットワーク・サーバ周りを主戦場としております。

ただ小さな会社ですので、 ネットワーク機器やサーバを触るにとどまらず、 phpstormを使ったコード改修など、 一般的なインフラエンジニアの領域からはみ出た仕事もしております。

自分的にはそこがおもしろいので、楽しくやらせて頂いている今日この頃です。

f:id:styleedge_tech:20190512090235j:plain

今回のテーマについて

さて、インフラ担当として何をテーマに書こうかと思ったのですが、 ネットワークの領域には他の皆さんは手を出さないとみて、 YAMAHAのRTXにおけるL2TP/IPsecの設定、 について書くことにしました。

弊社は士業のコンサルティング業をやっておりまして、 各事務所さんのIT環境のお世話もさせて頂いております。

今回は社内と各事務所さんで設定した、 VPN接続の知見から記事を書きたいと思います。

実装config

まず実装したconfigからVPNに関連する部分をご覧ください。

pp select 1
    ip pp nat descriptor 1

pp select anonymous
    pp bind tunnel1
    pp auth request mschap-v2
    pp auth username ＩＤ パスワード
    ip pp remote address pool 192.168.10.200
    ip pp mtu 1258
    pp enable anonymous

tunnel select 1
    tunnel encapsulation l2tp
    ipsec tunnel 1
     ipsec sa policy 1 1 esp aes-cbc sha-hmac
     ipsec ike keepalive use 1 off
     ipsec ike local address 1 192.168.10.1
     ipsec ike nat-traversal 1 on
     ipsec ike pre-shared-key 1 text 事前共有鍵
     ipsec ike remote address 1 any
    l2tp tunnel disconnect time off
    l2tp keepalive use on 10 3
    l2tp keepalive log on
    l2tp syslog on
    ip tunnel tcp mss limit auto
    tunnel enable 1

nat descriptor type 1 masquerade
nat descriptor masquerade static 1 1 192.168.10.1 esp
nat descriptor masquerade static 1 2 192.168.10.1 udp 500
nat descriptor masquerade static 1 3 192.168.10.1 udp 4500
ipsec transport 1 1 udp 1701

l2tp service on

解説

さて、これを解説するにあたり、今回だけで全部を解説するとなると ボリュームが大きくなってしまうので 今回はpp select anonymousの設定箇所に絞ってお話しします。

申し訳ありませんが、全部の解説はこのブログを追いかけてください(苦笑)。

※なお、nat descriptorについては下部の設定値の解説でまとめて扱います。

それでは設定に即して解説します。

pp select anonymous

特定の端末ではなく、 どこからでもユーザ名とパスワードでアクセスできる形で VPNを設定するときに使うものになります。

pp bind tunnel1

この設定に紐づくトンネルインタフェースを設定するものです。 これによりanonymousで認証を受けたユーザは 後に出てくるtunnel1の箇所で設定された設定に基づいて VPN通信を行うことになります。

pp auth request mschap-v2

ユーザとパスワードを認証するときに使用するやり方を指定するもので、 ここではmschap-v2を指定しています。

pp auth username

ここでユーザ名とパスワードを設定しています。

ip pp remote address pool 192.168.10.200

VPNで接続した際にリモート先で通信を するときのipアドレスを記述しています。

つまりこの設定のRTXに接続すると 192.168.10.200の端末として社内ネットワークにつながるということになります。

ip pp mtu 1258

L2TP/IPsecのVPNを使用する際に付与されるヘッダを考慮して あらかじめ送るときのデータ大きさを1258byteより大きくならないように しましょうという設定です。

pp enable anonymous

そのまま意味で、上記の機能を有効にする設定です。

おわりに

pp select anonymousの解説だけにとどめましたが、 やはり、それなりのボリュームにやっぱりなってしまいました。 ブログは継続していきますので、最後まで読んでいただけると幸いです。

↓続編です techblog.styleedge.co.jp

最後に

スタイル・エッジ　システム事業部では、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください！

株式会社スタイル・エッジLABO採用サイト

Webで出てくる広告、邪魔なだけでしょう？

WEB

こんにちは、スタイル・エッジ システム事業部のぽんです。
チーム内では主に、PHPを使ったシステムの保守や新規開発、
あとは社内のISMS担当でもあるのでセキュリティ面の観点についても現在勉強中です。

じゃあセキュリティの話かな？と思いきや、
今回は、弊社に入って初めて触れた広告系の内容について書こうと思います。

Web広告について

弊社は士業コンサルティングという企業なので、ご支援させて頂いている事務所さんの
Web系広告のお手伝いなんかもしています。

みなさん、Webで出される広告っていくつか種類があるのは知っていますか？
ブログとかによく出ているバナーの「エンジニアなんだからFAXも直せるでしょ？」ってやつ。あれも立派に広告ですね。
邪魔なところに出てくるのは、それぞれ見て貰えるような工夫があるからなんです。
種類や用語をいくつか取り上げて紹介したいと思います。

リスティング広告

Googleなどの検索エンジンで、検索をした時に一番上や右に表示される、一瞬検索結果の一部かと思うあれです。
検索してもらって真っ先に目に入る場所にあります。
これが大事で、新しく作ったばかりの事業などは
検索エンジンの上位の候補には出てこないのでこういう広告を使って覚えてもらい
検索の上位に入るのを目指します。

アフィリエイト広告

アフィリエイターさんと呼ばれるサイトを持っている一般ユーザや、メディア企業さんに広告を貼ってもらって、宣伝してもらう広告。
広告を貼ってくれる方へのメリットは、そこからクリックや商品の購入、申し込みなどがあった際には、一定の費用が還元されるという所にあります。
広告を出す側も、表示してもらうだけであれば費用がかからないのでそこはメリットですね。

純広告

特定のサイトの枠を一定期間買い取って広告を表示させてもらいます。
最初に取り上げたバナー広告もこれの一種ですね。
費用形態的には、クリック保証型、imp・PV保証型、期間保証型があります。

.

説明を見ていても、急に広告用語が出てきて分からなくなりますよね。
私も聞き慣れない用語が多くて、最初はすごく困りました。
最後に出てきた、クリック・・ただのクリックではなくこれが広告にとっては結構大事になってきます。

imp・PVって？

  • impはインプレッション
  • PVはページビュー

どちらも似たような意味で使用されています。
このブログの一番下にも広告のバナーが表示されていますよね？
これで、1imp、1PVです。
違いをいうと、例えばページ内に同じ広告が3数貼ってあったとして
impは画面表示されただけで3カウント、
PVは画面表示されると1カウントになります。

クリック

  • クリックはその名の通り広告のクリック

広告がクリックされたら1クリックになります。
でも、広告にとっては単純な1クリックは結構ハードルが高いです。
自分がWebを見ている時のことを考えて欲しいです。
明らかに広告とわかっているバナー、興味がなかったらあえてクリックしないですよね？
クリックして貰えるということは、興味を持ってもらったという指標にもなります。

.

広告は種類によってはクリックしてもらうために、一般ユーザーの好みの系統などを見て広告を出し分けてます。
その例の一つとして普段使っている携帯のブラウザで、
同一ワードで検索した内容を夫や妻、異性の友人・同僚などと見比べてみてください。
Googleさんは、その人が今まで訪問している内容などから
何十代の女性か、男性なのかを分析して、情報を使い分けています。

こういう事を知ってしまうと、自分の知らないところでどれだけデータ収集されて解析されているんだろうとか怖くなりますね～。

.

怖くなったところで、スタイル・エッジという会社に興味を持ってくださった君！
スタイル・エッジのシステム事業部では、一緒に働く仲間を随時募集しています。
株式会社スタイル・エッジLABO採用サイトも覗いてみてくださいね！

プログラミング未経験な新入社員に告げる！Web屋になるならhtmlだけは先にやっておけ！！

HTML 新人エンジニア

ハジメマシテ、スタイル・エッジ　システム事業部の　Basco Boccinoデス。

 

 


....れっきとした日本人です。BBって呼んでください。

さて、この時期といえば卒業、そして新しい環境への変化の時期です。

今年も新入社員になる方々がたくさんいらっしゃるんじゃないでしょうか ♪(´ε｀ )。

そんな中で、
「やったことないけどなんか面白そうだからエンジニアになるんだ！！ ＼＼└(‘ω’)┘ｳｵｵｵｵ //／／」と、

意気揚々と就活をして

「#春からエンジニア」

なんてタグをつけてTwitterでツイートしている学生諸君に告げる。

 

「Web屋になるならHTMLだけはやっておけやァ！！# ﾟДﾟ)·;’. ｺﾞﾙｧ!!!」

 

と。

なぜか、それはこの後のお楽しみに。

 

ちょっとした自己紹介

私ことBBは、今の会社にエンジニアの新卒として入社しました。
もちろん未経験です。


ちなみに、この記事を書いているときは社会人1年目が終わりかけている頃です。

入社当時は
「PHP、DB、キャッシュ、シェル、環境構築、docker、 GIT、...etc」
と、様々な業界の用語が飛び交っている中、全てが自分の頭の右から左へと抜けて行きました。

それでも、中学校の授業でやっていた「HTML」だけはなぜか覚えていました。

 

入社してからも難儀なもので、

入社1ヶ月目は、外部研修に行き、「やべ、なんも分かんねぇ....」 ... (´ε｀；

入社2ヶ月目は、とりあえず簡単なWebアプリを最初から作ってみよう「やべ、なんも分かんねぇ....」 ... (´ε｀ ；；

そして入社3ヶ月目にして中核のプロジェクトに参加しました。

急展開ですね！やばいですね！ Σ(ﾟдﾟ；)

そんな私にも一つだけできることがありました。

そう、「HTML」です。( ´_ゝ`)ﾄﾞﾔｧ..


「モック」と呼ばれる、いわゆるデモンストレーションページのようなものをHTMLとCSS(画面のデザインを司る言語)で設計した方の意図に沿って忠実に組み上げていく....

そういうことを3~5ヶ月目はずっとやっていました。

 

ここからが本題


さて、ここからが本題の「Web屋になるならHTMLだけはやっておけやァ！！# ﾟДﾟ)·;’. ｺﾞﾙｧ!!!」です。

なぜか。
簡単だからです。

正確には、勉強するために必要な環境を準備するのが簡単だからです。
PHPなど、サーバーサイド言語と呼ばれるプログラミング言語は、それを動かす環境が必要です。準備もかなりめんどくさい。

「MAMPとかあるじゃーん」と言われると何も言えませんが、それを知っている人はもうHTMLやっとけ！！の次元の人ではないと思いますww

 

で、HTMLはというと、最悪「メモ帳アプリ」と「ブラウザ」があれば勉強できます。
ブラウザは、今あなたがこのブログを見ているのに使っているそれです。
Web業界に入るのであれば、ブラウザは調べてwww


どのように勉強するか、という具体的なことは今回は書きませんが、googleで調べればたくさん出てきます。
調べましょう。調べることはとてもこれからの仕事をしていく上で大切です。


HTMLは、Webアプリを作る上で欠かせない存在です。
HTMLの持つ仕組みや動きなどは、Webアプリのプログラミングをする上で非常に大事な要素になります。
私自身、この3~5ヶ月目までひたすらにHTMLを書き、仕組みや持っている特徴などを必死に勉強したおかげで、この後にやることになったJavaScriptやPHPの勉強に非常に役に立ちました。


逆に、HTMLをろくに触らずに先にプログラミングを勉強した場合、きっと余計な遠回りをしてしまうでしょう。
どんなに最新のWeb技術を使ったって、最後にWebを利用するユーザーが見るものはHTMLなのだから。


最後になりますが、Webアプリケーションプログラマを目指している未経験新卒諸君！！
この時期は、卒業旅行とか引越しとか卒業式とかでかなり忙しいかもしれない。
だけど、さわりだけでもHTMLを触っておけばきっと何かが変わるはず！！

 

スタイル・エッジ　システム事業部では、一緒に働く仲間を募集しています。
もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください！

[株式会社スタイル・エッジLABO採用サイト](https://recruit.styleedge-labo.co.jp/)