Challenge: Render User-provided Content
Practice what we've learned about application security.
We'll cover the following
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 thev-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.
Get hands-on with 1200+ tech skills courses.