跨域有哪几种方式？
跨源资源共享
通过 XHR 实现 Ajax 通信的一个主要限制,来源于跨域安全策略。默认情况下,XHR 对象只能访 问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是,实现合理的跨 域请求对开发某些浏览器应用程序也是至关重要的。
CORS(Cross-Origin Resource Sharing,跨源资源共享)是 W3C 的一个工作草案,定义了在必须访 问跨源资源时,浏览器与服务器应该如何沟通。CORS 背后的基本思想,就是使用自定义的 HTTP 头部 让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。
比如一个简单的使用 GET 或 POST 发送的请求,它没有自定义的头部,而主体内容是 text/plain。在 发送该请求时,需要给它附加一个额外的 Origin 头部,其中包含请求页面的源信息(协议、域名和端 口),以便服务器根据这个头部信息来决定是否给予响应。下面是 Origin 头部的一个示例:
如果服务器认为这个请求可以接受,就在 Access-Control-Allow-Origin 头部中回发相同的源信息(如果是公共资源,可以回发”*”)。例如:
如果没有这个头部,或者有这个头部但源信息不匹配,浏览器就会驳回请求。正常情况下,浏览器 会处理请求。注意,请求和响应都不包含 cookie 信息。
IE对CORS的实现
微软在 IE8 中引入了 XDR(XDomainRequest)类型。这个对象与 XHR 类似,但能实现安全可靠 的跨域通信。XDR 对象的安全机制部分实现了 W3C 的 CORS 规范。以下是 XDR 与 XHR 的一些不同之 处。
cookie 不会随请求发送,也不会随响应返回。
只能设置请求头部信息中的 Content-Type 字段。 不能访问响应头部信息。 只支持GET和POST请求。
这些变化使 CSRF(Cross-Site Request Forgery,跨站点请求伪造)和 XSS(Cross-Site Scripting,跨 站点脚本)的问题得到了缓解。被请求的资源可以根据它认为合适的任意数据(用户 *** 、来源页面等) 来决定是否设置 Access-Control- Allow-Origin 头部。作为请求的一部分,Origin 头部的值表示 请求的来源域,以便远程资源明确地识别 XDR 请求。
XDR 对象的使用 *** 与 XHR 对象非常相似。也是创建一个 XDomainRequest 的实例,调用 open() *** ,再调用 send() *** 。但与 XHR 对象的 open() *** 不同,XDR 对象的 open() *** 只接收两个 参数:请求的类型和 URL。
所有 XDR 请求都是异步执行的,不能用它来创建同步请求。请求返回之后,会触发 load 事件, 响应的数据也会保存在 responseText 属性中,如下所示。
在接收到响应后,你只能访问响应的原始文本;没有办法确定响应的状态代码。而且,只要响应有 效就会触发 load 事件,如果失败(包括响应中缺少 Access-Control-Allow-Origin 头部)就会触 发 error 事件。遗憾的是,除了错误本身之外,没有其他信息可用,因此唯一能够确定的就只有请求 未成功了。要检测错误,可以像下面这样指定一个 onerror 事件处理程序。
鉴于导致 XDR 请求失败的因素很多,因此建议你不要忘记通过 onerror 事件处 理程序来捕获该事件;否则,即使请求失败也不会有任何提示。
在请求返回前调用 abort() *** 可以终止请求:
与 XHR 一样,XDR 对象也支持 timeout 属性以及 ontimeout 事件处理程序。下面是一个例子。
这个例子会在运行 1 秒钟后超时,并随即调用 ontimeout 事件处理程序。
为支持 POST 请求,XDR 对象提供了 contentType 属性,用来表示发送数据的格式,如下面的例子所示。

这个属性是通过 XDR 对象影响头部信息的唯一方式。 其他浏览器对CORS的实现
Firefox 3.5+、Safari 4+、Chrome、iOS 版 Safari 和 Android 平台中的 WebKit 都通过 XMLHttpRequest 对象实现了对 CORS 的原生支持。在尝试打开不同来源的资源时,无需额外编写代码就可以触发这个行 为。要请求位于另一个域中的资源,使用标准的 XHR 对象并在 open() *** 中传入绝对 URL 即可,例如:
与 IE 中的 XDR 对象不同,通过跨域 XHR 对象可以访问 status 和 statusText 属性,而且还支 持同步请求。跨域 XHR 对象也有一些限制,但为了安全这些限制是必需的。以下就是这些限制。
不能使用 setRequestHeader()设置自定义头部。
不能发送和接收 cookie。
调用 getAllResponseHeaders() *** 总会返回空字符串。
由于无论同源请求还是跨源请求都使用相同的接口,因此对于本地资源,更好使用相对 URL,在访 问远程资源时再使用绝对 URL。这样做能消除歧义,避免出现限制访问头部或本地 cookie 信息等问题。
Preflighted Reqeusts
CORS 通过一种叫做 Preflighted Requests 的透明服务器验证机制支持开发人员使用自定义的头部、 GET 或 POST 之外的 *** ,以及不同类型的主体内容。在使用下列高级选项来发送请求时,就会向服务 器发送一个 Preflight 请求。这种请求使用 OPTIONS *** ,发送下列头部。
Origin:与简单的请求相同。
Access-Control-Request-Method:请求自身使用的 *** 。
Access-Control-Request-Headers:(可选)自定义的头部信息,多个头部以逗号分隔。
以下是一个带有自定义头部 NCZ 的使用 POST *** 发送的请求。
跨源资源共享
发送这个请求后,服务器可以决定是否允许这种类型的请求。服务器通过在响应中发送如下头部与 浏览器进行沟通。
Access-Control-Allow-Origin:与简单的请求相同。
Access-Control-Allow-Methods:允许的 *** ,多个 *** 以逗号分隔。
Access-Control-Allow-Headers:允许的头部,多个头部以逗号分隔。
Access-Control-Max-Age:应该将这个 Preflight 请求缓存多长时间(以秒表示)。
例如:
支持 withCredentials 属性的浏览器有 Firefox 3.5+、Safari 4+和 Chrome。IE 10 及更早版本都不 9 支持。

Preflight 请求结束后,结果将按照响应中指定的时间缓存起来。而为此付出的代价只是之一次发送 这种请求时会多一次 HTTP 请求。
支持 Preflight 请求的浏览器包括 Firefox 3.5+、Safari 4+和 Chrome。IE 10 及更早版本都不支持。
带凭据的请求
默认情况下,跨源请求不提供凭据(cookie、HTTP 认证及客户端 SSL 证明等)。通过将 withCredentials 属性设置为 true,可以指定某个请求应该发送凭据。如果服务器接受带凭据的请 求,会用下面的 HTTP 头部来响应。
如果发送的是带凭据的请求,但服务器的响应中没有包含这个头部,那么浏览器就不会把响应交给JavaScript(于是,responseText 中将是空字符串,status 的值为 0,而且会调用 onerror()事件处 理程序)。另外,服务器还可以在 Preflight 响应中发送这个 HTTP 头部,表示允许源发送带凭据的请求。
跨浏览器的CORS
即使浏览器对 CORS 的支持程度并不都一样,但所有浏览器都支持简单的(非 Preflight 和不带凭据 的)请求,因此有必要实现一个跨浏览器的方案。检测 XHR 是否支持 CORS 的最简单方式,就是检查 是否存在 withCredentials 属性。再结合检测 XDomainRequest 对象是否存在,就可以兼顾所有浏 览器了。

Firefox、Safari 和 Chrome 中的 XMLHttpRequest 对象与 IE 中的 XDomainRequest 对象类似,都 提供了够用的接口,因此以上模式还是相当有用的。这两个对象共同的属性/ *** 如下。
abort():用于停止正在进行的请求。
onerror:用于替代 onreadystatechange 检测错误。 onload:用于替代 onreadystatechange 检测成功。 - responseText:用于取得响应内容。
send():用于发送请求。
以上成员都包含在 createCORSRequest()函数返回的对象中,在所有浏览器中都能正常使用。
其他跨域技术
在 CORS 出现以前,要实现跨域 Ajax 通信颇费一些周折。开发人员想出了一些办法,利用 DOM 中 能够执行跨域请求的功能,在不依赖 XHR 对象的情况下也能发送某种请求。虽然 CORS 技术已经无处 不在,但开发人员自己发明的这些技术仍然被广泛使用,毕竟这样不需要修改服务器端代码。
图像Ping
上述之一种跨域请求技术是使用img标签。我们知道,一个网页可以从任何网页中加载图像,不 用担心跨域不跨域。这也是在线广告跟踪浏览量的主要方式。正如第 13 章讨论过的,也可以动态地创 建图像,使用它们的 onload 和 onerror 事件处理程序来确定是否接收到了响应。
动态创建图像经常用于图像 Ping。图像 Ping 是与服务器进行简单、单向的跨域通信的一种方式。 请求的数据是通过查询字符串形式发送的,而响应可以是任意内容,但通常是像素图或 204 响应。通过 图像 Ping,浏览器得不到任何具体的数据,但通过侦听 load 和 error 事件,它能知道响应是什么时 候接收到的。来看下面的例子。
这里创建了一个 Image 的实例,然后将 onload 和 onerror 事件处理程序指定为同一个函数。这 样无论是什么响应,只要请求完成,就能得到通知。请求从设置 src 属性那一刻开始,而这个例子在请 求中发送了一个 name 参数。
图像 Ping 最常用于跟踪用户点击页面或动态广告曝光次数。图像 Ping 有两个主要的缺点,一是只 能发送 GET 请求,二是无法访问服务器的响应文本。因此,图像 Ping 只能用于浏览器与服务器间的单向通信。
*** ONP
*** ONP 是 *** ON with padding(填充式 *** ON 或参数式 *** ON)的简写,是应用 *** ON 的一种新 *** , 在后来的 Web 服务中非常流行。 *** ONP 看起来与 *** ON 差不多,只不过是被包含在函数调用中的 *** ON, 4 就像下面这样。
*** ONP 由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调 函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 *** ON 数据。下面是一个典型的 *** ONP 请求。
这个 URL 是在请求一个 *** ONP 地理定位服务。通过查询字符串来指定 *** ONP 服务的回调参数是很 常见的,就像上面的 URL 所示,这里指定的回调函数的名字叫 handleResponse()。
*** ONP 是通过动态script元素来使用的,使用时可以为src 属性指定一个跨域 URL。这里的script元素与img元素类似,都有能力不受限制地从其他域 加载资源。因为 *** ONP 是有效的 JavaScript 代码,所以在请求完成后,即在 *** ONP 响应加载到页面中 以后,就会立即执行。来看一个例子。 
这个例子通过查询地理定位服务来显示你的 IP 地址和位置信息。
*** ONP 之所以在开发人员中极为流行,主要原因是它非常简单易用。与图像 Ping 相比,它的优点 在于能够直接访问响应文本,支持在浏览器与服务器之间双向通信。不过, *** ONP 也有两点不足。
首先, *** ONP 是从其他域中加载代码执行。如果其他域不安全,很可能会在响应中夹带一些恶意代码,而此时除了完全放弃 *** ONP 调用之外,没有办法追究。因此在使用不是你自己运维的 Web 服务时, 一定得保证它安全可靠。
其次,要确定 *** ONP 请求是否失败并不容易。虽然 HTML5 给script元素新增了一个 onerror 事件处理程序,但目前还没有得到任何浏览器支持。为此,开发人员不得不使用计时器检测指定时间内是否接收到了响应。但就算这样也不能尽如人意,毕竟不是每个用户上网的速度和带宽都一样。
参考：javascript高级程序设计第21章
thinkphp怎么做才是安全的sql防注入
1：抵御99%的攻击方式,适用于90%的场景.
当网站不涉及复杂的用户交互时，可以对用户所有提交的文本进行htmlspecialchars函数处理。
在THINKPHP3.2版本中的操作步骤是:
一：在项目配置文件中添加配置： 'DEFAULT_FILTER' = 'htmlspecialchars', //默认过滤函数
二: 使用框架带的I *** 获取来自用户提交的数据;
例子：M('Member')-save(array('content'=I('post.content')));这样添加的content内容是经过htmlspecialchars处理过的.
提问：为什么经过htmlspecialchars处理过的文本可以保证是安全的?
回答：纵观XSS各种攻击方式绝大多数依赖'" 这几个字符中的一个或几个对内容进行注入攻击。而htmlspecialchars函数的作用就是将这些字符转换成无害的HTML 实体;
提问：为什么有这么好的 *** ，而还有好多网站还是被攻击.
回答：因为好多程序员总会粗心忘记使用这个 *** ,而遗漏某条数据的过滤。
2:对COOKIE进行IP绑定
cookie里面一般有自动登录信息和session_id,就算对cookie里面的内容全部加了密，cookie的信息一但被别人通过XSS攻击获取后也一样等同于把自己的帐号密码给了别人。
对cookie进行IP绑定，（当然也可以获取用户客户端更多的其它信息进行同时绑定）可以根据用户的IP来判断这个cookie是不是来原始授权用户。
典型的应用示例：
用户设置了自动登录时保存自动登录信息:
$auto=I('post.auto');//用户设置了自动登录
if(!empty($auto)){
cookie('auto',encrypt(serialize($data)));//将登录信息保存到cookie,其中$data里含有加密后的帐号，密码，和用户的IP，这里的cookie已在全局中设置过期日期为一周
}
用户关闭浏览器再次访问网站时，进行自动登录
if (!is_login()) {//是否未登录状态?
$auth=cookie('auto');
if(!empty($auth)){//是否未有自动登录cookie?
$data=unserialize(decrypt($auth));
if(!empty($data) !empty($data['username']) !empty($data['password']) !empty($data['last_login_ip'])){
$user=M('Member')-where(array('username'=$data['username'],'password'=$data['password']))-find();
if(!empty($user['id'])($user['last_login_ip']==get_client_ip())){//cookie帐号密码是否有效?//IP来源是否相同?
login_session($user['id'], $user['username'], $data['last_login_ip']);//用户自动登录成功
}
}
}
}
复制代码
优点：大多数场景下可使被XSS攻击盗取的cookie失效。缺点：由于IP存在多台电脑共用的可能，对绑定做不到十分精细。
3:为COOKIE添加httponly配置
最新版本的thinkphp已经支持此参数。
此参数可以保证cookie只在http请求中被传输，而不被页面中的脚本获取，现市面上绝大多数浏览器已经支持。
复制代码
4:HTML5值得观注的新特性：
iframe src="" sandbox
为iframe的增加的sandbox属性，可以防止不信任的Web页面执行某些操作.相信这个 *** 以后会被广泛使用。
复制代码
5：富文本过滤
富文本过滤是，XSS攻击最令人头疼的话题，不仅是小网站，就连BAT这样的巨头也是三天两头的被其困扰.
xbox series s欧版缺点
xboxseriess欧版缺点是画质要稍差一些。
xboxseriess欧版画质比不上xsx或者高端显卡，玩没有优化的老游戏，xss直接用的是xboxone的画面配置，xsx用的是onex的画质起码是4k，这里xss就吃亏很多，xboxone画质挺拉垮的900p是常事，比如圣歌，量子破碎。
什么是web开发人员最喜欢的前端工具
1、jQuery
jQuery由于其无限的教程，没有跨平台/浏览器问题，优秀的用户界面，大量的插件以及它的轻量，快速和快速学习等特点而脱颖而出。超过70％的受访者选择jQuery作为他们的前端库，它是一个快速，轻量级和简洁的JavaScript库，主要用于HTML文档遍历、事件处理、动画和用于快速Web开发的Ajax交互。从本质上讲，jQuery最适合需要快速开发的应用程序。
2、Bootstrap
超过65％的开发者选择Bootstrap作为他们最喜欢的框架来使用，它是一个用HTML、CSS和 *** 开发的开源工具包。Bootstrap的广泛流行主要是因为它的简单使用、优秀的社区以及大量的文章和教程、第三方插件和扩展、主题构建器等。
3、Angular
如果你打算构建一个动态且强大的单页应用程序，Angular就是你需要的框架。Angular是高度模块化的，因此非常适合与团队分开大型工作，并且使测试和调试变得轻松。功能优先的 *** 使Angular更加专注于功能，使开发人员的工作更轻松。此外，它还有来自Google社区的出色工具和支持。
4、NPM
NPM是Node的包管理器。借助NPM，开发人员可以安装各种模块进行Web开发，共享和借用软件包，并管理私有开发。它由网站、命令行界面（CLI）和注册表三个不同的组件组成。
5、Webpack
Webpack是现代JavaScript应用程序的模块打包程序，它将前端开发所需的所有资源（如JavaScript、字体和图像）集中到一个地方。如果你正在开发复杂的前端，这特别有用。你可以去通过部署具有的WebPack Web应用程序，以获取有关的WebPack起来和运行。
除了以上工具，还有Sass、React等，根据企业所用工具的不同，你需要掌握的工具也不一样。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
