前端常见的安全问题主要有以下几个方面:
XSS攻击(跨站脚本攻击):攻击者将恶意代码注入到网页中,当用户浏览网页时,恶意代码将被执行,获取用户的敏感信息或在用户机器上执行恶意操作。
防范措施:输入检查和转义、CSP(Content Security Policy)、对cookie设置HttpOnly属性、使用安全的代码库和框架。
CSRF攻击(跨站请求伪造攻击):攻击者通过伪造请求,完成一些用户不知情的操作,如发邮件、删Itunes上的歌曲,等等,其原理是攻击者诱导用户进入第三方网站,在该网站中伪造请求冒充用户完成用户不知情的操作。
防范措施:请求来源限制、加入验证token、验证码、Referer Check、SameSite等。
点击劫持(ClickJacking):攻击者通过某种方式将用户点击目标伪装到黑客的网站,实现用户在不知情的情境下点击了执行恶意操作。
防范措施:使用frame buster(破坏伪装框架)、使用X-Frame-Options或CSP 等。
注入攻击:攻击者将恶意的SQL或代码注入到网站中,当网站使用这些注入的数据时,恶意代码被执行,导致敏感数据泄露或网站瘫痪。
防范措施:输入检查和转义、使用参数化查询等。
至于防范措施的实际操作方法,要根据实际情况选择不同的策略,例如限制请求来源可以通过设置白名单或者token的方式实现,使用验证码可以增加人机验证的难度,X-Frame-Options可以在返回的HTTP响应头中添加,在选择的时候要根据实际情况进行权衡。
对于一个博客网站来说,为了防御XSS攻击,可以在前端实现输入检查和转义,同时加入CSP规则,限制网站中允许加载的内容,对cookie设置HttpOnly属性,拒绝使用不安全的代码库。对于CSRF攻击,可以加入验证token等防范措施。如果网站有登录功能,还可以加入验证码等人机验证方式,降低被自动化攻击的风险。
例如,对于文本框中的输入,可以使用以下代码对输入进行检查:
function escapeHtml(str) {
return str.replace(/[&<>"']/g, function (match) {
switch (match) {
case "&":
return "&";
case "<":
return "<";
case ">":
return ">";
case "\"":
return """;
case "'":
return "'";
default:
return match;
}
});
}
该函数可以将输入中的特殊字符转义,防止被注入到网页中。
再例如,对于登录请求的验证,可以向请求中加入token,例如:
function login() {
var token = generateToken(); // 生成token
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "/login", true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
xhr.setRequestHeader('X-CSRF-Token', token); // 加入token
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
window.location.replace(response.redirectUrl);
} else {
alert("登录失败:" + response.errorMsg);
}
}
}
xhr.send(JSON.stringify({ username: username, password: password, token: token })); // 发送请求
}
以上代码在发送登录请求时加入了token信息,并在服务器端对请求的token进行验证,以实现CSRF的防范。