2024 高级前端面试题之 前端安全模块 「精选篇」

2024 高级前端面试题之 前端安全模块 「精选篇」

该内容主要整理关于 前端安全模块 的相关面试题,其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。


1. 代码注入xss

跨网站指令码(英语:Cross-site scripting,通常简称为:XSS)是一种网站应用程式的安全漏洞攻击,是代码注入的一种。它允许恶意使用者将程式码注入到网页上,其他使用者在观看网页时就会受到影响。这类攻击通常包含了 HTML 以及使用者端脚本语言

XSS 分为三种:反射型,存储型和 DOM-based

如何攻击

XSS 通过修改 HTML 节点或者执行 JS代码来攻击网站。
例如通过 URL 获取某些参数

<!-- http://www.domain.***?name=<script>alert(1)</script> -->
<div>{{name}}</div>    

上述 URL 输入可能会将 HTML 改为 <div><script>alert(1)</script></div> ,这样页面中就凭空多了一段可执行脚本。这种攻击类型是反射型攻击,也可以说是 DOM-based 攻击

如何防御
  1. 最普遍的做法是转义输入输出的内容,对于引号,尖括号,斜杠进行转义

    function escape(str) {
    	str = str.replace(/&/g, "&amp;");
    	str = str.replace(/</g, "&lt;");
    	str = str.replace(/>/g, "&gt;");
    	str = str.replace(/"/g, "&quto;");
    	str = str.replace(/'/g, "&##39;");
    	str = str.replace(/`/g, "&##96;");
        str = str.replace(/\//g, "&##x2F;");
        return str
    }
    
  2. 通过转义可以将攻击代码 <script>alert(1)</script> 变成字符串

    // -> &lt;script&gt;alert(1)&lt;&##x2F;script&gt;
    escape('<script>alert(1)</script>')
    
  3. 对于显示富文本来说,不能通过上面的办法来转义所有字符,因为这样会把需要的格式也过滤掉。这种情况通常采用白名单过滤的办法,当然也可以通过黑名单过滤,但是考虑到需要过滤的标签和标签属性实在太多,更加推荐使用白名单的方式

    var xss = require("xss");
    var html = xss('<h1 id="title">XSS Demo</h1><script>alert("xss");</script>');
    // -> <h1>XSS Demo</h1>&lt;script&gt;alert("xss");&lt;/script&gt;
    console.log(html);
    

    以上示例使用了 js-xss 来实现。可以看到在输出中保留了 h1 标签且过滤了 script 标签

cookie 如何防范 XSS 攻击

XSS (跨站脚本攻击)是指攻击者在返回的 HTML 中嵌入 javascript 脚本,为了减轻这些 攻击,需要在 HTTP 头部配上,set-cookie

  • httpOnly 这个属性可以防止 XSS,它会禁止 javascript 脚本来访问 cookie
  • secure- 这个属性告诉浏览器仅在请求为 https 的时候发送 cookie

2. 跨站请求伪造CSRF

  • CSRF 就是利用用户的登录态发起恶意请求
  • CSRF(Cross-site request forgery) 跨站请求伪造,是一种常见的攻击方式。是指 A 网站正常登陆后,cookie 正常保存登录信息,其他网站 B 通过某种方式调用 A 网站接口进行操作,A 的接口会在请求时会自动带上 cookie。
  • 同源策略可以通过 html 标签加载资源,而且同源策略不阻止接口请求而是拦截请求结果,CSRF 恰恰占了这两个便宜。

  • 对于 GET 请求,直接放到 <img> 就能神不知鬼不觉地请求跨域接口。

  • 对于 POST 请求,很多例子都使用 form 提交:

    👇 例子

    <form action="<nowiki>http://bank.***/transfer.do</nowiki>" method="POST">
      <input type="hidden" name="a***t" value="MARIA" />
      <input type="hidden" name="amount" value="100000" />
      <input type="submit" value="View my pictures" />
    </form>
    

浏览器同源策略不能作为防范 CSRF 的方法
浏览器允许这么做,归根到底就是因为你 无法用 js 直接操作获得的结果

  • CSRF怎么获取用户的登录态
  • cookie通常是不能跨域访问的,那为什么会有CSRF攻击
  • 总结

3. 浏览器同源策略 SOP

  • 3.1 同源
  • 3.2 限制
  • 3.3 绕过跨域
  • 3.4 浏览器同源策略与ajax

4. 跨域资源共享 CORS

  • 4.1 简单请求
  • 4.2 预检请求
  • 4.3 CORS 与 cookie

5. 密码安全

转载请说明出处内容投诉
CSS教程_站长资源网 » 2024 高级前端面试题之 前端安全模块 「精选篇」

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买