2
<div id='app'>{{ userContent }}</div>

In userContent, if a line starts with - I want to style only that line red. I can modify userContent data in js with the class for those lines and use v-html but then I lose XSS protection. Is there any way to have XSS protection with Vue.js but also be able to style the userContent?

1 Answer 1

1

I dont think this is possible without creating new elements from the user provided string.

You could parse the string yourself using a regular expression to match the lines starting with a hyphen, something like (?<=\-)(.*?)(?=\n) or \-(.*?)\n, wrap that content in a new element with a class, and then style it, but you would then need to inject that back into the html, which I believe would then open you up to XSS, same as with v-html.

To my knowledge and after a quick search there doesnt seem to be any way to do this purely with CSS.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.