前端面试知识点梳理之六——通信类

读立写生 2018-02-23

一、相关题目

前后端如何通信

如何创建ajax

什么是同源策略及限制

跨域通信的几种方式

二、问题解答

1.前后端如何通信

A.ajax:同源通信

B.WebSocket:不受同源策略限制

C.Cors：支持同源，也支持跨域

2.如何创建ajax

关注点：

1）xmlHttpRequest对象的工作流程

2）兼容性处理

3）事件触发条件

4）事件触发顺序

4.什么是同源策略及限制

同源策略限制从一个源加载的文档和脚本如何与另一个源的资源进行交互，这是隔离潜在恶意文件的一种安全机制。

所谓同源：协议，ip/域名，端口完全一致

cookie，localStorage和indexDB无法读取

DOM无法获得

ajax请求不能发送

: 读立写生

相关推荐

同源策略：JSONP和CORS

　　同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。　　但是两个源在达成共识后，需要相互传递数

somebodyoneday 0喜欢 / 0评论 2020-03-06

浏览器的同源策略类别及处理

一.要理解浏览器的同源策略，首先要理解http的请求过程。P3P是为了防止第三方滥用用户信息而出的，由于P3P协议默认情况下禁止frame使用cookie，而session一般是由cookie来保证的，所以session失效。为了解决这个问题，需要在要使用

cuiweisaidelike 0喜欢 / 0评论 2013-05-14

轻松搞定JSONP跨域请求

要理解跨域，先要了解一下“同源策略”。所谓同源是指，域名，协议，端口相同。所谓“同源策略“，简单的说就是基于安全考虑，当前域不能访问其他域的东西。在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的。title=api_v2提供的接口数据。q

sjunothing 0喜欢 / 0评论 2017-02-07

什么是同源/跨域？什么是CORS？什么是JSONP？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。同源又是什么呢？所谓同源是指，域名，协议，端口均相同。JSONP就可以解决跨域问题。JSONP是网页通过动态创建<script>元素向服务器发起请求

adonislu 0喜欢 / 0评论 2019-09-08

同源跨域二三事：从同源策略到 JSONP 技术略解

（一）什么是同源策略？同源策略是浏览器因安全性需要而诞生的沙盒机制中的其中一个策略。所谓同源，就是要三同：同协议，同域名，同端口号。其中任意一个不相同，都不能称之为同源。非同源网站间 JavaScript 脚本的行为受到了严格的限制，以提供必要的安全性。向

qianqianxiao 0喜欢 / 0评论 2019-09-08

HTML5 学习笔记

DHTML是DynamicHTML的简称，它是将HTML,CSS,JAVASCRIPT3种语言结合起来。

daweihe 0喜欢 / 0评论 2012-11-11

一次弄懂跨域问题

前端请求最常提到跨域问题，但是，很多开发者一直在跨域，还是搞不清楚什么是跨域？在我的深入研究后，写下此文，希望对你们有所帮助。同源策略1.什么是同源策略？同源策略下的web世界, 域的壁垒高筑, 从而保证各个网页相互独立, 互相之间不能直接访问, ifra

小傻 0喜欢 / 0评论 2019-06-30

前端跨域大总结

跨域这两个字就像一块狗皮膏药一样黏在每一个前端开发者身上，无论你在工作上或者面试中无可避免会遇到这个问题。为了应付面试，我每次都随便背几个方案，也不知道为什么要这样干，反正面完就可以扔了，我想工作上也不会用到那么多乱七八糟的方案。到了真正工作，开发环境有w

quanquanxiu 0喜欢 / 0评论 2019-06-29

轻松搞定JSONP跨域请求

所谓同源是指，域名，协议，端口相同。所谓“同源策略“，简单的说就是基于安全考虑，当前域不能访问其他域的东西。在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的。title=api_v2提供的接口数据。q=javascript&cou

sjunothing 0喜欢 / 0评论 2017-02-07

同源策略与CORS跨域

同源策略与CORS跨域PS:这篇文章是紧接着JSONP原理和Ajax学习与理解写的,有些内容是承接了上两篇文章.这篇文章只算是我的个人学习笔记,内容没有经过精心排版,也没有认真校对格式,一些错误请见谅.请求成功了,但是报了一个错加载失败了,所以,请求发送出

清闲居 0喜欢 / 0评论 2019-06-28

JSONP原理及JQUERY JSONP的使用

JSONP原理JSON和JSONPJSON是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧，不是很清楚的朋友可以去json.org上了解下，简单易懂。JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集

wormIT 0喜欢 / 0评论 2019-06-28

同源策略与跨域

同源策略同源策略same origin policy中的重要内容就是URL,统一资源定位符，俗称网址。URL中的resource资源就是css,js,html,img等内容。origin源包括当前页面的域名、协议、端口号。http协议默认端口是80，htt

sleep技术讨论区 0喜欢 / 0评论 2019-06-28

JavaScript 的同源策略

JavaScript 的同源策略

sunlizhen 0喜欢 / 0评论 2016-03-16

如何真正理解用Nginx代理来解决同源策略

经过对同源策略的了解，我们应该要消除对浏览器的误解，同源策略是浏览器做的一件好事，是用来防御来自邪门歪道的攻击，但总不能为了不让坏人进门而把全部人都拒之门外吧。没错，我们这种正人君子只要打开方式正确，就应该可以跨域。下面将一个个演示正确打开方式，但在此之前

jjjjjj 0喜欢 / 0评论 2019-06-28

jsonp跨域获取数据实现百度搜索

本菜鸡最近在写某个页面请求数据时，报了如下的错误。什么是同源策略？同源策略/SOP是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。同源策略可以算是 we

adonislu 0喜欢 / 0评论 2019-06-27

javascript同源策略及解决

1、避免跨域：重新修改请求策略，使其不跨域。

atpsoul 0喜欢 / 0评论 2015-06-16

【web安全系列】（一）浏览器安全

作为一个web开发人员，浏览器安全是不可或缺的知识。本文将给大家介绍一下浏览器的安全功能。同源策略同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器

YAQSecurity 0喜欢 / 0评论 2019-06-27

同源策略、跨域访问&JSONP

JSONP是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不

sjunothing 0喜欢 / 0评论 2015-04-01

javascript的安全策略

即它本身不支持某些功能。没有File对象，这样不能再用户系统中种植病毒；同样，它还没有任何的联网原语，javascript可以加载URL，但不能同web上的其他主机建立连接，这样避免了客户机作为攻击平台。同源策略，即一个脚本只能读取与它同源的窗口或文档属性

linkincsdn 0喜欢 / 0评论 2014-12-30

浏览器安全之同源策略

同源策略同源策略是一种约定,它是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能会受到影响.可以说Web是构建在同源策略的基础之上的,浏览器只是针对同源策略的一种实现.XMLHttpRequest受到同源策略的约束,不能跨域访问

xxjoy 0喜欢 / 0评论 2019-06-26

web安全一，同源策略与跨域

之所以要将同源策略与跨域写在一起，是因为存在浏览器的同源策略，才会存在跨域问题何为同源策略同源策略是浏览器实现的一种安全策略，它限制了不同源之间的文档和脚本交互的权限。只有同一个源的脚本才会具有操作dom、读写cookie、session 、ajax等敏感

cocleon 0喜欢 / 0评论 2019-06-26

同一生成元策略/同源策略 Same-origin policy

Same-originpolicy便是限制JavaScript代码权限的一种策略，浏览器都会遵守的。因为JavaScript太灵活，用得太乱，明明打开的是A网站，却可能有B网站的JavaScript在A的页面上运行！我的理解是，这里B网站的JS脚本实际上还

atpsoul 0喜欢 / 0评论 2014-01-12

浏览器的同源策略类别及处理

一.要理解浏览器的同源策略，首先要理解http的请求过程。<script type="text/javascript" src="www.test.com/a.js"/>，浏览器会再发出一个独立的请求，去

doyouhaveIET 0喜欢 / 0评论 2013-05-14

【转载】JavaScript跨域

使用JQuery Json的兄弟们经常会碰到这样的问题，使用AJAX往远程服务端发送请求，获取JSON数据并在前台页面进行操作。而这时前台往往会出现js错误，拒绝访问。同源策略不允许来自于其它站点的脚本运行于本站点之中。假设浏览器同时打开两个网站，一个是银

NONINETEEN 0喜欢 / 0评论 2013-03-27

什么是同源策略

同源策略，它是由Netscape提出的一个著名的安全策略，现在所有的可支持javascript的浏览器都会使用这个策略。而同源策略就为了防止这种事情发生.　。所以，tab1只能执行JavaScript1和JavaScript3脚本，而JavaScript2

xiaocaibai 0喜欢 / 0评论 2012-12-12

csrf以及xss网络安全技术

最近听了一节关于安全技术的分享，了解了诸如fuzz技术，缓存区溢出攻击，以及一些安全测试的工具。之前有了解过，CSRF以及XSS，不过时间一长就忘记了。所以在博客中记录下。跨站点请求伪造．以下简称CSRF。与CSRF有关的主要有三个Web安全策略：同源策略

xienue 0喜欢 / 0评论 2011-07-03

jsonp

jsonp 全名是 "json with padding"，主要是为了避开“同源策略”而跨站传输数据。不能取,所以就采取这种方式。同源策略基于这样一个事实：站点之间的dom互操作是受很大限制的，但是js可以。因此就是通过动态的向dom中

luck 0喜欢 / 0评论 2011-03-22

JavaScript同源策略和跨域访问实例详解

本文实例讲述了JavaScript同源策略和跨域访问。分享给大家供大家参考，具体如下：。理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示

AndrewFrank0zxy 0喜欢 / 0评论 2018-04-03

JS实现的ajax和同源策略(实例讲解)

AJAX使用Javascript技术向服务器发送异步请求；AJAX无须刷新整个页面；因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；

CXPOwen 0喜欢 / 0评论 2017-12-01

Google Chrome Blink同源策略绕过漏洞(CVE-2016-5145)

Google Chrome Blink同源策略绕过漏洞发布日期：2016-08-07更新日期：2016-08-09受影响系统：。CVE ID: CVE-2016-5145Google Chrome是由Google开发的一款Web浏览工具。Google Ch

blackeys曰 0喜欢 / 0评论 2016-08-09

Google Chrome 同源策略绕过漏洞(CVE-2016-1711)

Google Chrome 同源策略绕过漏洞发布日期：2016-07-25更新日期：2016-07-27受影响系统：。CVE ID: CVE-2016-1711Google Chrome是由Google开发的一款Web浏览工具。

mywebsos 0喜欢 / 0评论 2016-07-27

Google Chrome FrameLoader::startLoad同源策略绕过漏洞(CVE-

CVE ID: CVE-2016-1697Google Chrome是由Google开发的一款Web浏览工具。

mywebsos 0喜欢 / 0评论 2016-06-10

Google Chrome 扩展子系统同源策略绕过漏洞(CVE-2016-1696)

Google Chrome 扩展子系统同源策略绕过漏洞发布日期：2016-06-05更新日期：2016-06-07受影响系统：。CVE ID: CVE-2016-1696Google Chrome是由Google开发的一款Web浏览工具。Google Ch

绝不后退 0喜欢 / 0评论 2016-06-07

Google Chrome forEachForBinding函数同源策略绕过漏洞(CVE-2016

Google Chrome forEachForBinding函数同源策略绕过漏洞发布日期：2016-05-11更新日期：2016-05-16受影响系统：。CVE ID: CVE-2016-1668Google Chrome是由Google开发的一款Web

mywebsos 0喜欢 / 0评论 2016-05-16

Google Chrome TreeScope::adoptIfNeeded函数同源策略绕过漏洞(

CVE ID: CVE-2016-1667Google Chrome是由Google开发的一款Web浏览工具。

villa 0喜欢 / 0评论 2016-05-16

Google Chrome DOM绕过同源策略漏洞(CVE-2015-6768)

Google Chrome DOM绕过同源策略漏洞发布日期：2015-07-16更新日期：2015-12-08受影响系统：。CVE ID: CVE-2015-6768Google Chrome是由Google开发的一款Web浏览工具。Google Chro

SAP探索之路 0喜欢 / 0评论 2015-12-08

Google Chrome同源策略绕过漏洞(CVE-2015-1302)

Google Chrome同源策略绕过漏洞发布日期：2015-11-11更新日期：2015-11-12受影响系统：。CVE ID: CVE-2015-1302Google Chrome是由Google开发的一款Web浏览工具。Google Chrome 4

实用至上 0喜欢 / 0评论 2015-11-12

Google Chrome同源策略绕过漏洞(CVE-2015-1303)

Google Chrome同源策略绕过漏洞发布日期：2015-10-11更新日期：2015-10-12受影响系统：。CVE ID: CVE-2015-1303Google Chrome是由Google开发的一款Web浏览工具。

wblobin 0喜欢 / 0评论 2015-10-12

WebKit同源策略多个安全限制绕过漏洞

WebKit同源策略多个安全限制绕过漏洞发布日期：2015-08-13更新日期：2015-08-26受影响系统：。WebKit Open Source Project WebKit Apple iOS 5.xApple iOS 4.x描述：。BUGTRAQ

江湖郎中路 0喜欢 / 0评论 2015-08-26

js同源策略详解

本文较为详细的分析了js同源策略。分享给大家供大家参考。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。这里的同源指的是：同协议，同域名和同端口。它的精髓很简单：它认为自任何站点装载的信赖内容是不安全的。在

么么茶技术网录 0喜欢 / 0评论 2015-05-21

Google Chrome绕过同源策略漏洞(CVE-2015-1267)

Google Chrome绕过同源策略漏洞发布日期：2015-06-15更新日期：2015-06-30受影响系统：。CVE ID: CVE-2015-1267Google Chrome是由Google开发的一款Web浏览工具。Google Chrome 4

villa 0喜欢 / 0评论 2015-06-30

Google Chrome绕过同源策略漏洞(CVE-2015-1268)

Google Chrome绕过同源策略漏洞发布日期：2015-06-15更新日期：2015-06-30受影响系统：。CVE ID: CVE-2015-1268Google Chrome是由Google开发的一款Web浏览工具。

potatomagic 0喜欢 / 0评论 2015-06-30

JSONP跨域GET请求解决Ajax跨域访问问题

难道是这里的问题，经过检查和调试，发现原来是同源策略在作怪，我们知道，JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same- Origin Policy”。这一策

xiyang 0喜欢 / 0评论 2019-04-19

浅析JSONP解决Ajax跨域访问问题的思路详解

代码没怎么改动，唯一修改的地方就是jQuery的ajax方法中的url地址。难道是这里的问题，经过检查和调试，发现原来是同源策略在作怪，我们知道，JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术。在JavaScript中，有一个

ivoryqin 0喜欢 / 0评论 2016-05-31

探秘ajax跨域请求

ajax，用苍白的话赞扬：很好。虽然ajax很好，但在使用起来也会有一定的限制，出于安全考虑，不允许跨域通信。如果尝试从不同的域请求数据，会出现安全错误。同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。这意味着浏览器隔离来自不同源的内容，以

ZHOUJIANTANK 0喜欢 / 0评论 2019-04-04

浏览器同源策略及跨域的解决方法

什么是浏览器同源策略同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。它的核心就在于它认为自任何站点装载的信赖内容是

前端外刊评论 0喜欢 / 0评论 2018-05-20

跨域访问与同源策略

因为在同一个浏览器窗口中能够同时打开多个网站的页面，而且它们都处于同一个会话中，如果不禁止跨域访问则会造成用户隐私数据泄露和登录身份冒用的问题，所以浏览器会使用同源策略限制跨域访问。在浏览器中，通过JS代码访问不同域名下的URL或者iframe时，会被禁止

BitTigerio 0喜欢 / 0评论 2018-04-21

浏览器的同源策略与跨域处理

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。由于CSS的松散的语法规则，CSS的跨域需要一个设置正确的Content-Type消息头。站点可以使用X-Frame-Options消息头来阻止这种形式的跨域交互。使用CORS允许跨

读立写生 0喜欢 / 0评论 2018-04-04

再也不学AJAX了！（三）跨域获取资源 ① - 同源策略

我们之前提到过，AJAX技术使开发者能够专注于互联网中数据的传输，而不再拘泥于数据传输的载体。通过AJAX技术，我们获取数据的方式变得更加灵活，可控和优雅。但在一些合理的场景中，我们又不得不想办法绕过同源策略，实现跨域请求资源。因此“跨域技术”一直成为开发

优主张 0喜欢 / 0评论 2017-12-04