防止 xss 和 sql 注入而进行非法字符过滤， js 前端有什么几乎一劳永逸的方式？

2020-04-24 14:58:09 +08:00
 tctc4869

网上有各种防止 xss 和 sql 注入的方案，前端的也有，后端的也有。各种方案太多太杂，看的我头疼。

我的策略是，前端负责非法字符的过滤，转换，显示，让过滤后的安全数据入库，以及能安全的显示给用户看。而后端处理非法字符，就很简单。一旦检测到非法字符就直接返回 404，403,400 等错误码。

那么问题来了，先不考虑富文本，就那种普通的文本框，假设每个用户用浏览器操作，在输入框里输入的内容中，都可能带有 sql 注入，xss 攻击所用的代码的一段文字或文章例，前端如何负责这些带有非法字符的过滤转换？让数据能安全的入库，然后在数据显示时，又能显示用户输入时的样子，又不出问题呢。

14721 次点击
所在节点    JavaScript
148 条回复
u823tg
2020-04-24 17:59:19 +08:00
@Leon6868 #97
看情况么
const tag = document.createElement("script");
tag.innerText = `console.log('v2')`;
document.body.appendChild(tag);
杠一下。 -_-
moonlord
2020-04-24 18:03:56 +08:00
@u823tg 杠精说的就是你吧 =。=
Leon6868
2020-04-24 18:04:00 +08:00
@u823tg 我说的是 sql 注入。。innerText 确实可以避免的，#97 已经承认了。我的意思和#98 的差不多，你可以参考一下
huang7230468
2020-04-24 18:05:28 +08:00
还是从后端考虑吧，
u823tg
2020-04-24 18:11:36 +08:00
@tctc4869 #98 二次注入你怎么办， 用户的输入本来就不可信。 严格来说存到数据库的数据得经过过滤，脏数据不可否认的有危险性。
Deffi
2020-04-24 18:14:02 +08:00
前端过滤怎么行，人家直接走接口，又不一定走前端 js
zhouwei520
2020-04-24 18:14:18 +08:00
一劳永逸是不是不做程序员？
zhuisui
2020-04-24 18:16:45 +08:00
`"topic_id": 665687, "content": "<img onerror=\"alert(111)\"/>", "content_rendered": "&lt;img onerror=\"alert(111)\"/&gt;",`
这叫没转码？到底是谁瞎了
"content_rendered" ，顾名思义，要渲染的内容，明明是转过的。
zhw2590582
2020-04-24 18:18:34 +08:00
前端防用户手动输入都是做做样子，会 js 的人直接控制台里调接口了，前端还过滤个毛线，关键还是后端
Deffi
2020-04-24 18:19:20 +08:00
前端过滤只是用户友好，后端过滤才是安全啊
zhuisui
2020-04-24 18:21:55 +08:00
各位，我相信题主的意思是：
1. 前端是面向正常用户的，各种不合法输入都应该在检查后展示给用户原因。
2. 而后端只需要粗暴的返回数据是否合法，因为如果数据是前端来的，那么必然已经经过前端的校验了。如果不是前端来的非法请求，那我也没必要告诉你为什么你的请求出问题了。
otakustay
2020-04-24 18:24:43 +08:00
这事情的本质是：后端只管安全不管用户体验，前端完全负责用户体验，是否有可行性
至少在注入这件事上，我想说没有可行性，用 SQL 参数带来的体验前端不能完全 cover 住
当然在另外一些事上是可能有可行性的，要就事论事
taaaang
2020-04-24 18:28:51 +08:00
验证和过滤从来都不只是前端的事情，哪来一劳永逸，多关注用户体验，其他交给后端。
u823tg
2020-04-24 18:30:22 +08:00
@zhuisui #111 不行的， 有些数据我传进数据库是看似正常的， 程序二次从数据库取出来进行处理会造成注入。
aguesuka
2020-04-24 19:08:37 +08:00
@fancy111 有意思，不用后端，不用过滤，来吧

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xss me</title>
<script>
window.onload = function () {
const url = new URL(location.href)
const input = url.searchParams.get('input');
document.getElementById('output').innerText = input;
document.querySelector('input').value = input;
}
</script>
</head>
<body>
<form>
<label>
<input type="text" name="input"/>
</label>
<button type="submit">submit</button>
</form>
<pre id="output"></pre>
</body>
</html>
sagaxu
2020-04-24 19:10:34 +08:00
SQL 注入，prepared statement 一劳永逸，过滤是瞎鸡巴搞。

XSS 注入，后端拼 html 的由后端转义，前后端分离的，前端负责搞定。
cumt21g
2020-04-24 19:18:39 +08:00
起作用的还是后端过滤吧
skyRival
2020-04-24 19:23:11 +08:00
@aguesuka https://s1.ax1x.com/2020/04/24/JDhdJg.png
tctc4869
2020-04-24 19:36:20 +08:00
@Deffi
@zhw2590582
@taaaang

前端过滤，是因为前端是面向正常的客户端，而构造请求直接调后端接口不算正常的客户端，后端主要负责安全，用户体验交给前端。

后端既然检测的非法数据，就代表请求的客户端是不正常的客户端，没有经过前端验证过滤的客户端，就没有必要从数据库拿数据了，更没有必要过滤数据。都已经是非正常用户了，没必要告诉客户端是不是请求出问题了。
tctc4869
2020-04-24 19:38:15 +08:00
@cumt21g 后端过滤是多此一举，浪费精力，后端负责通不通过就行，难道后端还要告诉非法请求的客户端，你的请求数据有问题么？正常的客户端就交给前端去负责。至于非法客户端。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/665687

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX