Submit Form ไม่ได้เพราะโค้ด Html script tag


เคยเจอกันไหมครับ พอดีเราแบบอยากจะให้เอาโค้ด Html หรือโค้ด Javascript เช่น โค้ดพวก Messenger หรือ Google ให้ใส่ใน Textarea หรือ CKEditor แล้วบันทึกลง Database แต่พอ Submit แล้วดันขึ้น Error 403 Forbidden: You don’t have permission to access this resource.

ตัวอย่างโค้ดที่อยากใส่

<!-- Messenger ปลั๊กอินแชท Code -->
<div id="fb-root"></div>

<!-- Your ปลั๊กอินแชท code -->
<div id="fb-customer-chat" class="fb-customerchat">
</div>

<script>
  var chatbox = document.getElementById('fb-customer-chat');
  chatbox.setAttribute("page_id", "your page id");
  chatbox.setAttribute("attribution", "biz_inbox");
</script>

<!-- Your SDK code -->
<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml            : true,
      version          : 'v13.0'
    });
  };

  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = 'https://connect.facebook.net/th_TH/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

แล้วไปค้นยังไง ก็มีแต่คนบอกว่าให้ปิด Mod Security ซึ่งไอ้ตัว Mod Security ถ้าปิดก็คือเรื่องใหญ่เลย เพราะมันเป็นตัวกันเพื่อให้เว็บเราปลอดภัย

หลังจากพยายามหาทุกทางในที่สุดก็ทำได้แล้วววววว ตัวอย่างโค้ดตัวนี้จะมีการใช้ CKEditor และ jQuery ร่วมด้วยนะ ถ้าใครจะเอาไปใช้แบบ Javascript ก็ไปแปลงเอาเองนะ

แนวคิด

จากการ Submit ปกติ ก็ใช้ Ajax แล้วส่งข้อมูลรูปแบบ JSON ไปแทน และก่อนส่งก็อย่าลืม Escape แท็กต่างๆ ด้วย หลังส่งไปค่อยไปแก้ทีหลังให้กลับคืนมาเหมือนเดิม ไม่งั้นมันจะ Error 403 อยู่ดี เพราะระบบมันตรวจเจอ <script>

ตัวอย่างโค้ดที่ทำได้แล้ว


HTML

<form method="post" action="path/to/save/file" id="form1">
  <textarea name="ckeditor" id="ckeditor" class="ckeditor"></textarea>
  <button type="submit">Save</button>
</form>

Javascript / jQuery

<script>
  function escapeHtml(string) {
    var entityMap = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;',
      '/': '&#x2F;',
      '`': '&#x60;',
      '=': '&#x3D;'
    };
    return String(string).replace(/[&<>"'`=\/]/g, function(s) {
      return entityMap[s];
    });
  }

  $(document).ready(function(){

    $('#form1').submit(function(event) {
      event.preventDefault();

      const actionurl = event.currentTarget.action;

      let data = '';

      // CKEditor 4
      data = CKEDITOR.instances['ckeditor'].getData();
      // CKEditor 5
      data = editor.getData();
      // Textarea
      data = $('#ckeditor').val()

      // Escape Html tag
      data = escapeHtml(data);
      
      const formData = { 'input_detail': data };

      $.ajax({
        url: actionurl,
        type: "post",
        contentType: "application/json",
        data: JSON.stringify(formData),
        success: function(data) {
          // Refresh page after success
            window.location.href = window.location.href;
        },
        error: function(error) {
          // Show error if error
          alert('Error form submit!');
        }
      });
    });

  });
</script>

PHP

หลังจากเรา Submit ไปได้แล้ว เราก็ไปรับที่ฝั่ง PHP กันต่อ

<?php
function unEscapeHtml($string)
{
  $newString = str_replace('&amp;', '&', $string);
  $newString = str_replace('&lt;', '<', $newString);
  $newString = str_replace('&gt;', '>', $newString);
  $newString = str_replace('&quot;', '"', $newString);
  $newString = str_replace('&#39;', "'", $newString);
  $newString = str_replace('&#x2F;', '/', $newString);
  $newString = str_replace('&#x60;', '`', $newString);
  $newString = str_replace('&#x3D;', '=', $newString);

  return $newString;
}

$json_data = json_decode(file_get_contents('php://input', true));

$detail = unEscapeHtml($json_data->input_detail);

echo $detail;

?>

โค้ดจะไม่ได้สมบูรณ์นะ จะตัดส่วนที่จำเป็นจริงๆ เอามาให้ใช้กันเลย ก็เอาไปแปะๆ กับโค้ดของตัวเองเลย

สรุป

มันก็ถือว่าลดการป้องกันไปหน่อยนึง แต่แลกกับการที่ไม่ต้องปิด Mod Security ที่ปิดระบบทั้งหมด ก็ถือว่าดีกว่ามากเลยนะ

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Navigate

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้

  • คุกกี้เพื่อการวิเคราะห์

    คุกกี้นี้เป็นการเก็บข้อมูลสาธารณะสำหรับการวิเคราะห์ และเก็บสถิติการใช้งานภายในเว็บไซต์นี้เท่านั้น ไม่ได้เก็บข้อมูลส่วนตัวที่ไม่เป็นสาธารณะใดๆ ของผู้ใช้งาน

บันทึกการตั้งค่า
0
Would love your thoughts, please comment.x
()
x