如何提高webapp的安全性

Question

webapp 结构

我试过的代码

Js登录层

<!-- /info/sign.html (Simplified code) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Info System</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- some styles -->
</head>
<body>
    <div id="app">
        <el-container>
            <el-main class="main">
                <el-input v-model="account"
                          type="text"
                          class="input"
                          placeholder="Account"
                          prefix-icon="el-icon-user"
                          maxlength=10 clearable>
                </el-input><br>
                <el-input v-model="password"
                          type="password">
                </el-input><br>
                <el-button type="success" @click="sign('/info/sign-in')">login in</el-button>
                <el-button type="success" @click="sign('/info/sign-up')">login up</el-button>
                <el-switch v-model="autoSign"
                           @change="changeAutoSign()"
                           active-color="#13ce66"
                           inactive-color="#909399"
                           active-text="auto login in">
                </el-switch>
            </el-main>
        </el-container>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    if (localStorage.getItem("hidden-info-autoSign") == null) {
        localStorage.setItem("hidden-info-autoSign", "false");
    } else if((localStorage.getItem("hidden-info-autoSign") == "true")
           && (localStorage.getItem('hidden-info-account') != null)
           && (localStorage.getItem('hidden-info-token') != null)) {
        location.href = "user.html";
    }
    var app = new Vue({
        el: '#app',
        data: {
            account: "",
            password: "",
            autoSign: localStorage.getItem('hidden-info-autoSign') == "true"
        },
        methods: {
            sign(url) {
                var copyThis = this;
                if (this.account != "" && this.password != "") {
                    axios.post(url, {
                        account: copyThis.account,
                        password: copyThis.password
                    }).then(function (response) {
                        if (response.data.signStatus == 100) {
                            copyThis.$message.success("success!");
                            localStorage.setItem('hidden-info-account', copyThis.account);
                            localStorage.setItem('hidden-info-token', response.data.token);
                            location.href = "user.html";
                        } else if (response.data.signStatus == 200) {
                            copyThis.$message.success("success!");
                            localStorage.setItem('hidden-info-account', copyThis.account);
                            localStorage.setItem('hidden-info-token', response.data.token);
                            location.href = "user.html";
                        } else if (response.data.signStatus == 101) {
                            copyThis.$message.error("User exists!");
                        } else if (response.data.signStatus == 201) {
                            copyThis.$message.error("User does not exist!");
                        } else if (response.data.signStatus == 202) {
                            copyThis.$message.error("Pwd error!");
                        }
                    }).catch(function (error) {
                        console.log(error);
                    })
                } else {
                    this.$message.error("Please finish the form!");
                }
            },
            changeAutoSign() {
                if (localStorage.getItem('hidden-info-autoSign') == "true") {
                    localStorage.setItem("hidden-info-autoSign", "false");
                } else {
                    localStorage.setItem("hidden-info-autoSign", "true");
                }
            }
        }
    })
</script>
</html>

Java 控制器层

// */controller/UserController.java
@RestController
public class UserController {
    private final UserRepository repository;

    public UserController(UserRepository repository) {
        this.repository = repository;
    }

    // use response code 100~199
    @PostMapping("/info/sign-up")
    SignResponse signUp(@RequestBody User user) {
        if (repository.existsByAccount(user.getAccount())) {
            return new SignResponse(101, "");
        } else {
            user.updateToken();
            repository.save(user);
            return new SignResponse(100, user.getToken());
        }
    }

    // use response code 200~299
    @PostMapping("/info/sign-in")
    SignResponse signIn(@RequestBody User user) {
        if (!repository.existsByAccount(user.getAccount())) {
            return new SignResponse(201, "");
        }
        User realUser = repository.findByAccount(user.getAccount());
        if (realUser.getPassword().equals(user.getPassword())) {
            realUser.updateToken();
            repository.save(realUser);
            return new SignResponse(200, realUser.getToken());
        } else {
            return new SignResponse(202, "");
        }
    }
}

我知道前端显示的信息不安全，但我不知道在后端做些什么。

如果有人想攻击我的系统获取信息，那就麻烦了

问题

如何提高登录部分的安全性？我应该使用什么策略？
其他建议也有帮助。

Answer 1

您应该尝试在您的 front-end/back-end 上使用 SSL 证书，以确保传输的数据在此处不可见，是私有且完整的 link。
也许您应该想知道基本身份验证之类的东西。它是带有凭据的 HTTP Header 中的附加信息。 Check this out.
切勿将密码存储为纯文本。使用类似 BCrypt 的东西并添加随机盐。 Try this.

如何提高webapp的安全性

How to improve the security in webapp

javascript

java

security

spring

webapp 结构

我试过的代码

问题