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 ที่ปิดระบบทั้งหมด ก็ถือว่าดีกว่ามากเลยนะ