実現したいこと
お問い合せフォーム画面で <script>alert("xx");</script>の文字列を入れてもUIが崩れないようにしたい。
初歩的な質問で大変申し訳ございませんTT
前提
↓
該当のソースコード
<?php session_start(); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" type="text/css" href="contact.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <?php include('header.php'); ?> <div class="contact"> <h2>お問い合わせ</h2> <div class="contact-form"> <p>下記の項目をご記入の上送信ボタンを押してください</p> </div> <div class="contact-text"> <p>送信頂いた件につきましては、当社より折り返しご連絡を差し上げます。</p> <p>なお、ご連絡までに、お時間を頂く場合もございますので予めご了承ください。</p> <p><span>*</span>は必須項目となります。</p> </div> <form method="post" action="confirm.php"> <div class="contact-input"> <p>氏名<span>*</span></p><?php if(isset($_SESSION['result_name'])) { echo "<font color=\"red\">{$_SESSION['result_name']}</font>"; }?> <input type="text" name="name" id="mane" placeholder=" 山田太郎" value="<?php if(isset($_SESSION['name_ret'])) { echo "{$_SESSION['name_ret']}"; } ?>"> <p>フリガナ<span>*</span></p><?php if(isset($_SESSION['result_ruby'])) { echo "<font color=\"red\">{$_SESSION['result_ruby']}</font>"; }?> <input type="text" name="ruby" id="ruby" placeholder=" ヤマダタロウ" value="<?php if(isset($_SESSION['ruby_ret'])) { echo "{$_SESSION['ruby_ret']}"; } ?>"> <p>電話番号(ハイフンなし)<span></span></p><?php if(isset($_SESSION['result_phone'])){ echo "<font color=\"red\">{$_SESSION['result_phone']}</font>"; }?> <input type="text" name="phone" id="phone" placeholder=" 09012345678" value="<?php if(isset($_SESSION['phone_ret'])) { echo "{$_SESSION['phone_ret']}"; } ?>"> <p>メールアドレス<span>*</span></p><?php if(isset($_SESSION['result_email'])) { echo "<font color=\"red\">{$_SESSION['result_email']}</font>"; }?> <input type="text" name="email" id="email" placeholder=" test@test.co.jp" value="<?php if(isset($_SESSION['email_ret'])) { echo "{$_SESSION['email_ret']}"; }?>"> </div> <div class="contact-form"> <p>お問い合わせ内容をご記入ください<span>*</span></p> </div> <div class="contact-textarea"><?php if(isset($_SESSION['result_contact'])) { echo "<font color=\"red\">{$_SESSION['result_contact']}</font>"; }?> <textarea type="text" name="contact" id="contact"><?php if(isset ($_SESSION ['contact_ret'])) { echo "{$_SESSION['contact_ret']}"; }?></textarea> </div> <div class="contact-button"><button onclick="return check()" type="submit" name="submit" class="submit">送 信</button></div> </form> </div> <script> function check() { var result = ""; var aaa = document.getElementById("phone"); var phoneValue = aaa.value; var bbb = document.getElementById("email"); var emailvalue = bbb.value; if ($("input[name='name']").val() == '' || $("input[name='name']").val().length >= 10) { var name = "氏名は必須入力事項です。10文字以内で入力してください。\n"; var result = result + name; } if ($("input[name='ruby']").val() == '' || $("input[name='ruby']").val().length >= 10) { var ruby = "フリガナは必須入力事項です。10文字以内で入力してください。\n"; var result = result + ruby; } if ($("input[name='phone']").val() != '' && !phoneValue.match(/^[0-9]+$/)) { var phone = "電話番号は0-9の半角数字でご入力ください(ハイフンなし)\n"; var result = result + phone; } if ($("input[name='email']").val() == '' || !emailvalue.match(/.+@.+\..+/)) { var email = "メールアドレスは正しくご入力ください。\n"; var result = result + email; } if ($("textarea[name='contact']").val() == '') { var contact = "お問い合わせ内容は必須入力事項です。\n"; var result = result + contact; } if (result === "") { return true; } else { alert(result); } }; </script> <?php include 'footer.php'; ?> </body> </html>
実施したこと
<div class="contact-form"> <p>お問い合わせ内容をご記入ください<span>*</span></p> </div> <div class="contact-textarea"> <?php if (isset($_SESSION['result_contact'])) { echo "<font color=\"red\">" . htmlspecialchars($_SESSION['result_contact'], ENT_QUOTES, 'UTF-8') . "</font>"; }?> <textarea type="text" name="contact" id="contact"><?php if (isset($_SESSION['contact_ret'])) { echo htmlspecialchars($_SESSION['contact_ret'], ENT_QUOTES, 'UTF-8'); }?></textarea> </div>ーーーー改善なし
