s和dom有啥区别（网络安全与防范）

一、前言的重要性

随着互联网技术的迅猛发展，web应用越来越丰富，满足了用户的各种需求，然而网络安全问题也随之而来。掌握常见的前端攻击形式并保护我们的网站免受攻击，已成为每位优秀前端开发者不可或缺的技能。

二、攻击形式的分类

1. XSS攻击（跨站脚本攻击）

2. CSRF攻击（跨站请求）

3. 网络劫持攻击（如运营商劫持）

4. 控制台注入代码

5. 虚假网站钓鱼

三、XSS攻击详解

XSS攻击是web应用中常见的计算机安全漏洞。为了与CSS区分，将这种攻击命名为XSS。攻击者利用XSS漏洞绕过访问控制，如同源策略，从而发起非法行为或获取网站的敏感数据。实施XSS攻击需要向web页面注入恶意代码，并且这些代码能被浏览器成功执行。其主要目的是窃取Cookies和信息，或者发起其他非法行为。常见的防范措施包括在使用.innerHTML、.outerHTML等时要特别小心，尽量避免使用它们，而应该使用.textContent、.setAttribute()等。要转义HTML，过滤用户输入的内容，检查是否有非法内容，严格控制输出。在使用Vue或React技术栈时，避免在前端render阶段使用innerHTML、outerHTML等可能引发XSS隐患的操作。DOM中的内联事件器，如onclick、onerror等，以及JavaScript的eval()、setTimeout()等，都可能执行字符串中的代码，从而产生安全隐患，务必避免使用不可信的数据。

四、CSRF攻击详解

CSRF攻击是攻击者盗用用户身份，以用户名义发送恶意请求。这种请求对服务器来说是合法的，但却完成了攻击者期望的操作，如发送邮件、添加系统管理员等。CSRF攻击的发起方式主要是通过用户在未退出网站之前访问其他网站，接收并返回一些攻击性代码，然后利用浏览器自动携带的Cookie信息向目标网站发出请求。防范措施主要包括验证HTTP Referer字段、在HTTP头中自定义属性并验证、增加验证码操作等。在Vue和React中，要注意避免使用可能导致XSS注入的代码。

五、XSS与CSRF的区别

XSS攻击是在别人的网站注入JS脚本以触发非法操作或获取信息，而CSRF攻击则是在钓鱼网站伪装成正常网站，利用浏览器自带Cookie的机制发起正常网站的请求。两者的主要区别在于攻击方式和目标网站的不同。在Vue和React中，要注意防范XSS注入攻击，确保应用的安全性。

六、Vue与React中的防范措施