Markdown rendering of HTML code in deep-chat

phatneglo commented 7 months ago

Hello again @OvidijusParsiunas sorry about this, but I found another issue. even though my script is returning

<p>Lorem lipsum.... </p>

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.

html-rendering-

Steps to Reproduce:

Request the script to analyze an image and return a source code snippet.
Once the code snippet is provided in HTML format, observe how it is rendered within the DeepChat platform.

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.

OvidijusParsiunas commented 7 months ago

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. The following response renders as text for me: {text: '<p>Lorem lipsum.... </p>'}

If you are perhaps referring to the html response property, the intent is to render the html - hence if developers are choosing to use it - it is their responsibility to make sure that their html responses are safe. If they cannot ensure this safety, they should be using the text property instead.

Let me know if I missed something. Thanks!

phatneglo commented 7 months ago

@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

phatneglo commented 7 months ago

Check this one :) you might not encounter this because you never generate your code wahahahhaa renders

OvidijusParsiunas commented 7 months ago

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!

OvidijusParsiunas commented 7 months ago

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!

phatneglo commented 7 months ago

Ok i'll try to replicate it please see the initialMessages, as you see the property is a text but on the deep-chat component when it renders, it shows the HTML instead of html <tags here>


<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

phatneglo commented 7 months ago

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

OvidijusParsiunas commented 7 months ago

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 deep-chat-dev and deep-chat-react-dev packages version 9.0.131. These packages work exactly the same as the normal ones its just that their names are different. Let me know if this works for you. If all goes well, I will deploy these changes to the main packages later this week.

Thankyou for your efforts!

OvidijusParsiunas commented 7 months ago

The fix has now been released in core Deep Chat packages in version 1.4.11. Thankyou for highlighting the issue again!

phatneglo commented 7 months ago

hey great job even the talk to speech works well now again thank you!

OvidijusParsiunas / deep-chat