​​​​​​​​​​​​​​摘要： 本文讨论web前端安全问题以及应对措施，浏览器同源策略以及对资源跨域访问的几种解决方案

本文分享自华为云社区，原文作者：kg-follower   。

今天说一说和前端相关的Web安全问题和开发过程中经常遇到的跨域问题。

1．Web安全

1.1 XSS

基本原理

XSS(Cross-Site Scripting)，跨站脚本攻击通过在用户的浏览器内运行非法的HTML标签或JavaScript进行的一种攻击。

攻击手段

攻击者往 Web 页面里插入恶意网页脚本代码，当用户浏览该页面时，嵌入 Web 页面里面的脚本代码会被执行，从而达到攻击者盗取用户信息或其他侵犯用户安全隐私的目的。

XSS攻击分类

反射型xss攻击。通过给被攻击者发送带有恶意脚本的URL或将不可信内容插入页面，当URL地址被打开或页面被执行时，浏览器解析、执行恶意脚本。

反射型xss的攻击步骤：1. 攻击者构造出特殊的 URL或特殊数据；2. 用户打开带有恶意代码的URL 时，Web服务器将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器；3. 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行；4. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

​防御：1.Web页面渲染的所有内容或数据都必须来自服务端；2. 客户端对用户输入的内容进行安全符转义，服务端对上交内容进行安全转义；3.避免拼接html。

存储型xss。恶意脚本被存储在目标服务器上。当浏览器请求数据时，脚本从服务器传回浏览器去执行。

​存储型xss的攻击步骤：1. 攻击者将恶意代码提交到目标网站的数据库中；2.用户浏览到目标网站时，前端页面获得数据库中读出的恶意脚本时将其渲染执行。

防御：防范存储型XSS攻击，需要我们增加字符串的过滤：前端输入时过滤；服务端增加过滤；前端输出时过滤。

通常有三种方式防御XSS攻击：1. ContentSecurity Policy（CSP）。CSP 本质上就是建立白名单，开发者明确告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截是由浏览器自己实现的。我们可以通过这种方式来尽量减少 XSS 攻击。通常可以通过两种方式开启，例如只允许加载相同域下的资源：

设置 HTTP Header 中的 CSP（Content-Security-Policy: default-src 'self'）

设置meta 标签的方式（）

转义字符

用户的输入永远不可信任的，最普遍的做法就是转义输入输出的内容，对于引号、尖括号、斜杠进行转义：

function escape(str) {
  str = str.replace(/&/g, '&')
  str = str.replace(//g, '>')
  str = str.replace(/"/g, '&quto;')
  str = str.replace(/'/g, ''')
  str = str.replace(/`/g, '`')
  str = str.replace(/\//g, '/')
  return str
}

​但是对于显示富文本来说，显然不能通过上面的办法来转义所有字符，因为这样会把需要的格式也过滤掉。对于这种情况，通常采用白名单过滤的办法：

const xss = require('xss')
let html = xss('
XSS Demo
')
console.log(html)
XSS Demo
<script>alert("xss");</script>

经过白名单过滤，dom中包含的