Challenge: Render User-provided Content

Problem statement

There are certain situations in which a website might receive a text or HTML string from the server to render. Some websites might allow trusted administrators to write or generate an HTML snippet that should be injected. Other websites might use a rich-text editor to allow users to create content. Usually, these editors output HTML markup that needs to be rendered on the client-side as HTML. The problem with this, however, is that users could potentially enter malicious content. Your task is to ensure that an app safely renders content.

Challenge

Your project contains the App.vue component that renders three strings using the v-html directive. One string contains just pure text. Other strings contain HTML markup. One of them can be trusted, but the other can’t. Your task is to update the App.vue component and decide:

• Does a string have to be rendered using the v-html, or should it be rendered using mustache tags or the v-text directive?

• If a string has to be rendered with the v-html directive, does it need to be sanitized or not?

You’ll need to determine which string can’t be trusted by looking at its contents.