火眼金睛——识别Web开发中的Hackers|青训营笔记

音乐小精灵
233 阅读4分钟

       这是我参与「第四届青训营」笔记创作活动的第2天。

        Web开发是为Internet（World Wide Web）或Intranet（私有网络）开发网站所涉及的工作。Web开发的范围可以从开发简单的纯文本单个静态页面到复杂的基于Web的Internet应用程序（Web应用程序），电子商务和社交网络服务。网络开发通常涉及的更全面的任务列表，包括网络工程、网络设计、网络内容开发、客户联络、客户端 / 服务器端、脚本编写、Web服务器和网络安全配置以及电子商务开发。
        Web开发中的网络攻击对于用户和企业来说都是需要长期关注的一个问题，稍有不慎，则会严重危害用户的个人隐私，公司的商业机密，程序员的职业生涯等。因此，正确的认识和预防Web开发中的安全问题极为重要。

jjk.jpg

1.XSS跨站攻击
（1）Cross-Site Scipting 跨站脚本攻击
        恶意攻击者在用户提交的数据中加入一些代码，如果说数据没有被过滤，服务器端渲染内容时候，插入了一个script标签，将代码嵌入到了Web页面中，从而进行了盗取用户资料的盗取。

恶意嵌入.jpg

        当Web开发过程中盲目信任用户的提交内容时，XSS利用如下算法原理进行对用户资料的窃取。 
string → DOM
  -document.write
  -element.innerHTML = anyString;
  -SSR(user_data)

        通常XSS难以从UI上进行感知，都是在暗地里进行脚本的执行，并从储存在用户本地终端上的数据cookie进行用户信息的窃取。如下XSS窃取用户信息的demo所示。

public async submit (ctx) {
  const { content , id } = ctx.request.body;//未对content进行过滤
  await db.save({ content , id});
  }
 
public async render(ctx) {
  const { content } = await db.query({
  id:ctx.query.id //未对content进行过滤
  });
  cxt.body = <div>${content}<div>; //!!没有过滤操作!!
  
  //脚本提交
fetch("/submit",{
  body:JSON.stringify({
    id:"1",
    content: <script>alert("xss");<script>
    });
 });
 
 //此时直接提交了恶意脚本
 ctx.body =
   <div>
     <script>alert("xss");</script>
   </div>;

        此时恶意脚本被存放在数据库中，在进行页面访问读取数据时，用户被攻击，此时危害最大。

（2）Reflected XSS 反射型跨站攻击
        反射型不像存储型会存储在网站上，当别人来访问时就会执行，这里需要我们自己来构造链接诱使用户点击。同时，反射型跨站攻击不涉及数据库，只从URL上进行攻击。
public async render(ctx) {
  const {param } = ctx.query;
  ctx.status = 200;
  ctx.body = <div>${param}</div>;//!!url攻击！！
  }
（3）DOM-based XSS 基于文档对象模型跨站攻击
        DOM—based XSS漏洞是基于文档对象模型(Document Object Model)的一种漏洞，这种漏洞不需要服务器的参与，恶意攻击的发起与执行全部在浏览器中完成。 
const content = new URL(location.href).searchParams.get("param");
const div = document.createElement("div);
//👿👿恶意脚本注入
div.innerHTML = content;
document.body.append(div);
2.CSRF跨站请求伪造攻击
        CSRF（ Cross-site request forgery）跨站请求伪造，也是一种常见的安全漏洞。CSRF则通过伪装成受信任用户的请求来利用受信任的网站。在用户不知情的情况下，利用用户权限，构造制定HTTP请求，窃取或修改用户的敏感信息。

kk.jpg

<form action="https://bank/transfer_tons_of_money" method="Post">
 <input name="amount" value="1000000000000L type="hidden"/>
<input name "to" value="hacker" type="hidden"/> 
</form>
3.SQL注入
        SQL注入是指通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器，执行恶意的SQL命令。

sskk.jpg

public async renderForm(ctx){
  const { username, form_id } = ctx.query;
  //读取请求字段
  const result = await sql.query(
    SELECT a,b,c FROM table
    WHERE username =${username}//直接以字符串的形式拼接SQL语句
    AND form_id = ${form id});
    ctx.body =renderForm(result);
  }
4.SSRF服务端请求伪造
        SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。SSRF攻击的目标一般是从外网无法访问的内部系统。正是因为它是由服务端发起的，所以它能够请求到与它相连而与外网隔离的内部系统。

kkaak.jpg

My Personal Summary
        在前端开发的工作中，永远不能够轻信客户端，要精准区分黑客攻击的类型与方法，并充分做好过滤以及审核工作，来尽可能的减少Web开发中的安全漏洞，来成为一名优秀的前端开发工程师。
        Hello world！Hello，少年！“码”里行间，写不尽的高爆，致敬所有心怀梦想，脚踏实地拼搏的程序员们，愿君前程似锦，归来仍是少年！

YQY.png

avatar
文章
阅读
粉丝