Question:
I am making a chat site in which messages are sent from the client to the server and from the server to the clients using socket io. But because of this, anyone will be able to send messages to the server using the browser console. How can this be fixed?
I use Flask to start the server.
Repl link: https://replit.com/@KAlexK/Chatapp?v=1
Code:
app.py (excerpts)
from flask import Flask, request, render_template, redirect, url_for, flash
from flask_socketio import send
import os
from db_manager import DataBaseManager
import events_manager as events
app = Flask(__name__)
app.config["SECRET_KEY"] = os.urandom(32)
events.socketio.init_app(app)
db = DataBaseManager("Chat.db")
@app.route("/", methods=["GET", "POST"])
def index():
if current_user.is_authenticated:
posts = db.posts_all(20)[::-1]
form = PostForm()
if form.validate_on_submit():
db.post_create(current_user.get_username(), form.text.data)
return render_template(
"index_login.html", user=current_user, posts=posts, form=form
)
return render_template("index_no_login.html")
@app.route("/send", methods=["POST"])
def index_send_message():
form = PostForm()
if form.validate_on_submit():
db.post_create(current_user.get_username(), form.text.data)
return redirect(url_for("index"))
if __name__ == "__main__":
events.run(app)
events_manager.py
from flask_socketio import SocketIO, emit
from db_manager import DataBaseManager
socketio = SocketIO()
db = DataBaseManager("Chat.db")
@socketio.on("connect")
def connect_event():
print("Client connected")
@socketio.on("new_message")
def message_event(data):
db.post_create(data["poster"], data["text"])
emit("new_message", data, broadcast=True)
print(f"New message: {data}")
def run(app):
socketio.run(app, host="0.0.0.0", port=2200)
index_login.html
{% extends 'base.html' %}
{% block title %}Title{% endblock %}
{% block content %}
Welcome to chat, <span id="username">{{ user.get_username() }}</span>!
<hr>
<div>
<p>Write a message.</p>
<textarea id="message_text"></textarea><br>
<button id="send_message">Send</button>
</div>
<hr>
{% if posts %}
{% for post in posts %}
<div class="message">
<strong>{{ post[1] }}</strong>
<p>{{ post[2] }}</p>
</div>
{% endfor %}
{% else %}
<p>There is nothing in this chat yet.</p>
{% endif %}
<script src="{{ url_for('static', filename='index_login.js') }}"></script>
{% endblock %}
index_login.js
const socket = io();
socket.on("connect", function(data) {
console.log("Socket.IO is connected!!!")
});
const body = document.body;
const send_message = document.getElementById("send_message");
send_message.addEventListener("click", function(){
const message_text = document.getElementById("message_text");
const username = document.getElementById("username");
socket.emit("new_message", {poster: username.innerHTML, text: message_text.value});
console.log("new_message");
});
socket.on("new_message", function(data) {
console.log(`new_message recived ${data}`);
const messages = body.getElementsByClassName("message");
const new_message = document.createElement("div");
new_message.className = "message";
const user = document.createElement("strong");
user.innerHTML = data.poster;
new_message.append(user);
const text = document.createElement("p");
text.innerHTML = data.text;
new_message.append(text);
messages[0].before(new_message);
});
