H5&CSS基础 —— (067)从JSONP的跨域请求数据讲起
»
(001)免费的https证书
(002)关于栏目
(003)浏览器的可见区域
(004)为什么ReactJs
(005)禁止手机端缩放
(006)H5中的em
(007)页面的空格宽度
(008)H5特殊字符
(009)H5限定输入
(010)H5字体
(011)nginx重定向配置
(012)文本缩进
(013)flex布局
(014)渐变色边框
(015)常用DOM操作
(016)Media Query
(017)CSS选择器
(018)CSS隔行变色
(019)fetch
(020)JS操作属性
(021)scroll div
(022)JS for循环
(023)禁止文本被选中
(024)float控制精度输出
(025)Ionic全屏
(026)SVG圆
(027)SVG椭圆
(028)SVG椭圆弧
(029)SVG椭圆扇区
(030)使用WebAssembly
(031)JS操作单复选框
(032)SVG贝塞尔曲线
(033)threejs材质
(034)发光图片样式
(035)网页帧动画制作要点
(036)CSS渐变色字体
(037)SVG矩形
(038)开发能力换取报酬
(039)关闭输入框的浏览器默认样式
(040)粒子动画喷射器尾部
(041)禁止桌面端缩放JS
(042)桌面全屏网页CSS
(043)自缩放等宽高比div显示图片
(044)文本两端对齐样式
(045)单行ellipsis
(046)多行ellipsis
(047)字体变形样式
(048)去掉a标签的默认样式
(049)中文字符:全角空格
(050)DIV层叠DIV
(051)JS中计算1rem的像素值
(052)JS操作DOM父节点、相邻节点
(053)JS中DOM元素的绝对坐标
(054)ToolTips Div
(055)JS中的元素宽高
(056)Nginx播放流媒体设置
(057)滚动条样式
(058)JS操作数组的常用方法
(059)SVG填充样式定义
(060)SVG画线样式定义
(061)SVG画直线
(062)CSS图片背景的拼接
(063)WebSocket
(064)JS计算DPI的方法
(065)GIF透明或者不透明
(066)Nginx解决CORS跨域问题
(067)从JSONP的跨域请求数据讲起
(068)Div内内容水平垂直居中
(069)CSS背景图片保持长宽比
(070)CSS帧动画
(071)等宽字体显示网页
(072)打包
    我们知道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框架的话)。
«
——张人杰·www.v-signon.com学习者共勉
返回上一页
备案号:京ICP备19038994号-2
个人作品网站:www.up-task.com 主办:个人 English
免责声明:本网站3d地球模型购买自3d.3d66.com,如权利人发现存在误传其作品情形,请及时与本站联系。