Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

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



 

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

 



Topic : 134475



โพสกระทู้ ( 4,706 )
บทความ ( 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>p</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>p</p> แล้ว reload ในช่อง input จะกลับกลายเป็น &lt;p&gt;p&lt;/p&gt; ซึ่งไม่ตรงตามตอนที่พิมพ์ลงไป
ทำยังไงให้มันแสดงผลให้ถูกต้องครับ?
มีวิธีอื่นนอกจาก decode มันไหม? เพราะรู้สึกใน php ไม่ต้องทำอะไรเลยตอนแสดงผล และการ decode มันจะเสี่ยงเกิดช่องโหว่ xss หรือไม่?



Tag : JavaScript, Ajax







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2019-11-07 10:50:51 By : mr.v View : 812 Reply : 1
 

 

No. 1



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



สถานะออฟไลน์
Twitter Facebook Blogger

ต้อง 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
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







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

Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่