»
(067)从JSONP的跨域请求数据讲起
我们知道https网站浏览器的ajax有同源限制。那么,应该如何让一个https的网站请求到其他协作网站的json数据呢? 方法有几种: 1、使用自己网站的nginx代理协助网站的服务器的接口。 2、使用<script>标签及jsonp去请求有跨域限制的网站接口(适用于任何https服务器)。 3、如果网站是http协议而不是https协议,则直接要求协作网站在协作网站加入头:Access-Control-Allow-Origin:*并且配置http协议就可以让非同源的任何页面的ajax请求到自身的接口。如果要避免使用这种方法来请求自身的任何数据,也只需要关闭http接口改用https,或者去除代理服务器的:Access-Control-Allow-Origin:*头即可。 以上方法中,方法3需要协作网站的配合,方法1需要后端代理服务器的配置。只有方法2是单单靠前端就能完成和实现的。 而使用JsonP显示协作网站的数据的关键点在于协作网站的返回内容上必须是一个方法的调用代码。 如果协作网站同意后端返回如下的字符串:webpageFunction([{"name":"Alex","original Name":"Eric"}]); 那么,协作网站的后端数据[{"name":"Alex","original Name":"Eric"}]就有可能让当前https网站使用。 这种可能只要在当前网站定义函数webpageFunction(json){}来显示数据即可。 对于js的CDN,经过百度AI的问答,发现CDN上的JavaScript可以做任何事,只要CDN配置:Access-Control-Allow-Origin:*或者Access-Control-Allow-Origin: v-signon.com就能接收非自身域名下的<script>标签请求。因为,https的同源限制只在于使用https协议的ajax请求时浏览器的XMLHttpRequest请求上做了同源的判断。 虽然,JsonP显示协作网站的数据需要协作网站返回一个特殊的字符串。但是,您有没有发现:在https协议下,通过<script><img><link>标签仍然可以跨域地请求js文本内容、图片和css文件。如果在请求的url上拼接上参数传递给经过伪装的CDN服务器,那样是不是很可怕? 所以,按照规范的开发过程,所有的前端引入的js、img、css都需要做安全性验证,以防止本站数据的向外发送,也就是搜索一遍"<script"、“<img”、"<link"以及“http”和“https”,看看众多js代码中有没有引入其他网站的接口的。 检查完以上的搜索内容后,还需要进一步防止恶意js代码通过拼接字符串来实现"<script"、“<img”、"<link"标签的引入。也就是搜索"eval"、"document.write"以及"innerHTML",查看有没有相关的恶意代码调用。 好了,网页页面还是推荐使用纯JS函数加自定义函数,后台系统还是推荐jQuery框架(如果没有其他用简单的几个文件写完的js框架的话)。