一、防止跨站脚本攻击(XSS)
防范措施：
- 文本框过滤特殊字符防止脚本执行
| 特殊字符 | 过滤目的 |
|---|---|
< 和 > | 这些字符用于HTML标签，过滤它们可以防止注入恶意的HTML标签和脚本 |
& | 用于HTML实体编码，过滤它可以防止恶意实体编码的注入 |
" 和 ' | 用于引号，过滤它们可以防止注入恶意的JavaScript代码 |
/ | 用于路径分隔符，过滤它可以防止路径遍历攻击 |
; | 用于分隔符，过滤它可以防止注入恶意的SQL语句 |
- 对输入框输入的数据进行验证和过滤，确保只接受预期的数据格式，可以使用正则进行验证
- 在将用户输入的内容展示在界面上之前，确保对其进行适当的转义处理，比如使用Vue的v-html指令时，确保内容经过HTML转义，而不是直接插入到DOM中
转义示例代码：
javascript
escapeHTML(input) {
}
- 页面涉及很多输入框，例如表单后台时，在路由后置守卫过滤sql注入
// 输入框过滤sql注入
function checkedInput() {
var inputs = document.getElementsByTagName('input')
if (inputs.length) {
for (let i = 0; i < inputs.length; i++) {
const element = inputs[i];
var pat = /select|from|exec|count|and|insert*|%|chr|mid|master|truncate|char|declare|or|'|=|;|%/i;
element.onblur = (e) => {
if (pat.test(e.target.value)) {
e.target.value = ''
alert('文本框输入不支持SQL代码类型！')
}
}
}
}
}
二、防止跨站请求伪造(CSRF)
- 增加referer验证（后端）
- 使用post请求来执行敏感操作（如提交表单数据等）
- 设置cookie时设置SameSite属性为Strict或Lax来限制Cookie的发送，从而减少CSRF攻击的可能性
- 将 token 设置在 Cookie 中，在提交 POST 请求的时候提交 Cookie，并通过 header 或者 body 带上 Cookie 中的 token，服务端进行对比校验
三、防止网络劫持
-
DNS劫持
没啥办法。但是国家对于运营商的DNS劫持行为也有明令禁止，一般不会有。 -
HTTP劫持（网络劫持的高发类型）
如何防范
1.投诉运营商，向运营商投诉，告知其如果不解决则向工信部投诉。
2.使用API（MutationObserver）动态监听DOM的修改，判断异常DOM（如src属性异常的sciprt标签，iframe）并及时移除。
3.全站使用HTTPS，包括CDN的回源（回源），使用HTTPS后就算运营商劫持了数据也无法分 析加密后的数据，就无法轻易修改数据了。
4.CSP，利用内容安全协议，设置域名白名单，过滤非法域名，这样就能阻止恶意脚本及Iframe的加载了。
-
点击劫持（伪装攻击）主要是通过iframe
-
解决方案是通过设置HTTP头X-Frame-Options，来防止网页被Iframe加载
1.DENY：浏览器会拒绝当前页面加载任何iframe页面
2.SAMEORIGIN：iframe页面的地址只能为同源域名下的页面
3.ALLOW-FROM origin：允许iframe加载的页面地址
4.尽量少用iframe，如果必要，加上 sandbox 属性，充分实现“最小权限“原则。
四、防止源码泄露
-
源码压缩混淆
-
编译不生产
sourcemap源码调试文件，如有必要开启，请在出口时删除相关*.js.map文件避免泄露 -
前端目录下，不得存储源码备份压缩包，备份文件不存放在网站发布目录下。
五、第三方插件
- 避免使用来源不明或者引用量较少的第三方包。可通过npm的下载指数，或者相关库推荐网站搜寻认可度较高的包依赖
六、前端数据存储
- 前端的一些敏感信息需要存储cookie或者localStorage，需要进行加密存储
七、传输加密
- 登录密码需要加密进行传输（使用md5加密或者和后端商量使用哪种方式进行加密）
