前端跨站脚本攻击安全问题如何防御？

“安全”是个很大的话题，各种安全问题的类型也是种类繁多。如果我们把安全问题按照所发生的区域来进行分类的话，那么所有发生在后端服务器、应用、服务当中的安全问题就是“后端安全问题”，所有发生在浏览器、单页面应用、Web 页面当中的安全问题则算是“前端安全问题”。比如说，SQL 注入漏洞发生在后端应用中，是后端安全问题，跨站脚本攻击(XSS)则是前端安全问题，因为它发生在用户的浏览器里。

除了从安全问题发生的区域来分类之外，也可以从另一个维度来判断：针对某个安全问题，团队中的哪个角色最适合来修复它?是后端开发还是前端开发?

总的来说，当我们下面在谈论“前端安全问题”的时候，我们说的是发生在浏览器、前端应用当中，或者通常由前端开发工程师来对其进行修复的安全问题。

1、老生常谈的 XSS

XSS 是跨站脚本攻击(Cross-Site Scripting)的简称，它是个老油条了，在 OWASP Web Application Top 10 排行榜中长期霸榜，从未掉出过前三名。XSS 这类安全问题发生的本质原因在于，浏览器错误的将攻击者提供的用户输入数据当做 JavaScript 脚本给执行了。

XSS 有几种不同的分类办法，例如按照恶意输入的脚本是否在应用中存储，XSS 被划分为“存储型 XSS”和“反射型 XSS”，如果按照是否和服务器有交互，又可以划分为“Server Side XSS”和“DOM based XSS”。

无论怎么分类，XSS 漏洞始终是威胁用户的一个安全隐患。攻击者可以利用 XSS 漏洞来窃取包括用户身份信息在内的各种敏感信息、修改 Web 页面以欺骗用户，甚至控制受害者浏览器，或者和其他漏洞结合起来形成蠕虫攻击，等等。总之，关于 XSS 漏洞的利用，只有想不到没有做不到。

如何防御

防御 XSS 最佳的做法就是对数据进行严格的输出编码，使得攻击者提供的数据不再被浏览器认为是脚本而被误执行。例如

浏览器在处理这个 script 元素的时候，就会检查对应的 JS 脚本文件的完整性，看其是否和 script 元素中 integrity 属性指定的 SRI 值一致，如果不匹配，浏览器则会中止对这个 JS 脚本的处理。