クロスサイトスクリプティングとは
テキストボックスなどにHTMLタグを埋め込むことで悪意のあるスクリプトを実行させる攻撃です。
この攻撃によって訪問者の個人情報を盗むなどの被害をもたらすことになります。
対処法
入力値の制限
例えば、入力できる文字数の制限したり入力できる文字を制限などがあります（数字のみ入力可等）。エスケープ処理の実装 HTMLとして意味がある文字をエスケープし別の文字に置き換えることが対処法となります。
例えば、<という文字を<にすることがエスケープ処理です。WAF導入 SQLインジェクションと一緒ですね。
セキュリティ対策として導入は最善です。
まとめ
対処法をまとめて見てわかると思いますがSQLインジェクションと対して変わらないんですよね。
同様の対処法があるとなるとそれだけ攻撃されるということですかね。
【CSS】レスポンシブデザインを簡単に実装する
現代ではもはや当たり前となっているレスポンシブデザイン。
CSSを利用することで簡単に実装することができます。
やりかた
viewportを設定する
head部に以下のメタタグを追加します。
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
@mediaを追加
CSSにメディアクエリを利用します。
@media screen and (max-width: 500px) { img { width: 50%; } }
画面の幅が500px以下のとき、画像を50％のサイズにするという形にしています。
画面の幅が500pxより大きいときはメディアクエリ内に設定したCSSを適用することはありません。
こうやってレスポンシブデザインを適用することができます。
HTTPステータスコードについて
ちょっと気になったのでまとめます。
HTTPステータスコードとは
通信結果をコードで表すのがHTTPステータスコードです。
HTTPステータスコードには200、500などがあります。
200
OKの意味。
リクエスト成功、通信成功を表すのが200。
HTTPステータスコード（301、302）
3から始まるものはリダイレクト系。
301
ページのURLが変わったので、そちらのURLに再度リクエストするといった局面で使用する。
302
引っ越し先のURLに対し再度リクエストしろという意味。
301と302で再度リクエストするという意味になるがそれぞれ以下のような違いがある。
- 301
- 恒久的な引っ越し
- 302
- 一時的な引っ越し
HTTPステータスコード（403、404）
4から始まるものはクライアントエラーを表す。アクセス元に対するエラー。
403
禁止の意味。
アクセス権のエラーである。
404
Not Found。
レスポンスするコンテンツが存在しない場合に返却される。
HTTPステータス（500）
頭が5から始まるものはサーバーエラー。
500
Internal Server Error。
サーバー内部エラー。プログラムの文法エラーなどが発生しているとよく見る。
SQLインジェクション、知ってますか？
エンジニアの皆さんは知ってますよね？
私はSQLインジェクション対策されていない現場で開発していました。
SQLインジェクションとは
wikipediaから引用
SQLインジェクション（英: SQL Injection）とは、アプリケーションのセキュリティ上の不備を意図的に利用し、アプリケーションが想定しないSQL文を実行させることにより、データベースシステムを不正に操作する攻撃方法のこと。また、その攻撃を可能とする脆弱性のことである。
ざっくり言えばSQLに変な文字列を突っ込んで想定外のSQLを実行させる方法です。
例
以下のSQLを例に見ていきましょう。
SELECT * FROM customer WHERE name = '入力値';
customerテーブルからデータを取得するSQLです。
条件として'name'に一致するものを取得するという形になっています。
一見するとごく普通のSQLですが、このままアプリケーションに導入すると大変。
SQLインジェクションの温床です。
SQLインジェクションを発生させる
例えば、Webアプリケーションからの入力値をnameに設定するとしましょう。
そのときの入力値は以下とします。
a' OR 'a' = 'a
これをSQLに結合します。
SELECT * FROM customer WHERE name = 'a' OR 'a' = 'a'
これ、ORの右側で'a'='a'が一致してるのでcustomerテーブルのレコードが抽出できます。
直接入力値をSQLに結合する形だとこういった危険性があります。
対策
- バインド機構を利用する
プログラミング言語にはバインド機構が用意されているのでそちらを利用します。
バインド機構を利用することで安全にSQLを発行することができます。 - エスケープ処理を実装する
SQLにとって意味がある文字を弾くようなエスケープ処理を実装することが効果的です。
これはSQL以外にもHTML等意味がある文字を弾くことが大切なので合わせて実装しましょう。 - WAFの導入 企業でサービス展開しているのであれば当然導入しているはずです。
まとめ
当たり前ですけどいいサービス作ったところで脆弱性が発生したら全て台無しです。
特に個人情報を扱うのが当たり前になってきているのでせめてものセキュリティの知識は必要です。
【CSS】ヘッダーを固定する方法
よくWebサイトを作っているとスクロールしてもヘッダーを固定したい場合が出てくると思います。
その場合は以下のようにCSSを設定することで固定できます。
#header { position: fixed; }
上記のコードはidheaderを固定化するというコードです。
これでスクロールしてもヘッダーは固定化されます。
今回はヘッダーを例にしましたが、他にも応用できます。
例えば、右下に表示させるチャット画面とか。
以下のサイトとかは採用してますね。
