Как я могу включить специальные символы (или html содержимое) в базу данных sqlite3 с PHP

Question

У меня возникают проблемы с PHP, sqlite3 и HTML.

Я хочу модальное окно HTML, которое получает свое содержимое (заголовок, тело, нижний колонтитул) из sqlite3 база данных. Для доступа к базе данных я использую PHP. Затем пользователь может редактировать содержимое в модальном окне, и обновленный текст отправляется в базу данных.

Теперь это работает для обычного текста (например, «Hello world»). Но это не удается, как только я включаю специальные символы (например, <> &). На консоли нет сообщения об ошибке, поэтому я действительно не знаю, что исправить. Я попробовал SQLite3 :: escapeString, но это ничего не изменило.

В качестве потенциального улучшения я также мог бы сохранить полное тело html в базе данных sqlite3 вместо только внутреннего HTML, тогда я мог бы сделать несколько более приятных макетов.

Я прилагаю код, который, надеюсь, внесет ясность ниже. Для простоты я не включаю верхний и нижний колонтитулы, поскольку они такие же, как и основная часть.

Это код HTML для модального окна:

    <!-- Body content -->
    <div class="modal-body">
      <input id="editBtn" type="button" , class="editBtn", value="edit" onclick="editFunction();" />
      <p id="modal-body-id"></p>
    </div>

Это javascript, редактирующий содержимое

function editFunction() {
  var editables_body   = document.querySelectorAll('#modal-body-id');

  if (!editables_body[0].isContentEditable) {
    editables_body[0].contentEditable = 'true';
  } else {
    // Disable Editing
    editables_body[0].contentEditable = 'false';
    // Save the data to database
    for (var i = 0; i < editables_body.length; i++) {
      // console.log(editables_body[0].innerHTML)
      sendData(modal_id)
    }
  }

Javascript для отправки данных в базу данных

function sendData(id){
  var body = document.getElementById("modal-body-id").innerHTML;

  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("POST", "send2db.php");
  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xmlhttp.send("id="+id+"&header="+header+"&body="+body+"&footer="+footer);
}

Javascript для чтения данных из базы данных

function get_body(id) {
  var body = document.getElementById("modal-body-id");
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("POST", "get_from_db.php");
  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xmlhttp.send("id="+id+"&type=body");
  xmlhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      // body.innerHTML = this.responseText;
      body.innerHTML = xmlhttp.responseText;
    } else {
      body.innerHTML = "Loading...";
    };
  }
}

И, наконец, php скрипты для отправки и чтения базы данных

send2db. php

<?php

// Database name
$database_name = "description.db";

// Database Connection
$db = new SQLite3($database_name);


// Get information
$id = $_POST['id'];
$header = SQLite3::escapeString($_POST["header"]);
$body   = SQLite3::escapeString($_POST["body"]);
$footer = SQLite3::escapeString($_POST["footer"]);

// Create Table of file descriptions into Database if not exists
$db->exec("CREATE TABLE IF NOT EXISTS file_desc(id TEXT, header TEXT, body TEXT, footer TEXT)");

$res = $db->query("SELECT * FROM file_desc WHERE id = '$id' ");
$row = $res->fetchArray();

$db->exec("CREATE UNIQUE INDEX IF NOT EXISTS unique_id ON file_desc (id)");
$db->exec("REPLACE INTO file_desc (id, header, body, footer) VALUES('$id', '$header', '$body', '$footer') ");
// $db->exec("REPLACE INTO file_desc (id, '$type') VALUES('$id', '$body') ");

?>

get_from_db. php

<?php

  // Database name
  $database_name = "description.db";

  // Database Connection
  $db = new SQLite3($database_name);

  // Create empty database if none exists
  $db->exec("CREATE TABLE IF NOT EXISTS file_desc(id TEXT, header TEXT, body TEXT, footer TEXT)");

  // Get information
  $id = $_POST['id'];

  // Get information
  $type = $_POST['type'];

  $res = $db->query("SELECT * FROM file_desc WHERE id = '$id' ");


  while ($row = $res->fetchArray()) {
      echo "{$row[$type]} \n";
  }

  // $row = $res->fetchArray();
  // return "{$row['body']}";

?>

Большое спасибо за вашу помощь!

Answer 1

Мне удалось решить проблему. Я кодирую пакет данных для отправки, используя encodeURIComponent. Я прилагаю те же функции, которые упоминал выше, в их новой рабочей версии.

Это длинный ответ, но я надеюсь, что кто-то с подобной проблемой сочтет его полезным. модальный:

// Edit content of modal
function editFunction() {    
  // Get editables
  var editables_body   = document.querySelectorAll('#modal-body-id');

  // Edit body
  if (!editables_body[0].isContentEditable) {
    editables_body[0].contentEditable = 'true';
  } else {
    // Disable Editing
    editables_body[0].contentEditable = 'false';
    sendData(modal_id);
  }
};

javascript для отправки в базу данных. Он содержит новую функцию для кодирования данных:

function sendData(id){

  //Body
  var body = document.getElementById("modal-body-id"); // Get the body
  body.innerHTML = htmlEncode(body.innerHTML);        // Encode HTML characters
  body = encodeURIComponent(String(body.outerHTML));  //Encode for sending to database   

  // Open a new request
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("POST", "send2db.php");
  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  // Send the request to the php script that handles the database
  xmlhttp.send("id="+id+"&body="+body);
};

javascript для чтения из базы данных. Он содержит новую функцию для декодирования данных.

function get_body(id) {
  var body = document.getElementById("modal-body-id");
  var bodyDiv = body.parentNode;
  var xmlhttp = new XMLHttpRequest();
  var response;
  xmlhttp.open("POST", "get_from_db.php");
  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xmlhttp.send("id="+id+"&type=body");

  // Create an empty paragraph element
  // without an ID, any attributes, or any content
  var newBody = document.createElement("p");

  // Request from database
  xmlhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      response = htmlDecode(decodeURIComponent(xmlhttp.response));

      // Fill the new body with the response from the database
      newBody.innerHTML = response.innerText;
      newBody.id = 'modal-body-id';

      // Replace body with new body from the database
      bodyDiv.replaceChild(newBody,body)
    };
  }
}

Скрипты php для отправки и чтения из базы данных:

<?php

// Database name
$database_name = "description.db";

// Database Connection
$db = new SQLite3($database_name);

// Get information
$id = $_POST['id'];
$header = ($_POST["header"]);
$body   = ($_POST['body']);
$footer = ($_POST["footer"]);

// Create Table of file descriptions into Database if not exists
$db->exec("CREATE TABLE IF NOT EXISTS file_desc(id TEXT, header BLOB, body BLOB, footer BLOB)");

// Send to database
$db->exec("CREATE UNIQUE INDEX IF NOT EXISTS unique_id ON file_desc (id)");
$db->exec("REPLACE INTO file_desc (id, header, body, footer) VALUES('$id', '$header', '$body', '$footer') ");

?>



<?php

  // Database name
  $database_name = "description.db";

  // Database Connection
  $db = new SQLite3($database_name);

  // Create empty database if none exists
  $db->exec("CREATE TABLE IF NOT EXISTS file_desc(id TEXT, header TEXT, body TEXT, footer TEXT)");

  // Get information
  $id = $_POST['id'];

  // Get information
  $type = $_POST['type'];

  // Request from database
  $res = $db->query("SELECT * FROM file_desc WHERE id = '$id' ");

  // Read from database
  while ($row = $res->fetchArray()) {
      // echo "{$row[$type]} \n";
      echo $row[$type];
  }

?>

И, наконец, две новые функции, которые помогают ru / декодирование содержимого, чтобы его можно было отправить в базу данных и прочитать из базы данных:

function htmlDecode(input){
  var e = document.createElement('p');
  e.innerHTML = input;
  return e
}

function htmlEncode(input){
  var e = input.replace(/</g,"&lt;").replace(/>/g,"&gt;");
  return e
}