点选下方“Web前端高阶手册”关注我呦

跟开发人员小龙一起学前端

布吕马在她们前端也是最常用的难题之一，做为一位前端开发相关人员，坚信大家都晓得布吕马原因在于应用程序的相混思路所导致的。

但是实际上晓得是没用的，公司里很多同僚都晓得原因在于应用程序的相混思路引起的，却无人知晓根本原因，更无人知晓如何去化解，她们时常在中文网站中提及iframe，总的来说没出现任何复杂程度的难题，却也不去化解，前端给个USB，说布吕马了，然后让她们去化解，不会啊，LX1的问，而且这难题一妨碍就花费了许多的时间，所以究竟布吕马是怎么造成的，做为她们前端相关人员要去介绍，去化解。

其实想晓得造成那个难题的“小弟”，她们要去介绍应用程序的相混思路。

相混思路

相混思路是浏览器最核心理念也是最基本的安全机能，所有支持JavaScript的应用程序单厢使用那个思路，假如缺乏了相混思路，则应用程序的正常机能可能单厢受到影响，能说，她们的Web是构筑在相混思路基础其内的，但若，她们的应用程序也是特别针对相混思路的一种实现。

比如，她们在应用程序上关上两个网页，两个是头条新闻，两个是阿宝概要，当应用程序的头条新闻网页去继续执行两个JAVA文档的这时会检查和那个JAVA是属于那个网页的，就是简而言之的检查和是否相混，只有和头条新闻相混的JAVA才会被继续执行，假如不是相混，所以在允诺数据时，应用程序就会收起，提示信息出访婉拒。

反正两个单纯范例，当她们在写网页的这时，想在网页中初始化其它中文网站的东西，比如说图象，相片，内容文档的这时，发现放到当

反正假如没相混思路，我能在不同域的iframe之间间接出访，我能间接把商业银行的中文网站用iframe冗余到我得中文网站里，网页调整到和商业银行网页一样，你输出搜索引擎进去，看见的是商业银行中文网站网页，这这时你输出帐号密码进行操作，我的主中文网站就能布吕马出访到商业银行网页的DOM结点，甚至于就领到了你的账号密码，可悲不。

说到这，非相混就是在允诺数据时，应用程序会婉拒允诺，不让你用其它地方的东西。

简而言之相混是指”协议+搜索引擎+端口”三者相同，即便两个不同的搜索引擎指向同两个ip地址，也非相混。

来个更直白的，她们用一张图给出下面URL相混检测的示例：

URL：http://pc.abc.com/index.html

相混检测示例

这样就明白了应用程序相混思路的原理了吧[嘿嘿]

布吕马

看完上面有的小伙伴就问，那不用不就行了吧，我不去其它出访请求，我就在同两个服务器出访允诺不就行了，哎，你还年轻啊，不晓得别人家的媳妇好啊[哈哈][哈哈]，开玩笑的啊。还是自家媳妇好！

布吕马的优势能充分地利用分布式集群系统，是某些服务压力分散到多台服务器上，就像她们两个团队做两个项目，分配下去，最后整合，这样效率就很高，但质量就得不到保证，同样的她们把某些服务分散到多台服务器，压力是小了，但安全性就得不到保证。

不布吕马的前提是前台网页和后台服务器都在两个服务器上，前提是应用得小，服务器压力不会很大，好处就是安全性高，处理单纯。

目前计算机行业正在向高集成、多并发、低耦合的方向发展，所有的基础服务单厢以USB的方式提供，就像百度地图、微信、小程序、支付宝等，这样一来，就会牵扯到布吕马，她们就要去化解，处理好布吕马和安全难题是猿们不许去做的事。

从上面她们晓得原因在于应用程序的相混思路引起了布吕马，也正是有了布吕马限制，她们才能安全上网，那有这时她们要去做这件事，就是去允诺其它资源，那怎么化解吗？甚至于就有了我这样的“好心人”写下了化解方法。

我来说说我化解过的布吕马难题，没化解过的我给你附上链接地址，大家能去看看，张大神的博客也有。

布吕马化解方案

1、通过jsonp布吕马

Jsonp是Json的一种“使用模式”，他就能化解应用程序遇到的布吕马难题，她们能动态创建script，再允诺两个带参网址实现布吕马通信。用Jsonp允诺得到的是JavaScript，相当于间接用JavaScript解析。

但是，只能实现get一种允诺。

1.1、原生js实现：

服务器端返回：

handleCallback({“status”: true, “user”: “admin”})

1.2、AJAX实现：

1.3、vue.js实现

2、document.domain + iframe布吕马

那个适合在主搜索引擎相同，子搜索引擎不同的情况下使用，这这时用它就显得很轻松了，她们能在两个网页都通过js强制设置document.domain为基础主域，这样就实现了同域。

2.1、父窗口（

http://www.test.com/a.html）

2.2、子窗口（http://child.com/b.html）

3、location.hash + iframe布吕马

通过location.hash + iframe来化解布吕马，就是说a网页想和b网页实现通信，能通过c网页来实现，三个网页之前能利用 iframe 的location.hash传值，相同域之间间接 js 出访来通信。

假如a和b不同域，b和c不同域，c和a同域，所以，c就能通过 parent.parent 来出访a网页中所有的对象。

3.1、a.html：(

http://www.test1.com/a.html)

3.2、b.html：(

http://www.test2.com/b.html)

3.3、c.html：(

http://www.test1.com/c.html)

4、 window.name + iframe布吕马

在 iframe 中，window.name是两个固定的值，她们能利用它实现布吕马。只要你不关闭网页，来回之间跳转改变URL，window.window.name的值。

4.1、a.html：(

http://www.test1.com/a.html)

4.2、fuzhu.html：(

http://www.test1.com/fuzhu.html)这是个辅助网页，啥也不用管。但是与a.html同域。

4.3、b.html：(

http://www.test2.com/b.html) <script> window.name = This is test2 data!; </script>

通过iframe的src属性由外域转向本地域，布吕马数据即由iframe的window.name从外域传递到本地域。那个就巧妙地绕过了应用程序的布吕马出访限制，但同时它又是安全操作。

5、postMessage布吕马

在h5中新增了postMessage方法，postMessage能实现跨文档消息传输，她们能通过Windows的message事件来监听发送跨文档消息传输内容。

令牌。

5.1、a.html ：（http:/ /test1.com/a.html）

5.2、b.html （http:/ /test2.com/b.html）

6、布吕马资源共享（CORS）

CORS是两个W3C标准，全称是”布吕马资源共享”（Cross-origin resource sharing）。它允许应用程序向跨源服务器，发出XMLHttpRequest允诺，从而克服了AJAX只能相混使用的限制。

浏览器将CORS允诺分成两类：单纯允诺（simple request）和非单纯允诺（not-so-simple request）。

注意：由于相混思路的限制，所读取的cookie为布吕马允诺USB所在域的cookie，而非当前页。

目前，所有应用程序都支持该机能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的布吕马化解方案。

6.1、原生ajax实现

6.2、jQuery ajax实现

6.3、Vue框架

a) axios设置

axios.defaults.withCredentials = true

b)vue-resource设置

Vue.http.options.credentials = true

7、nginx代理布吕马

个人觉得使用 nginx 是一种较为单纯间接彻底的办法。

7.1、 nginx配置化解iconfont布吕马

应用程序布吕马出访js、css、img等常规静态资源被相混思路许可，但iconfont字体文档(eot|otf|ttf|woff|svg)例外，此时可在nginx的静态资源服务器中加入以下配置。

location / { add_headerAccess-Control-Allow-Origin *; }

7.2、 nginx反向代理USB布吕马

布吕马原理：相混思路是应用程序的安全思路，不是HTTP协议的一部分。服务器端初始化HTTPUSB只是使用HTTP协议，不会继续执行JSJAVA，不需要相混思路，也就不存在跨越难题。

实现思路：通过nginx配置两个代理服务器（搜索引擎与domain1相同，端口不同）做跳板机，反向代理出访domain2USB，并且能顺便修改cookie中domain信息，方便当前域cookie写入，实现布吕马登录。

nginx具体配置：

前端代码示例：

var xhr = new XMLHttpRequest(); // 前端开关：应用程序是否读写cookie xhr.withCredentials = true; // 出访nginx中的代理服务器 xhr.open(get, http://www.domain1.com:81/?user=admin, true); xhr.send();

8、Nodejs中间件代理布吕马

通过Nodejs来进行代理USB。不过要实现那个前提是，前端开发环境要运行在Nodejs服务中，所幸的现在前端的开发自动化工具都是建立在nodejs上的，所以也没必要顾虑这么多。

8.1、非vue框架的布吕马（2次布吕马）

利用node + express + http-proxy-middleware搭建两个proxy服务器。

前端代码示例：

var xhr = new XMLHttpRequest(); // 前端开关：应用程序是否读写cookie xhr.withCredentials = true; // 出访http-proxy-middleware代理服务器 xhr.open(get, http://www.domain1.com:3000/login?user=admin, true); xhr.send();

中间件服务器示例：

8.2、vue框架的布吕马（1次布吕马）

利用node + webpack + webpack-dev-server代理USB布吕马。在开发环境下，由于vue渲染服务和USB代理服务都是webpack-dev-server同两个，所以网页与代理USB之间不再布吕马，无须设置headers布吕马信息了。

webpack.config.js部分配置：

9、WebSocket协议布吕马

原理：原生WebSocket API使用起来不太方便，利用webSocket的API，能间接new两个socket实例，然后通过open方法内send要传输到后台的值，也能利用message方法接收后台传来的数据。后台是通过

new WebSocket.Server({port:3000})

实例，利用message接收数据，利用send向客户端发送数据。

9.1、前端代码示例：

Nodejs socket后台代码示例：

10、Flash布吕马

年龄久远的开发人员们用过，我也只是见过，没用过，我也来整理一下。

原理很单纯，无须对Flash做任何处理，只要在目标域 b.domain.com 的根目录上放入两个思路文档crossdomain.xml即可。

Flash出访另两个域的数据，flash player 会自动从目标域根域加载思路文档 crossdomain.xml。

假如出访的数据所在的域在思路文档中，则数据将可出访。

10.1、建立crossdomain.xml

<?xml version=”1.0″?> <!–http://abcd.com/crossdomain.xml–> <cross-domain-policy> <allow-access-from domain=“www.baidu.com” /> <!–只允许百度主域出访–> <allow-access-from domain=“m.baidu.com” /> <!–只允许百度二级域m.baidu出访–> <allow-access-from domain=“*.baidu.com” /> <!–只允许百度所有域出访–> <allow-access-from domain=“*” /> <!–无出访限制–> </cross-domain-policy>

10.2、把文档 crossdomain.xml 放入被Flash出访的域(b.domain.com)根目录上即可。