XSS対策しよう(6-46)
大枠
・XSS(クロスサイトスクリプティング)攻撃のセキュリティリスクがある
・phpではhtmlspecialcharsを使ってエスケープする
XSS(クロスサイトスクリプティング)攻撃のセキュリティリスクがある
*XSS:ユーザーの入力データを表示する箇所のHTML生成の実装に不備があると発生する脆弱性
呟き投稿アプリがあったとして
AさんがCookieを取得するJavaScriptコードを呟く
↓
呟いたJavaScriptコードがBさんの閲覧画面上に表示される
↓
JavaScriptのコードが実行
↓
BさんのCookieがAさんに取得される
↓
BさんのCookie情報でログインされる
↓
その人に成りすまして自由に操作される。個人情報も流出する
ユーザが入力した内容を表示する箇所ではXSS対策は必須
HTMLの文法上特別な意味を持つ特殊記号を文字参照に置き換える(エスケープ)
ex)<→< >→>
何も対策せず表示
ブラウザは[<]タグを開始として認識→コードが実行される
エスケープして表示
ブラウザは[<]を[<]という文字として認識→コードが実行されない！
htmlspecialchars()を使ってHTML特殊記号をエスケープする
・HTMLの特殊記号を文字参照に置き換える
ー$string:変換する文字列
ー$flags:処理の仕方を指定するフラグ
ー$encoding:文字を変換するときに使用するエンコーディング
htmlspecialchars($string,$flags,$encoding)
・ユーザが入力してDBに保存された「<script>…</script>」の値をエスケープするなら
htmlspecialchars('<script>…</script>',ENT_QUOTES,'UTF-8')
#実行結果
<script>…</script>
ENT_QUOTES:特殊文字のうちどれを変換するかという指定
シングル、ダブルクォーテーションの両方を変換対象に含める
基本はこれ使っとけばいい
HTMLのレイアウト部分を共通化しよう(6-43)
大枠
アクセスされるページに
・ページタイトルと、特有部分ファイルを変数に格納
・共通部分ファイルをインクルード
共通部分ファイルで変数を展開、インクルードして表示する
現状の課題
HTMLのhead部分が複数ページほぼ同じものを使用している
→共通化しよう
DRYに書くことの実践
レイアウトを共通化しよう
views/layout.php に共通のレイアウトのHTMLをまとめ
ページごとに変わる部分は呼び出し元のPHPファイル内で変数で渡そう
会社情報の登録ページ
$title = '会社情報の登録';
$content = __DIR__ . '/views/new.php';
//コンテンツ特有の部分
include __DIR__ . '/views/layout.php';
//共通部分、中で変数を展開する
Sassの概要を把握しよう(6-36)
Sassってなに？
SassはCSSをより便利に効率的に書けるようにした言語
Syntacically Awesome Stylesheets :構文的にイケイケなスタイルシート
背景
CSSだと複雑な事ができない
↓
コードの再利用、変数、条件分岐、演算などをできるようにしたのがSass
メリット
・簡略に記載できる
・変数で同じ値を使いまわせる
・四則演算ができる
・コードの再利用ができるetc...
BootstrapをカスタマイズするのにSassを使うと簡単にできるので
今回Sassを導入する
Sassの基本の使い方
拡張子[scss]ファイルを作成→CSSにコンパイル→HTMLでCSSを読み込む
拡張子には[sass]と[scss]があり、scssの方がCSSとの互換性が高く、普及してる
app.scss
app.css
↓読み込む
new.html
app.scssをnew.htmlに読み込むことはできない
Sassの基本の書き方①ネスト
app.css
nav ul{
margin:0;
padding:0;
}
nav li{
display:inline-block;
}
app.scss
nav{
ul{
margin:0;
padding:0;
}
li{display:inline-block;}
}
HTMLの入れ子構造と同じように書けるので構造が把握しやすくなる
Sassの基本の書き方②変数
値に変数を入れておいて、変数名を参照することで値を使いまわせる
修正が一か所で済むし、似たような違う色が増えることも防げる
Sassの基本の書き方③セレクタの参照
「&」を使うことで親を一から指定しなおさずに済み、スッキリ書ける
Sassの基本的な書き方④import
ファイルを分割して読み込むことができる
CSSの@importとSassの@importは基本的には同じ構文で使える
Bootstrapの概要を把握しよう(6-33)
Bootstrapってなに？
世界で最も人気なHTML,CSS,JavaScriptのフレームワーク
(Twitter社で開発された！)
メリット
・CSSを一から書かなくていい
・レスポンシブウェブデザインに対応
・統一感のあるデザインが簡単に
・チーム間や外部との連携がしやすい
自分で一からCSS書くと大変なので時短のためにBootstrapはお勧め
Bootstrapってどれも同じようなデザイン！？
Bootstrapを使っててオシャレなサイトは沢山ある
Bootstrapの使いたい部分だけチョイスして
それをベースにオリジナルにカスタマイズして使う
HTMLのheadの中に
<link rel="stylesheet" href="使うBoostrapの場所">
を入れるとBootstrapが読み込まれる
../vendor/twbs/bootstrap/dist/css/bootstrap.css
今回のBoostrapの場所
それぞれ、公式ドキュメントを読めばわかる
バリデーションエラーでも入力値を残そう(6-31)
現状の課題
バリデーションエラーになると入力してた内容が消える
エラーが起きても他の入力は消えないようにしたい
フォームの入力値を残すには
inputタグのvalue属性を使おう
value属性
input属性の値を指定する属性
テキスト入力欄などにおいては初期入力値を表す
そもそもなぜ消える？
入力後新しいHTMLファイルを読み込むからまっさらになる
じゃあどうすればいい？
入力した値を次のフォームの初期値を設定しておけばいい
例)
<input type="text" id="name" name="name" value="<?php echo $company['name'] ?>">
ラジオボタンの初期値の設定にはchecked属性を使おう
checked属性を付けると初期値で選択された状態になる
男性が最初から選択された状態になる
<input type="radio" name="sex" id="sex1" value="男性" checked>
<label for="sex1">男性</label>
$user['sex']が[男性]の時に最初から選択する(三項演算子)
<input type="radio" name="sex" id="sex1" value="男性"
<?php echo ($user['sex'] === '男性') ? 'checked' : ''; ?>>
<label for="sex1">男性</label>
条件式を一行で書きたい時は三項演算子
(比較条件)?(値1) : (値2)
これと一緒
if(比較条件){
値1
}else{
値2
}
PHPとHTMLファイルを分割しよう(6-28)
現状の課題
ほぼ同じHTMLのコードが2か所に記載されていると
修正する時に複数個所を修正しないといけない
面倒くさいし修正漏れの危険アリ
↓
HTMLを一か所に定義して呼び出すようにしよう
ロジックの部分とHTMLを分割するのは基本！
HTMLはファイルを分割したらincludeで読み込もう
include
指定したファイルを読み込む
・読み込みが失敗しても処理が中断されない
・HTMLやテキストなどを読み込むときに使う
include 'somefile.php';
require_once
指定したファイルを読み込む
・読み込みが失敗したら処理が中断され、1度しかファイルを読み込まない
・関数などの重要な処理を読み込むときに使う
require_once 'somefile.php';
