跨域的整理及web安全攻击

一，什么是跨域

（ps:同源策略：一种约定，是浏览器最基本的安全功能。web 相当于建立在同源策略基础之上的，不同源的客户端脚本在没有授权的情况下，不能进行读写操作）
不同源
1，连接，重定向和表单提交
2，跨域资源可以引入，但是js不能读写加载的内容，比如标签<script>,<img>,<frame > ，<link>，

跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

由于浏览器的同源策略，如果发生请求url的协议，域名，端口号任意一个与当前页面网址不同的，都会发生跨域
（ps域名访问对应的域名ip也会跨域：如果、www.a.com访问20.205.28.90）

二，解决跨域的方法

• 1）proxy代理
  用法：将请求发给后台服务器，通过服务器发送请求，将请求结果发给前端
  方法：通过nginx代理
• 2)CORS(Cross-Origin resource sharing 跨域资源共享)
  用法：现代浏览器常用的一种请求跨域资源的方法,主要是后端进行配置一些头部信息
  只要浏览器检测到响应头中的CORS,就不会拦截请求响应
  优缺点：要求是客户端和服务器都得支持，兼容性不如jsonp,有多种methods请求方式
  方法：

res.writeHead(200,{
   "Content-Type":"text/html;charset=UTF-8",
   "Access-Control-Allow-Origin":"http://a.com",//在b.com里设置，a.com就可以获取到b.com里的内容
   "Access-Control-Allow-Methods":"GET, POST, OPTIONS",
   "Access-Control-Allow-Headers":'X-Requested-With, Content-Type'
})

• 3)jsonp
  方法：动态添加script标签，浏览器对script没有同源限制，引用script资源后立即执行，没有阻塞，类似于img标签（通常通过动态的方式获取其他的资源，获取的数据一般为json）
  原理：（比如a.com/index.html想要获取b.com/main.js里的内容）

jsonp流程

1,在html里创建一个回调函数fn
2，动态创建script标签，因为同源策略对script标签没有限制，向服务器发送请求，请求地址跟上查询字符串，callback作为参数进行传递
sc.src=’/searchUrl?callback=fn’
3,服务器收到请求并处理后，会将回调函数名fn和要返回的数据拼接成字符串
fn([{‘name’:‘lhj’}])
4,服务器将准备好的数据通过http协议返回给客户端，客户端调用之前定义好的回调函数fn， 将json格式的数据传递回来。
fn({msg:‘xxxxx’})

用法：

a.com/index.html
<script>
function addScript(url){
 var scri=document.createElement('script');
 scri.setAttribute('type','text/javascript')
 scri.src=url
 document.body.appendChild(scri)
}
window.onload=function(){ //等页面全部加载完之后再执行
 addScript('http://b.com/main.js?callback=foo')
}
function foo(data){
 console.log(data.msg)
}
</script>
2.b.com/main.js
foo({name:'li'})

缺点:

• 1,无法发送post请求，只能get请求
• 2 , 而且要确定jsonp的请求是否失败不容易，大多数框架的实现都是结合超时时间来确定。使用计时器在指定时间看是否能收到响应。
  JSONP由2部分组成：回调函数和数据。
• 3, jsonp是在其他域中加载代码执行的，如果其他域不安全，响应中可能会夹杂一些恶意代码,
  双方使用token验证身份，利用字符串过滤
  （2）使用jquery封装jsonp

  $.ajax({
     url:"http://localhost:8888/jsonp",
     type:'GET',
     dataType:'jsonp',// 返回的数据类型，设置为JSONP方式
     jsonp:'callback',//指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
     jsonpCallback:'handle',//设置回调函数名
     data:{},
     success:function(){}
  

})

(3)使用$.getJSON
```php
$.getJSON("http://localhost:8888/jsonp&callback=?",function(data){
    console.log(data)
})

(4)使用WebSocket
websocket是h5提供的一种全双工通信协议，建立一次tcp连接就可以一直通信了，提供了服务器推送，webSocket原生实现比较麻烦，使用socket.io，封装了websocket的接口，简洁灵活，

var socket=io('xxx')
socket.on('connect',function(){
  socket.on('message',function(){})
  socket.on('disconnect',function(){})
})
$('input').onblur=function(){
   socket.send(data)
}

(6)postMessage
两个不同源的窗口无法通信，比如iframe和window.open打开的窗口
使用

<iframe src='' id='ifr'>
<script>
   ifr.contentWindow.postMessage('信息'，‘url’)
</script>
接收页面：
window.addEventListener('message',function(){})

(5)降域 document.domain：
例如：iframe通过设置window.domain来实现主域名下不同子域名的跨域访问

域名和子域名不同也会产生跨域，例如bai.a.com和a.com
可以设置主域名和子域名都为document.domain='a.com'，此时子域名bai.a.com不能用了

注意：

• 1，只能用于相同主域名下不同的子域名
• 2，会产生安全问题，当一个站点被攻击后，其他的站点也会存在安全漏洞
• 3，只适用于cookie和iframe
  （5）window.name,在一个窗口的生命周期内，所有载入的页面共享一个window.name,新载入的页面不会引起window的重置
  （6）window.postMessage,可以向不同的窗口发送消息
  （7）web socket，通过http建立连接，会将http协议替换为web socket协议
  参考文章 :http://www.imooc.com/article/40074

web安全攻击（XSS,CSRF,SQL注入，文件上传漏洞）

（1）XSS（跨站脚本攻击）原理及防范

xss是指攻击者利用网站没有对用户提交的数据进行转义处理或过滤不足的缺点，往web页面里插入恶意html或js，使别的用户访问都会执行相应的嵌入代码，从而盗取用户的资料，利用用户身份进行某种动作或对访问者进行病毒侵害。
比如：

• 诱导用户打开一个恶意的链接， 窃取cookie中用户私密信息。
• 在论坛添加一个恶意的表单，当用户提交表单的时候，却把信息传到攻击者的服务器中。
• cookie劫持也是常见的xss攻击，cookie保存了当前用户的登录凭证，
  cookie劫持防御： 在set Cookie时加上HttpOnly标识，浏览器禁止js访问带HttpOnly属性的cookie

response.setHeader('set-Cookie','cookiename=xx;path=/;Max-Age=seconds;HTTPOnly')
js是读取不了了,通过以下方式读取：
Cookie cookies[]=request.getCookies();

危害：

• 1，盗取用户的账号
• 2 ，非法转账
  XSS攻击分类
  （1）反射性XSS攻击（非持久性XSS攻击）：通过修改URL的方式加入攻击代码，诱导用户访问连接从而进行攻击。
  
  （2）持久性XSS攻击（留言板场景，评论功能）：恶意的攻击代码被服务端写入数据库，危害比较大
  xss攻击代码存在数据库，客户端打开就执行
  
  防范：
  -1) 输入检查：比如用户名，邮箱格式检查，，对特殊字符做编码或过滤 /</script />,<, for>。

转义方式：
方法一:
function escape(str) {
 str = str.replace(/&/g, '&')
 str = str.replace(/</g, '&lt;')
 return str
}
   // -> &lt;script&gt;alert(1)&lt;&#x2F;script&gt;
     escape('<script>alert(1)</script>')
    escape对字符串进行编码
    ----------------------------------
  方法二:   白名单方式
    const xss=require('xss')
  let html = xss('<h1 id="title">XSS Demo</h1><script>alert("xss");</script>')
// -> <h1>XSS Demo</h1>&lt;script&gt;alert("xss");&lt;/script&gt;

方法三：CSP :  Content-Security-Policy
CSP的本质就是建立白名单,开发者明确告诉浏览器哪些资源可以下载和执行。配置相应的规则，怎么拦截就是浏览器的事了
开启CSP的两种方式：
1，设置HTTP Header的Content-Security-Policy
Concent-Security-Policy:default-src 'self'  只加载本站资源
Concent-Security-Policy: img-src https://*   图片只加载https协议的
2，设置meta标签的方式：<meta http-equiv='Content-Security-Policy'>

• 1 ，js代码注入的时候，注意将标签关闭，将前端输入进行转义
  • 2，append的利用：jq会将append元素转为fragment标签的时候找到script标签，再使用eval（）执行一遍。
  • 3，地址加转义字符：img标签的再次使用，加载失败时会调用该元素的onerror事件
  • 4，将重要的cookie标记为httponly,这样js脚本就不能获取到cookie

（2） CSRF(跨域请求伪造)

原理：
网站的一些提交行为被黑客利用，你在访问黑客网站进行的一些操作会被操作到其他网站。
1,登录信任网站A：在本地生成cookie
2,在不登出A的情况下，访问危险网站B
防范
1，合理使用post，get，get请求不对数据进行修改
2，不让第三方网站访问到cookie
3，阻止第三方网站请求接口
4，请求时附带验证信息，验证码，token

• 通过验证码，除了用户，其他网站获取不到本次本次session的验证码。
• 使用token:随机生成一个token，在用户提交数据的时候也要携带token ,与服务器中的进行对比
  5，referer检查：检查请求header中的referer
  CSRF和XSS的区别
  XSS是获取信息，不需要提前知道用户的代码和数据包
  CSRF是代替用户完成指定的动作，需要知道其他用户的代码和数据包

（3）SQL注入

原理： 和xss类似，是由于将用户输入的数据当成命令来执行，
把SQL命令注入到web表单提交，或输入域名，或页面请求的查询字符串中

select * from user where username = 'leo' 
如果参数是：leo'; drop table user--， 则会误删除一个表
select * from user where username = 'leo'; drop table user--' 

SQL防御

• 参数绑定
  使用预编译语句，绑定参数。
• 使用正则表达式过滤传入的参数

（4）DoS攻击（Denial of Service拒绝服务）

原理： 攻击者通过伪造ACKS数据包，希望服务器重传某些数据，攻击者利用TCP协议漏洞，发送大量半连接请求，耗费CPU和内存资源。
SYN Flooding攻击
原理：攻击者利用无效的IP地址，利用TCP连接的三次握手，连续发送会话请求，使主机一直处于会话请求中，直至连接超时，最终因耗费资源而停止。

（5）DNS欺骗

虚假的DNS服务在真实的DNS服务之前向客户端发送报文数据，两者的ID相同，所以会接收虚假报文，丢弃真实的报文，DNS ID序列号欺骗成功。
检测：
1）在限定的时间内如果收到两个或多个响应数据报文，则视为DNS欺骗
2）主动发送验证包检测是否有DNS欺骗
防御：
1）客户端直接使用IP地址访问重要的站点
2）对DNS服务和客户端的数据进行加密服务端可以使用SSH加密协议，客户端使用PGP软件。

(6)中间人攻击

攻击方能同时与客户端和服务端建立连接，能获取通道信息，并能修改
公共的wifi
防范：
增加一个安全通道来传输信息，比如https传输（注意点：如果没有完全关闭http的话，攻击方可以通过将https降级为http）