☆☆ 新着記事 ☆☆

2018年7月31日火曜日

レスポンシブ・デザイン -Youtube iframe


1. Youtubu iframeのレスポンシブ対応

1.) HTML : YouTubeから取得したiframeを div で囲う。

 <div class="frame-wrapper__video">
  <iframe src="https://www.youtube.com/hoge/hogehogehogehogehoge" frameborder="0" allowfullscreen></iframe>
</div>

2. CSS
.frame-wrapper__video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 50px;
}

.frame-wrapper__video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}




***基本はこちら。　面倒なので、Bootstrapで対応してるけど。

（前提）
PCは[ 1000px前後 ]でWebサイトをつくる
スマートフォンは[ 750px ]でWebサイトをつくる：iPhone7のサイズ

1. 表示領域の設定

1) header内でmeta内でviewportを設定する。
<head>
<!-- ビューポートの設定 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>

2) Media Quearyを設定する。

/* ウィンドウ幅が0〜750pxの場合に適用するCSS */
@media screen and ( max-width:479px ) {
p
{ color: #f00 ; /* 赤色 */ }
}

Note)古いブラウザ(Ie8以下)は、メディアクエリ(@media...{})を認識できません。認識できないというのは、括弧内のCSSが無視されてしまう。


2. Sample Script


1) HTML
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">

<title>レスポンシブ</title>
<!-- ビューポートの設定 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- スタイルシートの読み込み -->
<link href="./responsive.css" rel="stylesheet">
</head>
<body>

<!-- ヘッダー開始 -->

<div class="header">
<h1 class="logo-wrapper">
<img src="./logo.png" alt="ロゴ画像" class="logo">
</h1>
</div>
<!-- ヘッダー終了 -->

<!-- メインとサイドバーを囲むラッパー開始 -->
<div class="wrapper">

<!-- メイン開始 -->
<div class="main">
  <h1>記事タイトル</h1>
  <p>記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記
  事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本
  文記事本文記事本文記事本文</p>
<p>記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文
 記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文</p>
</div>
<!-- メイン終了 -->

<!-- サイドバー開始 -->
<div class="side">

<!-- 新着記事 -->
<div class="newlist">
<h2>新着記事</h2>
<ul>
<li>記事タイトル1</li>
<li>記事タイトル2</li>
<li>記事タイトル3</li>
</ul>
</div>

<!-- 著者紹介 -->
<div class="author">
<h2>著者紹介</h2>
<p><img src="./author.png"></p>
<p>このブログの著者の説明です。こんにちは。こんばんは。</p>
</div>

</div>
<!-- サイドバー終了 -->

</div>  <!-- メインとサイドバーを囲むラッパー終了 -->

<!-- フッター開始 -->
<div class="footer">
<p>Copyright © -2019</p>
<p>All Rights Reserved.</p>
<p>http://mossymob.net</p>
</div>
<!-- フッター終了 -->

</body>
</html>

2) CSS
メディアクエリ(@media...{})は、PC画面、又は、スマホ画面のどちらかに設定すればよい。
以下のケースは、スマホ画面用にメディアクエリを設定。

/* 全体(デスクトップPCとスマホ)に適用するCSS */
.wrapper
 {
  width: 1000px ;
  margin: 0 auto ; /* 左右に[auto]を指定することで、真ん中に寄る */
  padding: 0 ;  /* 上下左右の余白を0にしておく */
 overflow: hidden ;  /* main/sideのfloatを解除する */

 }
 /* スマホだけに適用するCSS */
 @media screen and ( max-width:479px )
 {
 .wrapper
  {
  width: auto ;
  padding: 0 10px ;  /* 左右の余白 */
   }

 }
/* 全体(デスクトップPCとスマホ)に適用するCSS */
.main
 {
  width: 618px ;
  padding: 20px ;       /* 上下左右に20pxの余白 */
  border: 1px solid rgba(0,0,0,.1) ;  /* 枠線 */
  float: left ;  /* 左に寄せる */
 }
.side
 {
  width: 320px ;
  float: right ;  /* 右に寄せる */
 }
/* スマホだけに適用するCSS */
 @media screen and ( max-width:479px )
 {
 .main
 {
  width: auto ;
  padding: 0 ;  /* 余白 */
  border: none ;  /* 枠線 */
  float: none ;  /* floatを無効する */
 }
 .side
 {
  width: auto ;
  float: none ;  /* floatを無効する */
 }
 }
/* ボディ */
body
{
 margin: 0 ; /* スペース */
 padding: 0 ; /* 余白 */
 font-size: 15px ; /* 文字サイズ */
 line-height: 1.618 ; /* 行の高さ */ }
p
{
 color: #00f ; /* 青色 */
}
/* スマホだけに適用するCSS */
@media screen and ( max-width:750px ) {
/* ボディ */
body
{ font-size: 13px ; /* 文字サイズ */ }
p
 {
  color: #f00 ; /* 赤色 */
 }
}

/* ヘッダー */
.header
{
 border-bottom: 3px solid #888 ; /* 枠線 */
 text-align: center ; /* テキスト、画像の真ん中寄せ */
 padding: 1em 0 ; /* 上下の余白 */
 margin-bottom: 2em ; /* 他のブロックとのスペース */
 background: #e8e8e8 ; /* 背景色(確認用) */ }

/* ロゴ画像を囲む[h1] */
.logo-wrapper
{
 margin: 0 ; /* スペース */
 padding: 0 ; /* 余白 */
 line-height: 1 ; /* 行の高さ */ }
/* ロゴ画像 */
.logo
{
 width: 400px ; /* 横幅 */
 height: auto ; /* 高さ */ }
/* スマホだけに適用するCSS */
@media screen and ( max-width:750px ) {
 /* ロゴ画像 */
 .logo
 {
 width: 150px ; /* 横幅 */ }
}
/* フッター */
.footer
{
 border-top: 3px solid #888 ;  /* 枠線 */
 text-align: center ;    /* テキスト、画像の真ん中寄せ */
 margin-top: 2em ;     /* 他のブロックとのスペース */
 padding: 1em 0 ;     /* 上下の余白 */
 background: #e8e8e8 ;
}



時刻: 0 件のコメント:

2018年7月14日土曜日

コンタクトフォームの脆弱性対策


コンタクトフォームを作る際には、脆弱性対策には気をつけませんと。


1. 代表的な攻撃手法

1） XSS（クロスサイトスクリプティング）[ Cross site scripting ]
脆弱性のあるWebサイトを踏み台に、Javascriptなど、悪意のあるプログラム（Attack Code)を
サイトの訪問者に送り込む手法。

2) CSRF（クロスサイトリクエストフォージェリ）[ Cross site request forgeries ]
Webサイトにスクリプトや自動転送（HTTPリダイレクト）を仕込むことによって、閲覧者に意図せず別のWebサイト上で何らかの操作（掲示板への書き込みなど）を行わせる攻撃手法。


3)SQLインジェクション（エスキューエルインジェクション）[ SQL Injection ]
データベースへの問い合わせや操作を行うプログラムにパラメータとしてSQL文の断片を与えることにより、データベースを改ざんしたり不正に情報を入手する攻撃。


4) クリックジャッキング[ Click jacking ]
Webブラウザの操作を乗っ取り、ユーザに意図しない操作を行わせる攻撃手法。



2. 対応
1） XSS（クロスサイトスクリプティング）[ Cross site scripting ]
例）
お問い合わせフォームの「名前」の入力欄に「お名前<script><alert('Warning!! This is UnintendedScript);></script>」というJavascriptのコードを含む文字列を入力し、送信したとすると、。
 その際、XSS（クロスサイトスクリプティング）対策が施されていないフォームでは、JavaScriptが作動してしまうのです。

(対策)
「<」と「>」などの特殊文字をHTMLと認識させない方法などがあります。



2) CSRF（クロスサイトリクエストフォージェリ）[ Cross site request forgeries ]

たとえば、お問い合わせフォームを経由して情報を送信する際、HTMLソースを見れば「form」の送信先が分かりますが、その「form」の送信先をコピーして、別のサーバーのWebページに設置してしまえば、そのWebページからもフォームを送信できる場合があります。
そうなれば、外部の無関係なWebページから、大量のデータを本来のフォームへ送り込むことが可能となってしまいます。
たとえば、ボタンひとつで外部のフォームへデータを送信できるようなWebページを作り、そのWebページを不特定多数に向けて公開すれば、何も知らない人たちがボタンを押すたびに、本来のフォームへデータがどんどん送信されてしまうのです・・・。
この攻撃を防ぐためには、お問い合わせフォームなどを作る際に、「入力」「確認」「完了」までの流れにおいて、知らないドメインからの送信ができないような、「秘密の暗号」を設定するなどの対応が必要です。

対策）
トークンの作成

3)SQLインジェクション（エスキューエルインジェクション）[ SQL Injection ]
詳しくはSQLを使うようになったら考えます。

・SQLとして実行されないように特殊文字を一般的な文字列に変換する方法
・バインド処理を行う方法


4) クリックジャッキング[ Click jacking ]

他のサイトでインラインフレーム表示を禁止する（クリックジャッキング対策）


3. Scriptの例

1） mail.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>シンプルなメールフォーム</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/jQuery.validation.js"></script>
<script type="text/javascript" src="./js/reserve.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#contact-form").validate({
rules : {
name:{required: true}
},
errorClass: "myError"
});
});
</script>
<style>
#contact-form th{
    background-color: #F8F8F8;
    border-color: #CCCCCC #CCCCCC #CCCCCC #333333;
    border-left: 3px solid #333333;
    border-right: 1px dotted #CCCCCC;
    border-style: solid dotted solid solid;
    border-width: 1px 1px 1px 3px;
    padding: 5px 8px;
    width: 200px;
}
#contact-form td{
background-color: #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    padding: 5px 8px;
}
input.myError {
background-color:#CCFFFF;
}
label.myError {
color:#FF0000;
}
textarea.myError {
background-color:#CCFFFF;
}
</style>
</head>
<body>
<form id="contact-form" action="./check.php" method="post">
     <input type="hidden" name="sub_actions" value="confirm">
     <table>
     <tbody>
     <tr>
     <th>お名前</th>
     <td><input type="text" class="required" name="name" value=""></td>
     </tr>
     <tr>
     <th>メールアドレス</th>
     <td><input type="text" class="required email" name="e_mail" value=""></td>
     </tr>
     <tr>
     <th style="vertical-align:top;">お問い合わせ内容</th>
     <td><textarea name="comment" rows="4" cols="40"></textarea>
     </td>
     </tr>
     </tbody>
     </table>
     <div class="bt">
     <input type="submit" value="確認画面へ" name="submit">
     </div>
     </form>
</body>
</html>

2)check.php

<?php
//mail.phpのPostをSessionに代入する。
//Postは次のページまでしか引き継ぐことが出来ません
//確認ページ、送信ページとページをまたぐ際はこのSessionを使うのが普通です。
//そのため、フォームの確認ページなどで一度Sessionに代入する必要があります。
//いきなり確認画面にアクセスがあれば不正アクセス。
//!$_POSTで　$_POSTがSetされているかをチェックし、セットされていなければリダイレクト
if(!$_POST){
header('Location: http://www.example.com/'); // headerlocationはPHPのリダイレクト処理でよく使う。
 }
//Sessionを開始するときの決まり文句、これがないとSessionが開始できない
session_start();
$_SESSION = $_POST;
//無事Sessionに保存できているかチェックする(本番では削除）
echo '<pre>';  //HTMLのpreタグを使うと、配列が見やすくなる
print_r($_SESSION);  //print_rとは、配列を出力する関数
echo '</pre>';

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>シンプルなメールフォーム</title>
<style>
#contact-form th{
    background-color: #F8F8F8;
    border-color: #CCCCCC #CCCCCC #CCCCCC #333333;
    border-left: 3px solid #333333;
    border-right: 1px dotted #CCCCCC;
    border-style: solid dotted solid solid;
    border-width: 1px 1px 1px 3px;
    padding: 5px 8px;
    width: 200px;
}
#contact-form td{
background-color: #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;ｖ
    border-top: 1px solid #CCCCCC;
    padding: 5px 8px;
}
</style>
</head>
<body>
<form id="contact-form" action="./send.php" method="post">
     <input type="hidden" name="sub_actions" value="confirm">
     <table>
     <tbody>
     <tr>
     <th>お名前</th>
     <td><?php echo htmlspecialchars($_POST['name']);?></td>
     </tr>
     <tr>
     <th>メールアドレス</th>
     <td><?php echo htmlspecialchars($_POST['e_mail']);?></td>
     </tr>
     <tr>
     <th style="vertical-align:top;">お問い合わせ内容</th>
     <td><?php echo htmlspecialchars($_POST['comment']);?>
     </td>
     </tr>
     </tbody>
     </table>
                   
     <div class="bt">
                    <p>PCやスマホのメールフォームの修正ボタンなんかhistory.back()で十分！</p>
                  <input type="button" value="戻る" onclick="history.back();">
     <input type="submit" value="送信" name="submit">
     </div>
     </form>
</body>
</html>

3) send.php


<?php
//以下ユーザー確認メール//info@example.comを、あなたのメールアドレスにすることでこのメールフォームをそのまま使えます。
session_start();  //ページ移動したら再びsession_start
$add_header="From:info@example.com\r\n";
$add_header .= "Reply-to: info@example.com\r\n";
$add_header .= "X-Mailer: PHP/". phpversion();
$opt = '-f'.'info@example.com';  //-fって何か意味あったんだけど忘れました　-fすると迷惑メールになりにくいとか、そんなことだったと思う。
//以下ヒアドキュメント<<<●●　HTMLでも、文字列でも、何いれてもOK●●;
//ヒアドキュメントは、メール送信とかの定型文を書いたりするとき、あとはSQLを書くときも使うかな。
//ヒアドキュメント内ではPHPのプログラムは一切かけない。変数だけ。変数は{}で囲ってあげること
//メールの本文をここでひとまとめに。
$message =<<<HTML
お問い合わせ内容の確認です。
お名前
{$_SESSION['name']}
E_mail
{$_SESSION['e_mail']}
お問い合わせ内容
{$_SESSION['comment']}
内容確認後、担当者より折り返しご連絡をさせて頂きます。
今しばらくお待ちください。//問い合わせ者へのコメント。
HTML;
// カレントの言語を日本語に設定する
mb_language("ja");
// 内部文字エンコードを設定する　このエンコード指定は大昔の携帯だとShift-jisにしないとだめだったとか。
// 今はUTF-8にしておけばだいたいOK。
mb_internal_encoding("UTF-8");
mb_send_mail($_SESSION['e_mail'],"【お問い合わせ】確認メール",$message,$add_header,$opt);
//mb_send_mailは5つの設定項目がある
//mb_send_mail(送信先メールアドレス,"メールのタイトル","メール本文","メールのヘッダーFromとかリプライとか","送信エラーを送るメールアドレス");
//5番目の情報は第5引数と呼ばれるものでして、これがないと迷惑メール扱いになることも。

//マスター管理者にも同じメールを送りつける！！
mb_send_mail('info@example.com',"お問い合わせがありました",$message,$add_header,$opt);
session_destroy();  // セッションを破棄
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>シンプルなメールフォーム</title>
<style>
#contact-form th{
    background-color: #F8F8F8;
    border-color: #CCCCCC #CCCCCC #CCCCCC #333333;
    border-left: 3px solid #333333;
    border-right: 1px dotted #CCCCCC;
    border-style: solid dotted solid solid;
    border-width: 1px 1px 1px 3px;
    padding: 5px 8px;
    width: 200px;
}
#contact-form td{
background-color: #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    padding: 5px 8px;
}
</style>
</head>
<body>
<p>送信完了しました</p>
</body>
</html>





参考）
1) PHP開発エンジニア必読！最低限必要なセキュリティ対策
   （悪意のあるスクリプト例がのっていて分かり易い。）

http://www.hp-stylelink.com/news/2013/09/20130913.php

2) メールフォームへセキュリティ対策の適用
http://webeg.info/php-course/step2-020/
  （対策スクリプト例がのっていて分かり易い。）
　　　・変数のホワイトリスト化
　　　・サニタイズ（サニタイジング）
　　　　　『クロスサイトスクリプティング』『セッションハイジャック』
　　　　　『クロスサイトリクエストフォージェリ』が該当
　　　　　htmlentitiesという関数で対応
 　　・入力値バリデート（バリデーション）
　　 ・ヌルバイト除去

3）メールフォームにおける迷惑メール、スパムメール対策
https://www.php-factory.net/trivia/09.php


◎ 4）初心者も分かるようPHPメールフォームを解説
http://www.kaasan.info/archives/2151
最低限のコードを分かり易く解説。　JQuearyを利用。
とても分かり易い。　最終版のスクリプト付。
http://www.kaasan.info/archives/2151
時刻: 0 件のコメント: