尼克陈·前端随想录

前端安全性问题

CSRF（跨站请求伪造）

基本概念

csrf全称：Cross-Site Request Forgery

原理：核心原理是利用请求会自动带上cookie的特性，攻击者盗用了你的身份，以你的名义进行恶意请求。它能做的事情有很多包括：以你的名义发送邮件、发信息、盗取账号、购买商品、虚拟货币转账等。总结起来就是：个人隐私暴露及财产安全问题。

阐述csrf核心攻击思想：

  1. 浏览并登录信任网站（举例：微博）
  2. 登录成功后在浏览器存下cookie
  3. 用户在没有登出微博的情况下，访问了危险网站
  4. 危险网站向微博服务端发送一个恶意点赞请求，如http://weibo.com/api/dianzan
  5. 这时候请求就会自动带上原来的cookie进行api请求
  6. 微博验证请求合法（区分不出是否用户发送的），然后就出现刷点赞了
  7. 达到恶意目的

防御措施

  • 服务端验证请求来源。服务端可以通过http请求头的referer或origin来判断请求来源，决定是否响应。
  • 使用token验证。使用不存放在cookie里的token，这样请求不会自动带上token。
  • 服务端设置cookie的SameSite属性。

XSS/CSS（跨站脚本攻击）

基本概念

XSS 全称是 Cross Site Scripting，为了与“CSS”区分开来，故简称 XSS，翻译过来就是“跨站脚本”。

XSS 攻击是指黑客往 HTML 文件中或者 DOM 中注入恶意脚本，从而在用户浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段。

防御措施

  • input输入框对数据进行校验，诸如<script>、<img>、<a>等标签进行过滤。v-html类似。
  • 设置cookie为HttpOnly，防止xss窃取用户的cookie信息。
  • meta标签CSP白名单，明确告诉浏览器哪些资源可以加载并执行，<meta http-equiv=“Content-Security-Policy” content=“配置项” >

ClickJacking（点击劫持）

一般是别人用iframe嵌入你的网页进行恶心操作

防御措施：

nginx配置X-Frame-Options 响应头【DENY：不能被所有网站嵌套或加载；SAMEORIGIN：只能被同域网站嵌套或加载；ALLOW-FROM URL：可以被指定网站嵌套或加载。】

add_header X-Frame-Options SAMEORIGIN always;

SQL注入

服务端sql拼接时要注意，尽量使用orm库。

CDN劫持

出于性能考虑，前端应用通常会把一些静态资源存放到CDN（Content Delivery Networks）上面，例如 js 脚本和 style 文件。这么做可以显著提高前端应用的访问速度，但与此同时却也隐含了一个新的安全风险。如果攻击者劫持了CDN，或者对CDN中的资源进行了污染，攻击者可以肆意篡改我们的前端页面，对用户实施攻击。

现在的CDN以支持SRI为荣，script 和 link 标签有了新的属性 integrity，这个属性是为了防止校验资源完整性来判断是否被篡改。它通过 验证获取文件的哈希值是否和你提供的哈希值一样来判断资源是否被篡改。

使用 SRI 需要两个条件：一是要保证 资源同域 或开启跨域，二是在script标签中 提供签名 以供校验。

<script
    crossorigin="anomymous"
    integrity="sha384-xBuQ/1e6QAUVyZXbSolEf3UrG4SJj7VViWzwZ/fpwhOZc4Q1ZNE1R0Sp84fzkF5TxP5z6Z"
    src="http://aaa.com/jquery.min.js">
</script>