作为前端，在防止数据注入方面需要做哪些事情

Question

网上搜了很多，感觉没找到一篇比较总结性的，自己没什么经验

比如说，用户提交输入前要做哪些安全判断
对于从后端读取的数据，需要做哪些安全判断

另外，我了解的是，在代码上避免eval等。。

Answer 1

如果是为了正常用户安全，那就做好 XSS ， HTTPS ，CSRF，SRI，SCP。
如果是为了阻止开发者或者略微懂一点儿前端的人，那还是早点儿洗洗睡吧。

XSS（跨站脚本）

防止后端返回了可执行脚本，在 Vue 中默认情况下是正常的，但是使用了 v-html 指令后就会出现。

HTTPS

这个主要是为了防止中间人修改。

CSRF（跨站请求伪造）

这个严格来说应该是后端去做，但是也需要前端的配置

CSP（内容安全策略）

这个被很多人忽略，但是很有用。

• 限制页面资源的加载。比如限定只能在本域加载，就防止了加载外站资源带来的风险。

SRI（子资源完整性）

• 对使用的外部资源进行校验。很多时候，我们都会引用一些第三方的 cdn 资源来加速访问，虽然大部分情况下我们视其为可信的，单也不排除 cdn 被攻击，返回了带有攻击性质的脚本，这时候就可以通过其进行校验，详见 script 和 link 标签的 integrity 属性。
  Subresource Integrity - Web 安全 | MDN

  Note: SRI并不能规避所有的风险。第三方库经常会自己请求额外的信息，这就有可能会携带用户的账号密码等关键信息。这些经常需要js功能的支持，比如一个地图库会需要取<svg>数据来渲染，但是包含点击事件。

了解更多

你可以在 Web 安全 | MDN 了解到更多的信息。

Answer 2

前端做的再好也没用，关键在于后端