前端安全

每天都是不一样的太阳
214 阅读5分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情

一、定义范围

所有发生在浏览器、单页面应用、Web页面当中的安全问题都算是算是“前端安全问题”。或者就是说所有需要前端开发人员去修复的问题都属于前端安全问题。

二、XSS

Cross Site Script（跨站脚本攻击）

XSS 攻击是指攻击者在网站上注入恶意的客户端代码，利用恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。有很多种方式进行 XSS 攻击，但它们的共同点为：将一些隐私数据像cookie、session发送给攻击者，将受害者重定向到一个由攻击者控制的网站，在受害者的机器上进行一些恶意操作。

XSS一共分为三种：

  • 非持久型跨站（也叫反射型）

    • 诱导用户点击主动打开恶意的 URL 才能生效,漏洞常见于通过 URL 传递参数的功能，如网站搜索、跳转等。

  • 持久型跨站（也叫存储型）

    • 攻击者将恶意代码提交到目标网站的数据库中。网站服务端将恶意代码从数据库取出，拼接在HTML中返回给浏览器。如论坛发帖、商品评论、用户私信等。

  • DOM跨站

类型存储区插入点
反射型 XSSURLHTML
存储型 XSS后端数据库HTML
DOM 型 XSS后端数据库/前端存储/URL前端 JavaScript

防御

  • 输入检查，字符长度的限制。
  • 避免拼接HTML或者使用内联事件
  • 开启CSP网页安全政策
  • 设置HttpOnly，客服端无法修改cookie
  • 转义字符串

三、CSRF

跨站请求伪造攻击(Cross-site request forgery),通常缩写为 CSRF 或者 XSRF

原理就是攻击者构造出一个后端请求地址，诱导用户点击或者通过某些途径自动发起请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，冒充用户执行某些操作。

防御

  • 验证码

    • 强制用户进行人机交互。输入验证码。还有短信验证码

  • token

    • 后端先生成一个 token ，之后将此放在数据库中并发送给前端，那么前端发送请求时就会携带这个 token ，后端通过校验这个 token 和数据库中的 token 是否一致，以此来判断是否是本网站的请求。

四、CORS

CORS（跨域资源共享）是一种浏览器机制，它允许对位于当前访问域之外的资源进行受控访问。

CORS 协议使用一组 HTTP header 来定义可信的 web 域和相关属性，例如是否允许通过身份验证的访问。浏览器和它试图访问的跨域网站之间进行这些 header 的交换。

Access-Control-Allow-Origin 响应头

Access-Control-Allow-Origin 响应头标识了跨域请求允许的请求来源，浏览器会将 Access-Control-Allow-Origin 与请求网站 origin 进行比较，如果两者匹配则允许访问响应。

防御

  • 请求之前的预检操作。浏览器会先发起一次 method 为 OPTIONS 的请求，并且对服务端响应的 Access-Control-* 之类的头进行初步检查，对比 origin、method 和 header 等等，这就叫预检。

注意

  • CORS 无法提供对跨站请求伪造（CSRF）攻击的防护，这是一个容易出现误解的地方。
  • CORS 是对同源策略的受控放宽，因此配置不当的 CORS 实际上可能会增加 CSRF 攻击的可能性或加剧其影响。

五、MITM

中间人攻击（MITM）,中间人攻击是一种通过各种技术手段入侵两台设备通信的网络攻击方法。

image.png

防御

对于开发者来说：

  • 支持 HTTPS。
  • 开启 HSTS 策略。

对于用户来说：

  • 尽可能使用 HTTPS 链接。
  • 避免连接不知名的 WiFi 热点。
  • 不忽略不安全的浏览器通知。
  • 公共网络不进行涉及敏感信息的交互。
  • 用可信的第三方 CA 厂商，不下载来源不明的证书。

MITM 参考文章

六、CSP

(Content-Security-Policy)内容安全策略.原理是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截由浏览器自己来实现。

CSP 只允许加载指定的脚本及样式，最大限度地防止 XSS 攻击，是解决 XSS 的最优解。CSP 的设置根据加载页面时 http 的响应头 Content Security Policy 在服务器端控制。

开启方式

  • 设置 HTTP 首部中的 Content-Security-Policy

  • 设置 meta 标签

    <meta http-equiv="Content-Security-Policy">

七、总结

在日常上网冲浪的时候，不要随意点击弹出的小广告，不要轻易的输入我们的验证码，在外不要连一些免费的wifi，手机中使用的软件，要从对应的商店进行下载。在研发工作中，除了使用框架外，一些前后端配合的请求，也要做好对应配置。

avatar
文章
阅读
粉丝