一、ajax技术
简介
AJAX 是异步的 JavaScript 和 XML(Asynchronous JavaScript And XML)。简单点说,就是使用 XMLHttpRequest 对象与服务器通信。它可以使用 JSON,XML,HTML 和 text 文本等格式发送和接收数据。AJAX 最吸引人的就是它的“异步”特性,也就是说它可以在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。
你可以使用 AJAX 最主要的两个特性做下列事:
在不重新加载页面的情况下发送请求给服务器。
接受并使用从服务器发来的数据。
2. 同步提交与异步提交
同步提交:当用户发送请求时,当前页面不可以使用,服务器相应页面到客户端,响应完成后用户才可以使用页面。
异步提交:当用户发送请求时,页面可以使用,相应完成后页面将数据显示出来。
3. 工作原理
(1)Ajax提供与服务器异步通信的能力,可在web页面触发js事件中服务器发出异步请求,如执行更新或查询数据库
(2)Ajax的核心是js对象XMLHttpRequest,该对象在IE5中首次引入,使用户通过js向服务器提出请求并处理相应,不阻塞用户
(3)当web服务器的相应返回时,使用js回调函数和CSS相应的更新页面的局部页面,而不是刷新整个页面
(4)在页面与服务器交互的过程中不中断用户操作,用户甚至察觉不到浏览器正在与服务器进行通信
学习网址
Getting Started - Web 开发者指南 | MDN (mozilla.org)
二、同源策略
同源
如果两个 URL 的协议、端口 (en-US)(如果有指定的话)和主机(域名)都相同的话,则这两个 URL 是同源的。
同源策略
百度百科:
同源策略,它是由Netscape提出的一个著名的安全策略。
当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,
即检查是否同源,只有和百度同源的脚本才会被执行。
如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。
同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收。
用于限制一个源的文档或它加载的脚本如何能与另一个源的资源进行交互。浏览器执行JS脚本会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。
如果缺少了同源策略,浏览器很容易受到 XSS、 CSFR 等攻击。
http请求头中的referer包含了当前请求页面的来源页面的地址,即表示当前页面是通过此来源页面里的链接进入的。服务端一般使用 Referer 请求头识别访问来源.
在以下两种情况下,Referer 不会被发送:
来源页面采用的协议为表示本地文件的 "file" 或者 "data" URI;
当前请求页面采用的是非安全协议,而来源页面采用的是安全协议(HTTPS)
3.非同源限制
(1)无法共享Cookie,localStorage
(2)无法操作彼此的DOM环境
(3)无法发送ajax请求
三、同源策略实验
环境:一台计算机、可以部署相应的html页面。
web1页面
<html>
<head>
<title> 跨 frame 的读取试验 </title>
<meta charset='utf-8'>
</head>
<body>
<iframe name="iframe1" width="300" height="80"
src="http://localhost/sop/iframe.html"
>
</iframe>
<input type="button" onclick="go()" value=" 密码→ ">
<script>
function go() {
try {
var x = iframe1.document.form1.passwd.value;
document.getElementById('out').innerHTML = x;
} catch (e)
{
alert(e.message);
}
}
</script>
<span id="out"></span>
</body>
</html>
web2页面
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<form name="form1"> iframe 的内层
密码 <input type="text" name="passwd" value="password1">
</form>
</body>
</html>
将两个html页面扔到小皮面板里面然后启动apache2服务,进行同源策略的验证。
此时,符合同源策略的情况是 [http://localhost/sop/]可以加载js语句显示出password
如果我们将访问地址改为我们的IP去访问,就会报错。原因是:js代码只能读取同一个域下的代码。