一、XSS攻击(Cross-site scripting,其实又叫CSS)1.是什么xss攻击指的是用户利用输入框，插入一段不属于你HTML/JS代码，如图1-1，1-2。 你只需要知道图1-2中输入框中敲进去的文字都会被编辑成innerHTML这么个意思就行了。  图1-1  图1-2 图1-2中你输入框里输入的内容都会被编辑成HTML放在你的代码中，如果用户只是输入一些字符串倒没什么问题，但如果如图1-2所示输入框里写一段脚本，那么这段本不属于你代码的脚本就会被注入你的代码中。但这段代码没用，因为图1-2插入的是脚本，当以这种方式将脚本标签注入到页面中时，脚本标签不会运行。 如果想插入能运行的标签，，我们用img标签，当img标签的src没有地址时，它会抛出一个错误，如图1-3所示。  图1-3 证明你确实是注入成功了。但这往往不是黑客要做的事，比如说，他会盗取你网站的cookie。 2.xss盗取cookie如果用户想盗取你网站的cookie，他会输入图1-4所示在输入框里  图1-4 如果你点击Search按钮，那么会提示如图1-5所示的信息。  图1-5 如上图所示，你存储在cookie中的用户名，密码都被显示了出来。 坏处：黑客可以利用这一点来登录某个网站(比如说微博)用你的账号密码。我记得2011年左右好像微博发生了大量的XSS注入事件。 3.解决办法代码中不要使用inner HTML，用innerText/textContent，使用户的输入变成字符串，而不是动态的HTML插入本地代码。比如说我把图1-1的代码改下(仅仅是把innerHTML ----> innerText)，如图1-6所示。  图1-6 那么，你就可以防范xss攻击，如图1-7所示(你可以和图1-4做个对比)  1-7 这时你就不会被盗取cookie，因为你输入框里输入的所有内容都会被编辑成String（字符串），而不是动态的HTML，自然也就没有黑客可乘之机了。 二、CORS(Cross-Origin Resource Sharing跨域资源共享)1.是什么从命名中就可以看得出，CORS是一种策略，一种跨origin共享资源的策略。  图2-1 如上图所示，意思是”从origin为http://127.0.0.1:5500获取http://localhost:3000/data被CORS政策阻止了，在请求资源里没有Access-Control-Allow-Origin头“。为什么会被阻止呢？ Access-Control-Allow-Origin：意思是服务器告诉浏览器，嘿，你允许请求(req)来自哪个url，并且可以访问我们。 2.为什么会有CORS ( 什么时候出现CORS警告 )？默认情况下，使用 CORS 会阻止两个不同来源之间的所有请求。这是为了防止人们访问他们无法控制的服务器上的数据/API。这很有用，因为你不希望随机网站能够使用存储在浏览器中的 cookie 向您的社交媒体或银行发出请求，因为这些 cookie 可能包含您的银行或社交媒体凭据，这意味着该网站可以根据代表您的社交媒体或银行。这其实是一种保护机制。 3.什么是同源，不同源？网站的origin只是 方案(http或https)、主机名(域名如localhost)和端口(3000、80等)。 如图2-1所示，"http://127.0.0.1:5500"和"http://localhost:3000/data"就是不同源，因为它俩主机名不一样。 但如果是"http://localhost:3000"和"http://localhost:3000/data"。它俩方案，主机名，端口都相同，所以是同源，自然是它俩之间的通信就不存在跨域了，自然也不会有CORS。 4. 解决办法：(适用于get/post请求)a. 允许单个域名 如上图所示，代表我们没有指定http://127.0.0.1:5500这个源可以允许访问，解决办法就是在express框架中引入cors库(如果你用的是Python/Go，那么会有对应的跨域处理库)，并在cors中设置允许访问的origin，如下图所示。  2-2 这样就告诉浏览器来自本地5500的源，允许它向服务器发起请求。我们打开浏览器开发者工具(F12-NetWork)中，可以查看请求头，如下图所示。  2-3 b. 允许任何域名 如果我们像允许任何域名向服务器请求数据，也非常简单，把origin设置成*就好了，如下图所示。  2-4 代表任何域名都可以向服务器发起请求。 5.发送cookieCORS 最后要处理的难点是 cookie。默认情况下，除非你明确告知，否则 CORS 不会将您的 cookie 与请求一起发送。 在前端只用在请求中写”包括凭据“, 如图2-5所示。  2-5 在后端中告诉服务区打开"接收凭据"功能。如图2-6所示。  2-6 三、总结防范XSS攻击的最好方式就是写innerText，因为用户输入的所有内容都会被编辑成字符串，而不是动态的HTML。 CORS(跨域资源共享)，当你跨域时，它会默认阻止跨域的url向服务器发起请求。但更多的是我们利用CORS来实现即使跨域了也能共享资源的功能。 |
万奢网手机版
官网微博：万奢网服务平台
