Блог

Я пытаюсь создать свой собственный чат с использованием npm, в его нынешнем виде все работает гладко, но моя главная проблема — внедрение SQL или ввод людей в HTML, потому что он будет анализировать все, что введено. Форма не используется, а кнопка ввода, текстовое поле и вывод управляются JavaScript. ниже приведена часть HTML, на которую я ссылаюсь.

 <div id="wrapper">
    <div class="bubble-container" ></div>           
</div>      
<div id="sendCtrls">
    <input type="text" placeholder="Your message here" id="text">
    <button id="myBtn">Send</button>
</div>
  

Это мой PHP-файл, который содержит весь JavaScript.

 <script>
// -------------------------
//var name = prompt('What is your name?');
var name = "<?php echo $_SESSION['username']; ?>";
var bubbles = 1;
var maxBubbles = 60;
var sock = new WebSocket("ws://localhost:5001");
sock.onopen = function() {
    var bubble = $("#wrapper");
    bubble = $('<div class="bubble-container"><span class="bubble"><div class="bubble-text">
    <p><b>*** Welcome ' name ' to the chat!</b><br>
    These are the rules, please read amp; follow them.<br>
    1. Be polite in chat.<br>
    2. Keep personal disputes out of chat.<br>
    3. No advertising.<br>
    4. Do not ask to become a Moderator.
    </p></div></div>');
    myChat(bubble);

    sock.send(JSON.stringify({
        type: "name",
        data: name  
    }));
}
// --------------------------
var maxLength = 200; // chars per bubble
sock.onmessage = function(event){
    console.log(event);
    var json = JSON.parse(event.data);
    var bubble = $('<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p><strong>' json.name ':</strong> ' json.data '</p></div></div>');
    myChat(bubble);
}
// ---------------------------
document.querySelector('button').onclick = function (){
    var text = document.getElementById('text').value;
    if(text != "") {
        if (text.length < maxLength) {
            document.getElementById('text').value='';
            sock.send(JSON.stringify({
                type: "message",
                data: text
            }));

            var bubble = $('<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p><strong>' name ':</strong> ' text '</p></div></div>');
            myChat(bubble);
        }else{
            
            var bubble = $('<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p>*** Your message exceeds ' maxLength ' characters!</p></div></div>');
            myChat(bubble);
        };  
    }
};
// --------------------------
var input = document.getElementById("text");

input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    document.getElementById("myBtn").click();
  }
}); 
// --------------------------
function myChat(bubble){
    $("#msgText").val("");
    $(".bubble-container:last").after(bubble);
    if (bubbles >= maxBubbles) {
        var first = $(".bubble-container:first").remove();
        bubbles--;
    }

    bubbles  ;
    $('.bubble-container').show(250, function showNext() {
        if (!($(this).is(":visible"))) {
            bubbles  ;
        }

        $(this).next(".bubble-container").show(250, showNext);
        $("#wrapper").scrollTop(9999999);
    });     
};
</script>
  

Я не включил серверный скрипт, который также является просто JavaScript, но может сделать это при необходимости. PHP не взаимодействует с тем, что отправляется. 2-й вопрос: нужно ли мне писать что-либо на стороне сервера для защиты от SQL-инъекций или для предотвращения ввода HTML?