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

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

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

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

moonlord

2020-04-24 15:50:47 +08:00

@tctc4869
仔细想想，你 ”用拦截器拦下来返回错误码“ 是不是也是多此一举？
我就想用<script>当名字，你就给我前端显示<script>就完了，瞎鸡儿检验转码报错，你要干啥？
你是看了多少辣鸡教程被误导了？

moonlord

2020-04-24 15:53:24 +08:00

@whoami9894
链接里的东西都能让用户随意修改的话……
那么所谓一劳永逸，就是不用这种辣鸡设计……
你说的这根本不是什么特殊场景，就是故意挖坑……

moonlord

2020-04-24 15:58:15 +08:00

@whoami9894
那可不，我在正经问答题主的问题
你们在宣传一些辣鸡的方案，简直不忍直视
就好像 SQL 注入，还在研究怎么编码怎么过滤一样

neoblackcap

2020-04-24 16:00:23 +08:00

@whoami9894 网站不注意动态内容生成是那样的，要不简单粗暴实现一个留言板，会有 xss 吗？用户内容只输出成文本，一点问题都不会有的

fancy111

2020-04-24 16:01:07 +08:00

@moonlord 就你这技术还开博客，直接给你一段代码打你脸。
你是说只需要用 innerText 就可以防是吧？
<html>
<body>
<p id="test">hello world </p>
<script>
var content = document.getElementById("test");
content.innerText='</script><script>alert(11);</script>'
</script>
</body>
</html>
看清楚了，别告诉我你看不懂。

moonlord

2020-04-24 16:07:23 +08:00

@fancy111

你都给爷整笑了！
你写了个 HTML，里面就是 <script>alert(11);</script>，完了弹出来了，所以呢？
你在逗我吗？
浏览器都报错了 Uncaught SyntaxError: Invalid or unexpected token
你这根本都不符合 JS 语法，你是来搞笑的吗？

来我对齐给你：
<html>
<body>
<p id="test">hello world </p>
<script>
var content = document.getElementById("test");
content.innerText='
</script>
<script>
alert(11);
</script>'
</script>
</body>
</html>

whoami9894

2020-04-24 16:09:21 +08:00

@fancy111
虽然我很想挺你，但你这个例子确实不对
浏览器解析 HTML 时会先解析 HTML，然后才是 JS 。也就是说你这段代码里`content.innerText='</script><script>alert(11);</script>'`的第一个`</script>`在 HTML 解析阶段被当做 script 闭合标签了

所以这段代码被交给 JS 引擎解析时是这样的
<script>
var content = document.getElementById("test");
content.innerText='
</script>

<script>
alert(11);
</script>

wooyuntest

2020-04-24 16:11:21 +08:00

不能，后端必须参与处理。其实无论是前端还是后端，接收到数据后都需要进行必要的校验才能到下一步流程，包括后端从数据库里取出来的数据，都要校验、过滤、处理后才能进到下一步流程，否则会引起“二次注入”等问题。
总结下来就是：DO NOT Trust, Always Verify.

fancy111

2020-04-24 16:12:00 +08:00

@whoami9894 你真是傻。不报错的我已经说了，另外玩 XSS 或者其他注入，不用考虑什么报错，报错能运行就是最好的。一看你们就是小白，搞过黑客吗？唉。。。。累

whoami9894

2020-04-24 16:15:09 +08:00

@fancy111 他的意思是前端 JS 操纵数据时用 innerText，你这种情况是后端直接渲染 HTML，所以实际不能反驳他对于前端操纵数据的说法

@moonlord
使用 innerText 等做法都是在前后端分离，前端 JS 操纵数据的前提下，后端直接渲染 HTML 返回你直接避过不提？没什么好杠的

@neoblackcap
确实。我的意思的是总有一些复杂的业务场景，所以想寻求一劳永逸的解决方式是不太现实的

moonlord

2020-04-24 16:16:37 +08:00

@wooyuntest @fancy111
一知半解太可怕了
你难道没注意到我写的 <script>alert("菜鸡不要说话");</script>
现在在 v2ex，就是原封不动显示的吗？
还在说什么检验、编码、过滤，我服了。
看看 10 楼，好吗，亲？

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

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

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

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