- 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.
- Learning Cython Programming(Second Edition)
- BeagleBone Media Center
- 精通Scrapy網絡爬蟲
- Big Data Analytics
- FLL+WRO樂高機器人競賽教程:機械、巡線與PID
- UML 基礎與 Rose 建模案例(第3版)
- C語言程序設計
- Unity UI Cookbook
- Hands-On Full Stack Development with Spring Boot 2.0 and React
- Creating Data Stories with Tableau Public
- C語言程序設計習題與實驗指導
- 實戰Java高并發程序設計(第2版)
- Windows Phone 8 Game Development
- NGUI for Unity
- jQuery從入門到精通(微課精編版)