转义与不转义

需求: 用户输入’< img>’,将’< img>’ 显示在页面上(用户输入什么就显示什么)

如果我们直接将’< img>’ 作为html输出,那么浏览器会将其解析为一张图片,然后显示一张图片。

解决方案:对用户输入进行转义,可以是后端转,也可以是前端转。

方法一:后端转义

后端给前端传过来的是

1
&lt; img &gt;

这时候我们直接将后端传过来的数据作为html内容输出即可。假设这个返回字段是text。

如果是vue开发,可以使用
1
2
3
4
5
6

###### 如果是underscore模版,可以使用<%= text %>

##### 方法二:前端转义

后端给前端传过来的是


```

这时候我们不能直接将后端传过来的数据作为html内容输出,否则浏览器会将其解析为一张图片。需要在前端进行一次转义。

如果是vue开发,可以使用
如果是underscore,可以使用<%- text %>

总结

对于用户的输入,我们必须要进行转义,否则容易造成xss攻击。

前后端中有一端进行转义了,另一端就不能转义了,否则会达到没转义的效果。