安全

安全

1. CSRF攻击

1.1 什么是CSRF攻击？

​ CSRF全称为跨站请求伪造（Cross-site request forgery）

​ 攻击者盗用了你的身份信息，以你的名义发送恶意请求，

​ 对服务器来说这个请求是你发起的，却完成了攻击者所期望的一个操作

image-20210617162157646

1.2 危害

​ 修改用户信息，修改密码，以你的名义发送邮件、发消息、盗取你的账号等

1.3 攻击条件

​ 用户已登录存在CSRF漏洞的网站

​ 用户需要被诱导打开攻击者构造的恶意网站

1.4 防范

1.4.1 验证HTTP Referer字段

​ referer字段表明了请求来源，通过在服务器端添加对请求头字段的验证拒绝一切跨站请求，

​ 但是请求头可以绕过，XHR对象通过setRequestHeader方法可以伪造请求头

​

1.4.2 添加token验证

​ 客户端令牌token通常作为一种身份标识，由服务器端生成的一串字符串，当第一次登录后，

​ 服务器生成一个token返回给客户端，以后客户端只需带上token来请求数据即可，无需再次带上用户名和密码。

​ 如果来自浏览器请求中的token值与服务器发送给用户的token不匹配，或者请求中token不存在，

​ 则拒绝该请求，使用token验证可以有效防止CSRF攻击，但增加了后端数据处理的工作量

1.4.3 验证码

​ 发送请求前需要输入基于服务端判断的验证码，机制与token类似，

​ 验证码强制用户与web完成交互后才能实现正常请求，最简洁而有效的方法，但影响用户体验

2. XSS攻击

2.1 什么是xss攻击

XSS又叫CSS（Cross Site Script），跨站脚本攻击：攻击者在目标网站植入恶意脚本（js / html），用户在浏览器上运行时可以获取用户敏感信息（cookie / session）、修改web页面以欺骗用户、与其他漏洞相结合形成蠕虫等。

image-20210617162454870

对特殊字符进行转译就好了（vue/react等主流框架已经避免类似问题，vue举例：不能在template中写script标签，无法在js中通过ref或append等方式动态改变或添加script标签）

2.2 危害

  • 使网页无法正常运行
  • 获取cookie信息
  • 劫持流量恶意跳转

2.3 攻击条件

  • 网页内部有输入框，内容可存储在服务器上

2.4 防御措施（对用户输入内容和服务端返回内容进行过滤和转译）

  • 现代大部分浏览器都自带 XSS 筛选器，vue / react 等成熟框架也对 XSS 进行一些防护
  • 过滤，对诸如<script>、<img>、<a>等标签进行过滤。
  • 编码。像一些常见的符号，如<>在输入的时候要对其进行转换编码，这样做浏览器是不会对该标签进行解释执行的，同时也不影响显示效果。

3. iframe

3.1 如何让自己的网站不被其他网站的 iframe 引用？

// 检测当前网站是否被第三方iframe引用
// 若相等证明没有被第三方引用，若不等证明被第三方引用。当发现被引用时强制跳转百度。
if(top.location != self.location){
    top.location.href = 'http://www.baidu.com'
}

3.2 如何禁用，被使用的 iframe 对当前网站某些操作？

sandbox是html5的新属性，主要是提高iframe安全系数。iframe因安全问题而臭名昭著，这主要是因为iframe常被用于嵌入到第三方中，然后执行某些恶意操作。
现在有一场景：我的网站需要 iframe 引用某网站，但是不想被该网站操作DOM、不想加载某些js（广告、弹框等）、当前窗口被强行跳转链接等，我们可以设置 sandbox 属性。如使用多项用空格分隔。

  • allow-same-origin：允许被视为同源，即可操作父级DOM或cookie等
  • allow-top-navigation：允许当前iframe的引用网页通过url跳转链接或加载
  • allow-forms：允许表单提交
  • allow-scripts：允许执行脚本文件
  • allow-popups：允许浏览器打开新窗口进行跳转
  • “”：设置为空时上面所有允许全部禁止

4. opener

4.1 原理

在项目中需要 打开新标签 进行跳转一般会有两种方式，通过这两种方式打开的页面可以使用 window.opener 来访问源页面的 window 对象

HTML ->

JS -> window.open('http://www.baidu.com')

场景：A 页面通过 或 window.open 方式，打开 B 页面。但是 B 页面存在恶意代码如下：

4.2 风险

  • 新打开的地址无限模仿用户要打开的网站，用户输入用户名密码或者交易等都在恶意网站上进行，风险极高，即使在跨域状态下 opener 仍可以调用 location.replace 方法。

4.3 避免方案

<a target="_blank" href="" rel="noopener noreferrer nofollow">a标签跳转url</a>

通过 rel 属性进行控制：
noopener：会将 window.opener 置空，从而源标签页不会进行跳转（存在浏览器兼容问题）
noreferrer：兼容老浏览器/火狐。禁用HTTP头部Referer属性（后端方式）。
nofollow：指示搜索引擎不要追踪(即抓取)网页上的任何出站链接

<button onclick='openurl("http://www.baidu.com")'>click跳转</button>

function openurl(url) {
    var newTab = window.open();
    newTab.opener = null;
    newTab.location = url;
}

5. ClickJacking（点击劫持）

5.1 原理

  1. 访问者被恶意页面吸引。怎样吸引的不重要。
  2. 页面上有一个看起来无害的链接（例如：“变得富有”或者“点我，超好玩！”）。
  3. 恶意页面在该链接上方放置了一个透明的 <iframe>，其 src 来自于 facebook.com，这使得“点赞”按钮恰好位于该链接上面。这通常是通过 z-index 实现的。
  4. 用户尝试点击该链接时，实际上点击的是“点赞”按钮。

5.2 风险

  • 在用户不知情的情况下就对某个网站进行了操作

5.3 避免方案

X-Frame-Options：X-Frame-Options可以说是为了解决ClickJacking而生的，它有三个可选的值：

DENY 拒绝当前页面加载任何frame页面
SAMEORIGIN frame页面的地址只能为同源域名下的页面
ALLOW-FROM origin 定义允许frame加载的页面地址

6.本地存储数据问题

很多开发者为了方便，把一些个人信息不经加密直接存到本地或者cookie，这样是非常不安全的，黑客们可以很容易就拿到用户的信息，所有在放到cookie中的信息或者localStorage里的信息要进行加密，加密可以自己定义一些加密方法或者网上寻找一些加密的插件，或者用base64进行多次加密然后再多次解码，这样就比较安全了。

7. 第三方依赖安全隐患

项目开发，很多都喜欢用别人写好的包，为了方便快捷，很快的就搭建起项目，自己写的代码不到20%，过多的用第三方依赖或者插件，一方面会影响性能问题，另一方面第三方的依赖或者插件存在很多安全性问题，也会存在这样那样的漏洞，所以使用起来得谨慎。

解决办法：手动去检查那些依赖的安全性问题基本是不可能的，最好是利用一些自动化的工具进行扫描过后再用，比如NSP(Node Security Platform)，Snyk等等。

8.HTTPS加密传输数据

在浏览器对服务器访问或者请求的过程中，会经过很多的协议或者步骤，当其中的某一步被黑客拦截的时候，如果信息没有加密，就会很容易被盗取。所以接口请求以及网站部署等最好进行HTTPS加密，这样防止被人盗取数据。

posted @ 2022-07-19 19:12  千本嘤嘤嘤  阅读(132)  评论(0)    收藏  举报