Vue's v-html directive, why xss didn't take effect

the front and rear ends do not transcode. The background returns the string of < script > xxx < / script >, and the front end renders the text directly with v-html. However, it neither renders the text like v-text nor executes the methods in the script. The simple demo is as follows:

the code is as follows:

<template>
    <div v-html="msg">
        
    </div>
</template>

<script>    
    export default {
        data() {
            return {
                msg: "message"
            }
        },
        mounted() {
            this.msg = ":<script>console.log(1)<\/script>"; //
            var script = document.createElement("script");
            script.innerHTML = "console.log(2)";
            this.$el.parentElement.appendChild(script); // 2
        }
    }
</script>
Mar.16,2022

https: / / developer.mozilla.org.

although this looks like a cross-site scripting attack, the result is nothing. HTML 5 specifies that the < script > tag inserted by innerHTML is not executed.
Menu