简介
作为前端攻城狮,web安全是每个开发人员必须了解的,这也是面试经常会被问到的问题,本文我就将我所了解的常见攻击方式以及预防,和大家做个分享,如有不对的地方,欢迎大神指导。
首先,浏览器的同源策略(这个我在之前跨域的文章中有讲,有不明白的朋友可以先看下那篇文章)是浏览器安全的基础,许多客户端脚本攻击,都需要遵顼这一法则,因此理解同源策略对于客户端攻击有着重要意义,一旦同源策源出现漏洞被绕过,将带来非常严重的后果,很多基于同源策源制定的安全方案都将失去效果,那么常见的Web攻击有哪些呢?如下所示
- XSS
- DOM Based
- 存储型
- 反射型
- CSRF
- 点击劫持
以上就是常见的客户端脚本的几种攻击方式,当然服务端也存在安全问题的,由于我对服务端不是很熟悉,所以这里就不介绍了~~
XSS攻击
XSS(Cross Site Script)跨站脚本攻击,如字名,字母首拼明明是CSS,为什么叫XSS呢,这里是因为为了和咱们的伙伴CSS做个区分,所以用XSS来表示跨站脚本攻击,通常XSS是指黑客通过“HTML注入”篡改了网页,插入了恶意的代码,从而在用户浏览网页时,控制用户浏览器的一种攻击,常见的有DOM Based,存储型,反射型。
DOM Based XSS
通过修改页面的DOM节点形成的XSS,称之为DOM Based XSS,如下代码:
前端代码
<div id="content"></div>
<input type="text" id="text">
<button onclick="test()">点击</button>
<script>
function test(){
var str=document.getElementById("text").value;
document.getElementById("content").innerHTML=`<a href='${
str}'>testLink</a>`
}
</script>
服务端:
这里我是用node搭的站点
const express = require("express");
const expressArtTemplate=require('express-art-template')
const bodyParser = require('body-parser');
const app = express()
app.engine('html', expressArtTemplate);
app.use(bodyParser.urlencoded({
extended: false }))
app.use(bodyParser.json())
app.get("/", (req, res) => {
res.render("DomBased.html")
})
app.listen("1596", () => {
console.log("监听成功.....")
})
在test函数中,修改了页面DOM的节点,通过innerHTML把一段用户数据当作html写入到页面当中,这就造成了DOM Based XSS。
然后这时候再input框输入' onclick=alert('xss') //
,首先用单引号闭合掉href的第一个单引号,然后插入一个onclick事件,最后再用注释符”//“注释掉第二个单引号,然后点击这个生成的链接,效果如下:
这里还有第二种情况,就是闭合掉a标签,插入一个img标签,利用onerror触发。
input输入'> <img src=# onerror=alert('xss') /><'
,
DOM节点就变成了如下:
结果效果如下:
存储型XSS
存储型XSS会把用户用户输入的数据“存储”到服务端,这种xss具有很强的稳点性,比较常见的场景就是黑客写一篇含有恶意代码的博客,那么文章发表后,所有访问的用户都会在他们的浏览器执行这段代码,因为那一段恶意的代码已经被黑色保存在了服务端,所以这种XSS攻击就叫做“存储型XSS”,存储型XSS也叫做“持久型XSS”,因为从效果上来说,它存在的时间比较长。
这里我是用node最基本的写法模拟了很简单的例子,因为最基本的写法是没有过滤XSS攻击的
客户端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../node_modules/_bootstrap@3.4.1@bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<!--发表