The front end replaces characters in the interceptor filter interface

Company project old with live feedback recently, submit character got killed by SQL injection, I received a task to solve the filtering request interface, will decide whether there is blocked characters, and then to replace, in the responder to filter the replacement of characters, so front-end display, there is no problem, the stored in the database of the character is to be replaced.

import {intercepts} from './intercepts';

// Request interceptor
axios.interceptors.request.use((request) = > {
    return request= intercepts.formatSql(request);
});

// Response interceptor
axios.interceptors.response.use(
    response= > {
        response.data = intercepts.formatRes(response.data);
        return response
    }    
);
Copy the code

The methods encapsulated in the file are then introduced

const intercepts = { formatSql: function(request) { let reg = /select|update|and|or|delete|insert|trancate|char|into|substr|ascii|declare|exec|count|master|drop|execute/; let regArr = ['select', 'update', 'and', 'or', 'delete', 'insert', 'trancate', 'char', 'into', 'substr', 'ascii', 'declare', 'exec', 'count', 'master', 'drop', 'execute']; For (let I in request.data) {if (array.isarray (request.data[I])) {// let isTwoArray = Request.data [I]. Some (items => {return array.isarray (items); }); Request. Data [I] forEach (oneItem = > {the if (Object. The prototype. ToString. Call (oneItem) = = = '[Object Object]') {/ / arr items as obj for (let a in oneItem) { if (reg.test(oneItem[a])) { oneItem[a] = this.checkSqlString(regArr, oneItem[a]); If (reg.test(oneItem)) {oneItem = this.checkSqlString(regArr, oneItem); // Replace character}}}); If (isTwoArray) {let twoIndex = request.data[I].findIndex(items => {return array.isarray (items); }); request.data[i][twoIndex].forEach(twoItem => { if (Object.prototype.toString.call(twoItem) === '[object Object]') { // For (let b in twoItem) {if (reg.test(twoItem[b])) {twoItem[b] = this.checkSqlString(regArr, twoItem[b]); // Replace character}}} else {// Arr child is string if (reg.test(twoItem)) {twoItem = this.checkSqlString(regArr, twoItem); // Replace character}}}); }} else if (Object. The prototype. ToString. Call (request) data [I]) = = = '[Object Object]') {/ / for the Object type for (the let in c request.data[i]) { if (reg.test(request.data[i][c])) { request.data[i][c] = this.checkSqlString(regArr, request.data[i][c]); If (reg.test(request.data[I])) {request.data[I] = this.checkSQLString (regArr,) {// Replace character}}} else {// If (reg.test(request.data[I])) {request.data[I] = this.checkSQLString (regArr, request.data[i]); } } } }, formatRes: function(response) { let str = JSON.stringify(data, (key, val) => typeof val === 'undefined' ? '' : val); let reg = '`#@@#`'; if (str.indexOf(reg) > -1) { str = str.replace(/`#@@#`/g, ''); } return JSON.parse(str); }, checkSqlString: function (regArr, string) { regArr.forEach(regItem => { if (string.indexOf(regItem) ! == -1) { switch (regItem) { case 'select': string = string.replace(/select/, 's`#@@#`elect'); // 'select' break; case 'update': string = string.replace(/update/, 'u`#@@#`pdate'); // 'update' break; case 'and': string = string.replace(/and/, 'a`#@@#`nd'); // 'and' break; case 'or': string = string.replace(/or/, 'o`#@@#`r'); // 'or' break; case 'delete': string = string.replace(/delete/, 'd`#@@#`elete'); // 'delete' break; case 'insert': string = string.replace(/insert/, 'i`#@@#`nsert'); // 'insert' break; case 'trancate': string = string.replace(/trancate/, 't`#@@#`rancate'); // 'trancate' break; case 'char': string = string.replace(/char/, 'c`#@@#`har'); // 'char' break; case 'into': string = string.replace(/into/, 'i`#@@#`nto'); // 'into' break; case 'substr': string = string.replace(/substr/, 's`#@@#`ubstr'); // 'substr' break; case 'ascii': string = string.replace(/ascii/, 'a`#@@#`scii'); // 'ascii' break; case 'declare': string = string.replace(/declare/, 'd`#@@#`eclare'); // 'declare' break; case 'exec': string = string.replace(/exec/, 'e`#@@#`xec'); // 'exec' break; case 'count': string = string.replace(/count/, 'c`#@@#`ount'); // 'count' break; case 'master': string = string.replace(/master/, 'm`#@@#`aster'); // 'master' break; case 'drop': string = string.replace(/drop/, 'd`#@@#`rop'); // 'drop' break; case 'execute': string = string.replace(/execute/, 'e`#@@#`xecute'); // 'execute' break; default: break; }; }}); return string; }}; export {intercepts};Copy the code

So this is a good substitution but it’s a little bit too much code, and for performance reasons, it’s not ideal. So think about how to optimize it. Now we can use stringify and only filter requests to post interfaces. One of the drawbacks of Stringify is that it filters out dummy values with undefined, so you need to take this into account. Here is the modified code:

Here are the interceptors

import {intercept} from './intercept';

// Request interceptor
axios.interceptors.request.use((request) = > {
    if (request.method === 'post' && request.data) {
        request.data = intercept.formatSql(request.data);
    }
    return request;
});

// Response interceptor
axios.interceptors.response.use(
    response= > {
        response.data = intercept.formatRes(response.data);
        returnresponse; });Copy the code

Here’s how to wrap it:

/ * * *@description Replace the SQL re string by adding '#@@#' to the first part of the string. * formatSql locates the addition in interceptor. * formatRes intercepts the deletion in responder@Date The 2021-11-09 * /
const intercept = {
    / / SQL injection
    formatSql: function(data) {
        let str = JSON.stringify(data);
        let reg = /\b(select|update|and|or|delete|insert|trancate|char|into|substr|ascii|declare|exec|count|master|drop|execute)\b/g;
        let res = str.match(reg);
        if (res && res.length) {
            let list = Array.from(new Set(res));
            for (let i = 0; i < list.length; i++) {
                switch (list[i]) {
                case 'select': str = str.replace(/\b(select)\b/g.'se`#@@#`lect'); break;
                case 'update': str = str.replace(/\b(update)\b/g.'up`#@@#`date'); break;
                case 'and': str = str.replace(/\b(and)\b/g.'an`#@@#`d'); break;
                case 'or': str = str.replace(/\b(or)\b/g.'o`#@@#`r'); break;
                case 'delete': str = str.replace(/\b(delete)\b/g.'de`#@@#`lete'); break;
                case 'insert': str = str.replace(/\b(insert)\b/g.'in`#@@#`sert'); break;
                case 'trancate': str = str.replace(/\b(trancate)\b/g.'tra`#@@#`ncate'); break;
                case 'char': str = str.replace(/\b(char)\b/g.'ch`#@@#`ar'); break;
                case 'into': str = str.replace(/\b(into)\b/g.'i`#@@#`nto'); break;
                case 'substr': str = str.replace(/\b(substr)\b/g.'su`#@@#`bstr'); break;
                case 'ascii': str = str.replace(/\b(ascii)\b/g.'as`#@@#`cii'); break;
                case 'declare': str = str.replace(/\b(declare)\b/g.'dec`#@@#`lare'); break;
                case 'exec': str = str.replace(/\b(exec)\b/g.'ex`#@@#`ec'); break;
                case 'count': str = str.replace(/\b(count)\b/g.'co`#@@#`unt'); break;
                case 'master': str = str.replace(/\b(master)\b/g.'ma`#@@#`ster'); break;
                case 'drop': str = str.replace(/\b(drop)\b/g.'dr`#@@#`op'); break;
                case 'execute': str = str.replace(/\b(execute)\b/g.'ex`#@@#`ecute'); break;
                default: break; }}}return JSON.parse(str);
    },
    formatRes: function(data) {
        let str = JSON.stringify(data, (key, val) = > typeof val === 'undefined' ? ' ' : val);
        let reg = '` # @ # @ `;
        if (str.indexOf(reg) > -1) {
            str = str.replace(/`#@@#`/g.' ');
        }
        return JSON.parse(str); }};export {intercept};
Copy the code

This is the end of the problem, but there are still details that can be optimized. You can optimize the Switch, use variables to define the re, and then optimize it by intercepting strings for splicing, which can save a lot of code, and deal with abnormal situations to avoid as much as possible

/ * * *@description Replace the SQL re string by adding '#@@#' to the first part of the string. * formatSql locates the addition in interceptor. * formatRes intercepts the deletion in responder@Date The 2021-11-09 * /
const intercept = {
    / / SQL injection
    formatSql: function(data) {
        let str = JSON.stringify(data);
        let reg = /\b(select|update|and|or|delete|insert|trancate|char|into|substr|ascii|declare|exec|count|master|drop|execute)\b/g;
        let res = str.match(reg);
        if (res && res.length) {
            let list = Array.from(new Set(res));
            for (let i = 0; i < list.length; i++) {
                let sqlReg = new RegExp('\\b(' + list[i] + ')\\b'.'g');
                str = str.replace(sqlReg, list[i].substr(0.1) + '` # @ # @ ` + list[i].substr(1));
            }
            return JSON.parse(str);
        } else {
            returndata; }},formatRes: function(response) {
        let str = JSON.stringify(response, (key, val) = > typeof val === 'undefined' ? ' ' : val);
        let reg = '` # @ # @ `;
        if (str.indexOf(reg) > -1) {
            str = str.replace(/`#@@#`/g.' ');
            return JSON.parse(str);
        } else {
            returnresponse; }}};export {intercept};

Copy the code

This is the end of the successful, thank you for watching (thank you for ding’s guidance)!

The front end replaces characters in the interceptor filter interface

Related Posts

Story and React – story

CSS -100 nearly 20,000 words to help you consolidate CSS knowledge

Build the Spring Boot project using Spring Initializr