Shulou(Shulou.com)06/01 Report--

This article is about how to achieve cross-site scripting attacks in Vue.js. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article.

Data binding under vue.js

Common vue.js data binding is done through double curly braces {{}} or v-text instructions. Vue.js automatically compiles the corresponding template into js code.

For example: template code is

Vue.js compiles the template code into:

Function anonymous () {with (this) {return _ c ('textContent, {domProps: {"textContent": _ s (message)}}, [])}}

In general, vue.js interpolates the specified part of the html content through double curly braces.

On the other hand, the upper and lower layers of the double curly braces {{}} and v-text instructions are mainly implemented through the textContent value of the DOM attribute of the element.

There is generally no injection problem in this case, because the browser's native api handles these values safely. But data interpolation sometimes requires inserting rich text information into the page. Rich text is escaped to plain text if {{}} and v-text instructions are used. Unable to meet the demand.

You may need to use the v-html tag at this time. The template for the v-html tag is compiled in vue.js as follows:

Sample template:

Vue template rendering code:

Function anonymous () {with (this) {return _ c ('innerHTML, {domProps: {"innerHTML": _ s (message)}}, [])}}

The underlying v-html tag you can see actually uses the innerHTML attribute of the Dom element for data insertion. When the innerHTML attribute is inserted into untrusted data, it will cause problems with JS injection.

Security defense: data binding in daily vue.js should use {{}} and v-text as much as possible. V-html is a risky instruction, and you must filter the data when you use it.

Attribute binding of tags under vue.js

Tag attribute binding is actually a kind of data binding. I isolated it because the data binding on the attribute is actually very different from the previous side street.

In addition to data content filling, web front-end development also needs to perform data binding operations on the attributes of tags.

In vue, we use v-bind tag attributes for data binding, and the interpolation of these data is also transcoded and inserted through the browser's native api. Due to the guarantee of browser's own api security, data insertion generally does not cause xss problems caused by closed attributes.

Sample template: insert data into the href of a tag

The compiled code from vue.js:

Function anonymous () {with (this) {return _ c ('attrs, {"href": 1234}}, [])}}

In this scenario, it is often due to the lack of security awareness of developers, when binding tag attributes, ignore the special treatment when binding dangerous attributes of some tags.

We know that some attributes of special tags can be injected into js code when the attribute value is controllable. This brings us back to the issues that should be paid attention to in xss protection in general scenarios.

The web hazard attributes are roughly as follows:

The style attribute of all elements. (you should avoid binding user input data to the style attribute of the tag and prevent phishing attacks. )

The href attribute of the a tag. (normally the url protocol should be guaranteed to be http and https)

The src attribute of the iframe tag. (to prevent js from being executed through _ javascript://)

The data attribute of the object tag. (to prevent the execution of js through _ javascript://.)

The action property of form (to prevent js. From being executed through _ javascript://)

Protection knowledge: for attributes such as src, href, action and data, which can be assigned to uri, it is necessary to limit the protocol and the requested url, and try to ensure the use of http:// and https:// protocols and access to trusted resource servers.

Vue.js server template rendering XSS

In fact, it is not just vue, under the current trend of separate front-end and back-end development, the front-end Javascript framework may appear server-side template XSS if it uses server-side template rendering template. The essence of this kind of XSS is template injection, which does not necessarily appear on the server side to render the scene.

The server rendering template itself is to generate html in advance, which is beneficial to the seo of some sites and speed up page loading. If the user data in the template is not handled properly, it will lead to template injection.

For example:

If you type {{2} 2}} into a website developed by vue.js, the back-end server returns 4. You can conclude that there is a template parsing problem here (the server puts user input directly into the template as part of the parsing return of the template).

So, how to exploit vue.js template injection vulnerabilities?

However, in the vue component template, we cannot call the underlying javascript function directly. Template injection using vue generally uses the prototype features of javascript.

First of all, we know that vue parses the template into js code. So for template injection vulnerabilities, we just need to turn the injection data into a desired piece of js code in the parsing result.

Everything in Javascript is an object. Each object contains a protoptype (prototype), and the prototype has a property called constructor, which points to the object constructor.

A function is also an object, and the constructor of a function object is a function that allows functions to be generated dynamically. This constructor can construct an anonymous JS function simply by assigning a code string to it.

For example: use the constructor of the toString function to construct an anonymous function through assignment.

ToString.constructor ("consolo.log (1)") ()

Call this anonymous function:

This is the principle of template injection payload for Vue. The commonly used test payload are:

{{constructor.constructor ('alert (1)') ()}} {{_ c.constructor ('alert (1)') ()} {{_ v.constructor ('alert (1)') ()}} {{_ s.constructor ('alert (1)') ()}}

There are also a lot of payload, which you can find in xss-cheat-sheet in Resources.

Protection knowledge: for template injection, we can process the user input in the template through the v-pre instruction. The v-pre directive can skip template compilation at a specified point. Using it on user input can prevent template injection problems caused by user input.

The above is how to achieve cross-site scripting attacks in Vue.js. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.