Text interpolation escaping

Let's try to display our note in a new pane using a text interpolation:

1. Create an <aside> element with the preview class, which displays our notePreview computed property:

      <!-- Preview pane -->
      <aside class="preview">
        {{ notePreview }}
      </aside>

We should now have the preview pane displaying our note on the right side of the app. If you type some text in the note editor, you should see the preview updating automatically. However, there is an issue with our app, which arises when you use markdown formatting.

1. Try making your text bold by surrounding it with **, as follows:

      I'm in **bold**!

Our computed property should return this in valid HTML, and we should have some bold text rendered in our preview pane. Instead, we can see the following:

I'm in <strong>bold</strong>!

We have just discovered that the text interpolation automatically escapes the HTML tags. This is to prevent injection attacks and improve the security of our app. Fortunately, there is a way to display some HTML, as we will see in a moment. However, this forces you to think about using it to include potentially harmful dynamic content.

For example, you create a comment system, where any user can write some text to comment on your app pages. What if someone writes some HTML in their comment, which is then displayed in the page as valid HTML? They could add some malicious JavaScript code, and all the visitors of your app would be vulnerable. It's called a cross-site scripting attack, or an XSS attack. That's why text interpolation always escapes HTML tags.

It is not recommended to use v-html on content created by the users of the application. They could write malicious JavaScript code inside a <script> tag that would be executed. However, with normal text interpolation, you would be safe because the HTML would not be executed.