- Vue.js 2 Web Development Projects
- Guillaume Chau
- 302字
- 2021-07-02 22:34:25
Text interpolation escaping
Let's try to display our note in a new pane using a text interpolation:
- 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.
- 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.
- Mastering Concurrency Programming with Java 8
- Learning Flask Framework
- Programming ArcGIS 10.1 with Python Cookbook
- Clojure for Domain:specific Languages
- 算法精粹:經典計算機科學問題的Python實現
- Visual Basic程序設計習題解答與上機指導
- 微信公眾平臺開發:從零基礎到ThinkPHP5高性能框架實踐
- JSP開發案例教程
- 概率成形編碼調制技術理論及應用
- C程序設計案例教程
- Visual C#.NET程序設計
- The DevOps 2.5 Toolkit
- 響應式架構:消息模式Actor實現與Scala、Akka應用集成
- GameMaker Essentials
- 軟件項目管理實用教程