Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > Client Script Forum > สอบถามวิธีกำหนดค่า HTML ที่ encode แล้วลงใน input หรือ textarea

[PHP] สอบถามวิธีกำหนดค่า HTML ที่ encode แล้วลงใน input หรือ textarea

เริ่มหัวข้อใหม่

mr.v

โพสกระทู้ ( 4,765 )
บทความ ( 8 )

ผมมีไฟล์บันทึกข้อมูลดังนี้
Code (PHP)

<?php
session_start();
 
if ($_POST) {
    // สำหรับบันทึก
    $name = htmlspecialchars(trim($_POST['name']), ENT_QUOTES);
    $_SESSION['name'] = $name;
    $output = [];
    $output['saved'] = true;
    $output['name'] = $name;
     
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode($output);
    exit();
}
 
 
if (isset($_SESSION['name'])) {
    // สำหรับ ajax ดึงไปแสดง
    $name = $_SESSION['name'];
    $output = [];
    $output['name'] = $name;
 
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode($output);
    exit();
}

ชื่อไฟล์ save.php

อันนี้เป็นไฟล์ php สำหรับทดสอบทำงานปกติธรรมดาโดยยังไม่มี js ajax
Code (PHP)

<?php
session_start();
 
if ($_POST) {
    $name = htmlspecialchars(trim($_POST['name']), ENT_QUOTES);
    $_SESSION['name'] = $name;
    header('Location: test01.php', true, 302);
    exit();
}
 
if (isset($_SESSION['name'])) {
    $name = $_SESSION['name'];
 
    echo 'saved result: ' . $name . '<br>' . PHP_EOL;
}
?>
<form method="post" action="save.php">
    <input type="text" name="name" value="<?php if (isset($name)) {echo $name;} ?>" maxlength="50">
    <br>
    <button type="submit">Save</button>
</form>
<p>Normal php save/display.</p>

ชื่อไฟล์ test01.php

ไฟล์ข้างบนนี้ ถ้ากรอกชื่อลงไปว่า p แล้วบันทึกแล้ว reload มันก็จะแสดงออกมาใน input ถูกต้องเหมือนตอนที่พิมพ์เลย แต่ว่าเมื่อเป็น JS (ด้านล่าง)...

Code (JavaScript)

<div id="saved-result-text" style="display:none;">
    saved result: <span id="saved-result"></span>
</div>
 
<form id="saveForm" method="post">
    <input id="name" type="text" name="name" value="" maxlength="50">
    <br>
    <button type="submit" onclick="return ajaxSave();">Save</button>
</form>
<p>Normal JS save/display.</p>
 
 
<script>
    function ajaxSave() {
        let formData = new FormData(document.getElementById('saveForm'));
        let xhr = new XMLHttpRequest();
 
        xhr.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                let response = JSON.parse(this.response);
                if (response.saved === true) {
                    window.location.reload();
                }
            }
        };
 
        xhr.open('POST', 'save.php');
        xhr.send(formData);
 
        return false;
    }
 
 
    document.addEventListener('DOMContentLoaded', function() {
        let xhr = new XMLHttpRequest();
 
        xhr.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                let response = JSON.parse(this.response);
                if (response && response.name) {
                    document.getElementById('saved-result-text').style = '';
                    document.getElementById('saved-result').innerHTML = response.name;
                    document.getElementById('name').value = response.name;
                }
            }
        };
 
        xhr.open('GET', 'save.php');
        xhr.send();
 
        return false;
    }, false);
</script>

ชื่อไฟล์ test02.php
ไฟล์นี้ เมื่อบันทึกชื่อว่า p แล้ว reload ในช่อง input จะกลับกลายเป็น p ซึ่งไม่ตรงตามตอนที่พิมพ์ลงไป
ทำยังไงให้มันแสดงผลให้ถูกต้องครับ?
มีวิธีอื่นนอกจาก decode มันไหม? เพราะรู้สึกใน php ไม่ต้องทำอะไรเลยตอนแสดงผล และการ decode มันจะเสี่ยงเกิดช่องโหว่ xss หรือไม่?

Tag : JavaScript, Ajax

Date : 2019-11-07 10:50:51

By : mr.v

View : 1048

Reply : 1

No. 1

พระยาเทพ

โพสกระทู้ ( 1,458 )
บทความ ( 0 )

ต้อง decode ครับ เพราะใช้ htmlspecialchars()
และ ดูเหมือน echo ของ php มันจะ decode ระดับแรกให้แล้ว

Code (PHP)

<?php
$name = htmlspecialchars('<p>p</p>'); //1 level encoded
echo htmlspecialchars($name);
echo '<br>' . $name;
echo '<br><br>';
$name = htmlspecialchars(htmlspecialchars('<p>p</p>'));  //2 level encoded
echo $name . '<br>';
echo htmlspecialchars_decode($name);

การ decode ในไฟล์ 2 ด้วย JavaScript

test02.php

<div id="saved-result-text" style="display:none;">
    saved result: <span id="saved-result"></span>
</div>
 
<form id="saveForm" method="post">
    <input id="name" type="text" name="name" value="" maxlength="50">
    <br>
    <button type="submit" onclick="return ajaxSave();">Save</button>
</form>
<p>Normal JS save/display.</p>
 
 
<script>
    function ajaxSave() {
        let formData = new FormData(document.getElementById('saveForm'));
        let xhr = new XMLHttpRequest();
 
        xhr.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                let response = JSON.parse(this.response);
                if (response.saved === true) {
                    window.location.reload();
                }
            }
        };
 
        xhr.open('POST', 'save.php');
        xhr.send(formData);
 
        return false;
    }
     
    // 1. DOM
    /*
    function decodeHtml(html) {
        var txt = document.createElement("textarea");
        txt.innerHTML = html;
        return txt.value;
    }
    */
     
    // หรือ
     
    // 2. RegEx
    function decodeEntities(encodedString) {
        var translate_re = /&(nbsp|amp|quot|lt|gt);/g;
        var translate = {
            "nbsp":" ",
            "amp" : "&",
            "quot": "\"",
            "lt"  : "<",
            "gt"  : ">"
        };
        return encodedString.replace(translate_re, function(match, entity) {
            return translate[entity];
        }).replace(/&#(\d+);/gi, function(match, numStr) {
            var num = parseInt(numStr, 10);
            return String.fromCharCode(num);
        });
    }
     
    // หรือ 3. ใช้ library เสริม เช่น he
    // https://github.com/mathiasbynens/he
    // ฯลฯ
 
    document.addEventListener('DOMContentLoaded', function() {
        let xhr = new XMLHttpRequest();
 
        xhr.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                let response = JSON.parse(this.response);
                if (response && response.name) {
                    document.getElementById('saved-result-text').style = '';
                    document.getElementById('saved-result').innerHTML = response.name;
                    //document.getElementById('name').value = decodeHtml(response.name);
                    document.getElementById('name').value = decodeEntities(response.name);
                }
            }
        };
 
        xhr.open('GET', 'save.php');
        xhr.send();
 
        return false;
    }, false);
</script>

Date : 2020-05-14 00:42:24

By : PhrayaDev

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : สอบถามวิธีกำหนดค่า HTML ที่ encode แล้วลงใน input หรือ textarea

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Registered : 109,038

document.write("<font color=996600>[PHP]</font>"); [PHP] สอบถามวิธีกำหนดค่า HTML ที่ encode แล้วลงใน input หรือ textarea

No. 1

ค้นหาข้อมูล

อัพโหลดแทรกรูปภาพ

Notice

[PHP] สอบถามวิธีกำหนดค่า HTML ที่ encode แล้วลงใน input หรือ textarea