Forgot Password ??

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

	Registered : 109,037

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

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

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

mr.v

โพสกระทู้ ( 4,756 )
บทความ ( 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 : 975

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 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 04

Registered : 109,037

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

No. 1

ค้นหาข้อมูล

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

Notice

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