お問い合せで <script>alert("xx");</script>の文字列を入れると、確認画面でUIが崩れる。

実現したいこと

お問い合せフォーム画面で <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 = "氏名は必須入力事項です。１０文字以内で入力してください。\n";
          var result = result + name;
        }

        if ($("input[name='ruby']").val() == '' || $("input[name='ruby']").val().length >= 10) {
          var ruby = "フリガナは必須入力事項です。１０文字以内で入力してください。\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>

ーーーー改善なし

int32_t

2023/05/31 23:24

質問文のコードは confirm.php ですか? 具体的どういう表示になれば「UIが崩れない」になりますか。

回答1件

$_SESSIONの値を出力する際にhtmlspecialcharsでエスケープしてください

投稿2023/05/30 06:04

yambejp

総合スコア112600

回答へのコメント

退会済みユーザー

2023/05/30 06:20

ご回答ありがとうございます。 <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> このように変更したのですが改善されません。