Markdown rendering of HTML code in deep-chat #123
Comments
|
Hi, I'm a little confused in how to reproduce this. You mentioned Request the script to analyze an image and return a source code snippet., can you elaborate on what you mean by that? Could you perhaps give me an example response object that uses a Response format which would cause such an issue. 
If you are perhaps referring to the Let me know if I missed something. Thanks! |
|
@OvidijusParsiunas basically i asked the AI to analyze the attachment i put, and create a source code for it, the image just simple drawing on a paper with login page on it. Try this, ask the AI to show you an example code of a basic login page using deep-chat you will going so basically the normal reply of the AI is something like this right? EXAMPLE : User : Create me a simple login page in html AI : Certainly! Here's a basic example of a login page in HTML: <!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
form {
max-width: 300px;
margin: 50px auto;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin: 5px 0 20px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
padding: 10px;
margin-top: 20px;
border: 0;
border-radius: 5px;
background: #333;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<div>
<img src="logo.png" alt="Company Logo" style="width: 100px; display: block; margin: 0 auto;">
</div>
<h2 style="text-align:center;">Login</h2>
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</div>
<div>
<input type="submit" value="Login">
</div>
</form>
</body>
</html>In this example, we include a form with fields for username and password, along with a submit button. Additionally, we've added some basic styling to create a clean and visually appealing login page. I've also included a placeholder for a logo image, which you can replace with your own company logo or emblem. If you need any further details or want to see a more complex example, please feel free to ask!instead of showing it on markdown it renders the HTML itself on the deep-chat, instead of showing the code hehehe |
|
Check this one :) you might not encounter this because you never generate your code wahahahhaa |
|
I can't really replicate the message you've given me based on the text as I'm not sure how it is stringified. Could you maybe try to intercept the response message that contains the markup using a responseInterceptor and then paste the message object that uses the response format into here so I can copy and insert it into the initialMessages object in my computer. Could you also let me know what what service are you connecting to, is it an OpenAI chat, or maybe OpenAI assistant, so I can try to replicate the behaviour that way. Thanks! |
|
It's really late where I live, so if you provide me any info I'll be able to look at it in the afternoon. Thanks! |
|
Ok i'll try to replicate it please see the initialMessages, <template>
<deep-chat
v-if="assistantDetailsLoaded"
ref="deepChatRef"
stream="true"
:speechToText="speechToTextEnabled"
:textToSpeech="textToSpeechEnabled"
:camera="cameraEnabled"
:mixedFiles="mixedFilesEnabled"
:request="requestHandler"
style="
display: block;
width: 100%;
height: calc(100vh - 150px);
border-radius: 4px;
vertical-align: top;
position: relative;
border: none;
background-color: unset;
"
:style="{ height: `calc(100vh - ${subtractedHeight})` }"
:messageStyles="messageStyles"
:initialMessages="initialMessages"
>
</template>
Here is my example of initialMessage [ {
"role": "user",
"text": "what do you see?",
"files": [
{
"name": "Attachment file photo-08-47-52.png"
}
]
},
{
"role": "ai",
"text": "I see an image of a person sitting in a room. The individual appears to be seated in a chair in front of a computer desk. They are wearing glasses and a white T-shirt. Behind the person, there is a telescope, suggesting an interest in astronomy or sky observation. There is also a door partially visible to the left, and an item that looks like a framed picture leaning against the wall on the floor. The person seems to be exhaling some vapor, which may be from an electronic cigarette or similar device, as indicated by the mist-like appearance in front of them."
},
{
"role": "user",
"text": "please analyze this and give me source code",
"files": [
{
"name": "Attachment file photo-08-48-24.png"
}
]
},
{
"role": "ai",
"text": "The image you've provided appears to be a hand-drawn sketch of a simple login interface with the components labeled \"LOGIN\" at the top, input fields for \"USER\" and \"Password,\" followed by a button labeled \"LOGIN.\"\n\nGiven the sketch, I can provide an example source code snippet using HTML and a bit of CSS that represents the interface depicted in the drawing:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Login Page</title>\n<style>\n body {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n font-family: Arial, sans-serif;\n background-color: #f7f7f7;\n }\n .login-container {\n background-color: white;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);\n }\n h2 {\n text-align: center;\n }\n .login-form {\n display: flex;\n flex-direction: column;\n }\n .login-form input {\n margin-bottom: 10px;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 3px;\n }\n .login-form button {\n padding: 10px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 3px;\n cursor: pointer;\n }\n .login-form button:hover {\n background-color: #0056b3;\n }\n</style>\n</head>\n<body>\n<div class=\"login-container\">\n <h2>LOGIN</h2>\n <form class=\"login-form\">\n <input type=\"text\" placeholder=\"USER\" required>\n <input type=\"password\" placeholder=\"Password\" required>\n <button type=\"submit\">LOGIN</button>\n </form>\n</div>\n</body>\n</html>\n```\n\nThis code consists of a simple HTML structure for creating input fields and a login button, styled with internal CSS to resemble a common login page. You can extend upon this code to include functionality such as form validation or backend integration depending on your specific requirements."
},
]
Screenshot
|
|
It appears that the problem is the md renderer you are using, when it sees html tags it renders it as html component automatically, which is kinda dangerous, for xss please advice |
|
Deep Chat uses the remarkable library to render markdown and highlight code. It appears that it was rendering the html code blocks as actual html. I have updated the configuration and have deployed it to Thankyou for your efforts! |
OvidijusParsiunas
added
bug
|
The fix has now been released in core Deep Chat packages in version |
|
hey great job even the talk to speech works well now again thank you! |
Hello again @OvidijusParsiunas sorry about this, but I found another issue. even though my script is returning
its rendering it as HTML element which is not good.
Issue Description:
DeepChat's current markdown rendering functionality poses a potential security risk by rendering HTML code in the conversation interface. This could lead to cross-site scripting (XSS) vulnerabilities when users exchange code snippets containing HTML.
Steps to Reproduce:
Expected Behavior:
The DeepChat platform should not interpret and render the provided HTML code. Instead, it should display the code snippet in a non-executable format (e.g., displaying the HTML tags as plain text) to prevent any potential XSS vulnerabilities.
Additional Information:
This issue aims to enhance the security of the deep-chat platform by addressing the way it handles and displays HTML code snippets provided in conversations.
Again thank you for your continuous support! really appreciate it.
The text was updated successfully, but these errors were encountered: