Summernote executes escaped html

Question

I fetch data from a MySQL database, the data stored is this:

<p>&lt;script&gt;alert('123');&lt;/script&gt;<br /></p>

When I fetch the data normally I get this as result:

<script>alert('123');</script>

This is fine and works as expected, however when I fetch the data into a textarea which is initialized with Summernote I get an alert like this:

Somehow Summernote converts the escaped html tags to functioning HTML.

How do I fix this?

I have already tried the answer of this question:

Escaped HTML in summernote

It did not work.

[How can I make Summernote not execute script-tags?](https://stackoverflow.com/questions/47067240/how-can-i-make-summernote-not-execute-script-tags). Please don't say that it's not related to your question — Alive to die - Anant, Feb 06 '21 at 07:00
It is related but the answer to that question is to just use another WYSIWYG editor. — Tom, Feb 06 '21 at 07:04
I have also seen that thread, it also does not contain a solution. — Tom, Feb 06 '21 at 07:09
https://github.com/ColorlibHQ/AdminLTE/issues/3149.Apart from that I have nothing to help you further — Alive to die - Anant, Feb 06 '21 at 07:09
Sorry, not able to help you more. I hope some one can come up with a solution to you. good luck! — Alive to die - Anant, Feb 06 '21 at 07:14
If you can go to https://summernote.org/ and write `` in given editor and then switch to code view/normal view. It's not executing. May be latest version have solved this issue. But I am not fully sure — Alive to die - Anant, Feb 06 '21 at 07:26

score 1 · Answer 1 · answered Feb 06 '21 at 08:31

Why are you not sanitising data both at the time of storage, and when displayed in the Editor, or outside of the editor? Typically, in my CMS, I don't allow <script/> tags as way to help mitigate users adding potentially dangerous scripts.

That said, there is a PR that is being discussed about how we can best go about fixing this issue. https://github.com/summernote/summernote/pull/3782 information or help would be greatly appreciated to move it along, or even another PR fixing the issue.

Tom · Accepted Answer · 2021-02-06T10:20:57.703

I managed to fix it by instead of fetching the data in the textarea fetching it in via jQuery like this:

<textarea name="description" id="description"></textarea>
<script>
    $('#description').summernote({
        height: 250,
        codeviewFilter: false,
        codeviewIframeFilter: true,
        // toolbar
        toolbar: [
            ['font', ['bold', 'italic', 'underline', 'clear']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ],
    }).on("summernote.enter", function(we, e) {
        $(this).summernote('pasteHTML', '<br />&VeryThinSpace;');
        e.preventDefault();
    });
    $("#description").summernote("code", "<?php echo $video->getDetails('', $fileName, 'desc'); ?>");
</script>

Now it doesn't convert > and $lt; to <> if it is the script tag.

See more information here:

https://github.com/summernote/summernote/pull/3782#issuecomment-774432392

score 0 · Answer 3 · answered Apr 06 '21 at 16:31

Using javascript you can easily fix this. It worked for me in a React + Django project. I also used django_summer_note and it was also showing data like yours. Then I got that solution:

//simply just create a function like this which will return your data (which one you used with django_summernote).

const createBlog = () => {
    return { __html: blog.description };
  };

// now in your HTML(JSX) show your data like this.

<div className='' dangerouslySetInnerHTML={createBlog()} />

Summernote executes escaped html

3 Answers3