同源策略

2018-12-06 07:32:43来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

一、同源策略

  1. 什么是同源策略?

    同源策略是一种约定,它是浏览器最核心和最基本的安全功能,可以用于隔离潜在恶意文件,如果没有了同源策略,浏览器的正常使用将受到影响。

    浏览器采用同源策略,禁止页面加载或执行与自身不同源的任何脚本。如果没有同源策略,那么恶意网页可以读取银行网站、网上商城等里面的用户信息,甚至篡改账号密码等。所以所有支持JavaScript的浏览器都采用了同源策略。

  2. 同源:协议、域名、端口相同。只要有一个不同就称之为跨域。出现跨域浏览器就要报错。

    以下是相对于http://www.a.com/home.html的同源检测

http://www.a.com/index.html 同源
http://www.a.com:81/home.html 不同源,端口号不同
https://www.a.com/home.html 不同源,协议不同
http://www.b.com/home.html 不同源,域名不同

 

  

 

 

 

二、解决跨域问题    

  由于浏览器为了安全采用了同源策略,但在一些情况下,我们不得不进行跨域,所以在解决跨域问题时,要绕过同源策略的限制。

  CORS方法

    CORS是一种白名单机制 ,CORS的请求成功与否取决于服务器是否同意当前域的请求,通过在服务器设置同意当前域的请求来实现跨域访问。在服务器的响应头部设置Access-Control-Allow-Origin:当前域或*

  示例:

    允许所有域都有访问资源的权限 Access-Control-Allow-Origin:* ;  允许http://www.abc.com有访问资源的权限 Access-Control-Allow-Origin:http://www.abc.com 

  JSONP方法

    此方法利用了script标签的src属性,scr属性具备跨域请求资源的能力。a.html请求b.js的数据,动态创建script标签,向服务器请求数据,请求地址后面的callback参数指定函数名。

    a.html

function req(src){
  let script = document.createElement("script");
  script.src = src;
  document.body.appendChild(script);
  script.onload = function(){
     document.body.removeChild(script);
  } 
}
function getData(data){
  console.log(data);     //从服务器拿到的数据data
}
box.onclick = function(){
  req("http://www.a.com/b.js?callback = getData");
}

    b.js

function getData({name:"张三"})   //返回的数据作为参数

    前后端联合开发时,后端人员可以根据url里的callback参数确定函数名,从而将数据返回。

    

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:VS Code + NWJS(Node-Webkit)0.14.7 + SQLite3 + Angular6 构

下一篇:NodeJs实现简单的爬虫