跨域请求怎么解决？
前言项目中需要将第三方系统中，对应用户的代办消息集成到系统中。对方提供了获取对应用户的接口url，但是由于两边的系统是部署到客户现场不同IP的虚机上的，所以进行ajax请求的时候是属于跨域请求的。之前基本没有出现过这种情况，但是知道有跨域这个点，具体怎么解决，只知道ajax有datatype:'jsonp'是解决跨域请求的。但是当时并没有解决问题，因为后台数据接口并没有提供jsonp格式的函数方法，而只是json。用ajax解析json的那一套去解析jsonp,当然行不通了。跨域请求的迹象？No'Access-Control-Allow-Origin'headerispresentontherequestedresource.此时就是在提示你存在跨域请求，我也是在这个时候发现了进行了跨域请求。然后，我在ajax中添加了datatype:'jsonp'(不了解的童鞋请查看jquery官方文档中的$.ajax部分)进行跨域请求。但是，添加以后，居然还是提示错误：UncaughtSyntax
说说 JSONP 和 XSS
JSONP先说JSONP。通过JavaScript调用，被调用域名和当前页面域名不一致，就需要用到JSONP。不过我不太推荐这么跨域调用。如果真的要解决跨域问题，我觉得有几个不错的方法，一个是两组服务器配上相同的域名。还有就是自己的服务器nginx上做一个转发。XSS跨站脚本（英语：Cross-sitescripting，通常简称为：XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。上面是维基百科的解释。实际一点的例子可以看看我文本的头图。页面被注入了一张图片。恶意的注入可以注入一段脚本。问题原因浏览器为了保证跨域访问的安全性，会默认发一个callback参数到后台，接口拿到这个参数之后，需要将返回的JSON数据外面包上callback参数。具体的返回格式：CALLBACK(JSON)如果ajax请求是JSONP请求，返回的内容浏览器还会自动检测，如果不是按这个格式返
xhr/jsonp请求之abort详解
当你看到文章标题的时候可能会觉得这是一个老生常谈的话题。前端开发中向后端发起xhr（XMLHttpRequest）请求（代表性的就是熟悉的ajax）是再正常不过的事。但在前端开发过程中，不怎么重视xhr的abort（中止掉xhr请求，及表示取消本次请求）。往往会带来一些不可意料的结果。比如：切换tab，发起xhr请求，渲染同一个列表。就这么简单的拉取数据渲染列表的功能，并且可以根据tab切换。想想应该是很简单。但是假如你只顾着发起xhr请求，而没有abort掉它，想想会发生什么。很有可能就是当前选中的tab数据，并不是你想要的。说白了就是数据错了。这时候你可能就要考虑是不是xhr请求返回数据的顺序问题。答案是肯定的，xhr请求返回数据顺序是不固定的。所以你要做的就是abort掉你之前的xhr请求，然后再发起一个新的xhr请求。结合上面所说的例子可以知道xhr使用不当会存在以下问题：容易出现页面最终数据与状态不一致的问题，这可能再列表筛选是出现的概率比较大。xhr请求达到一定数量之后，浏览器就会显得非常的
Ajax跨站请求
2、使用jsonp跨域请求。服务器：$data=json_encode(array('msg'=>'msg....'));die($_REQUEST['function_name_index'].'('.$data.')');ajax请求：$.ajax({url:url,dataType:'jsonp',jsonp:'function_name_index',jsonpCallback:'function_name',success:function(data){console.log(data.msg);}});在ajax请求中，使用jsonp数据格式，所以讲dataType参数设置为jsonp，平常，还加到了jsonp和jsonpCallback两个参数，结合代码，不难看出这两个参数作用：jsonp的作用是设置服务器获取回调函数名称参数的下标参数，jsonpCallback的作用就是设置回调函数，相当于input标签中name和value，jsonp对应name，value对应jsonpCallback。
跨域 --- 我该如何爱你
跨域错误提示信息是不是又看到了熟悉的No'Access-Control-Allow-Origin'(这是跨域的经典标志),惊不惊喜，意不意外，是不是很熟悉！认识URL网址URL地址：http://www.justbecoder.com:80/article/index.htmlhttp超文本传输协议www.justbecoder.com域名80端口号article/index.html文件目录与文件名同源策略概念同源策略是浏览器最核心也是最基本的的安全功能，是指我们在发送网络请求时请求必须要遵守同源策略，即域名、协议、端口号都要相同意义是为了保证用户信息的安全，防止恶意的网站窃取数据。触发跨域的场景以及原因当同源策略中的域名、协议、端口号有一样不相同时，都会触发跨域假定当前在的网址是：htt
ReqProxy
最近在做一个小玩意，用的别人的api，在本地调试的还好，部署到服务器上的时候发现对api的请求都是禁止跨域，可惜的是也没有提供jsonp接口所以自已写了一个简单的代理http(s)请求的Servlet，用这个Servlet来访问别人的服务器，同时把结果原样返回来。为了让自己的服务器支持跨域可以设置resp.setHeader("Access-Control-Allow-Origin","*"),或者提供对结果进行jsonp封装的选项参数url要代理的url,不携带http(s)和?后面的内容urlParm原url?后面的参数，需要进行一处理?keywords=尽头&page=1=>keywords:尽头;page:1reqProperty用于setRequestProperty，不常用，构造同urlParmpost是否是post请求，默认falsehttps是否是https请求，默认falserespText是否返回文本，默认false，直接返回文件流r
前端跨域有哪些种方法及介绍？
特别注意两点：第一：如果是协议和端口造成的跨域问题“前台”是无能为力的第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。“URL的首部”指window.location.protocol+window.location.host，也可以理解为“Domains,protocolsandportsmustmatch”。前端解决跨域问题1>document.domain+iframe(只有在主域相同的时候才能使用该方法)(1)在www.a.com/a.html中：document.domain='a.com';varifr=document.createElement('iframe');ifr.src='http://www.script.a.com/b.html';ifr.display=none;document.body.appendChild(ifr);ifr.onload=function(){var
HCTF2017-Deserted place-Writeup
DesertedplaceDescriptionmaybenothinghereflaginadmincookieNowScore820.35Teamsolved3出题思路来自于一个比较特别的叫做SOME的攻击方式，全名SameOriginMethodExecution，这是一种2015年被人提出来的攻击方式，可以用来执行同源环境下的任意方法，2年前就有人做了分析。原paperhttp://blog.safedog.cn/?p=13https://lightless.me/archives/same-origin-method-exection.html题目源码如下https://github.com/LoRexxar/HCTF2017-Deserted-place我们一起来研究一下SOME？首先我们一起来探究一个SOME是什么？SOMe,SameOriginMethodExecution,这是BenHayak在BlackHatEorope2014演讲的题目。在随后的15
HCTF2017 部分 Web 出题思路详解
作者：LoRexxar'@知道创宇404实验室11月12日结束的HCTF2017，我总共出了其中4道题目，这4道题目涵盖了我这半年来接触的很多有趣的东西。下面就简单讲讲出题思路以及完整的Writeup。babycrackDescriptionjustbabycrack1.flag.substr(-5,3)=="333"2.flag.substr(-8,1)=="3"3.Everywordmakessence.4.sha256(flag)=="d3f154b641251e319855a73b010309a168a12927f3873c97d2e5163ea5cbb443"NowScore302.93Teamsolved45AWorldRestoredDescription:nothinghereorallthehereps:flaginadmincookieflagisloginasadminNowScore674.44Teamsolved7AWorldRestoredAgainD
JSONP原理探究
JSONP是一直种解决跨域问题的方案，实现的原理来自于页面中的
retina屏中1物理像素border的实现
问题的产生retina屏会以2个（乃至3个）物理像素来显示一个CSS像素（1px），所以在CSS中指定1px的边框实际占据的却是2个以上物理像素，在retina屏用户体验较差。几种解决方案（考虑1px=2dip）使用0.5px问题：只在FirefoxandSafari8+支持，安卓不支持。使用图片采用一张图片作为border：border-width:1px;border-image:url(border.gif)2repeat;border-img属性会将图片（如上图）切为九宫格，放到边框的四边和四角。由于图片外沿一半为实色、一半为透明，所以1px的图片边框，实际显示出的就是0.5px的边框了。问题：无法设置颜色边框实际还是占用了1px的空间不使用base64的情况下，要加载多一张图片使用渐变原理类似上面的图片，将1px的渐变拆为两半，一半透明一半实色，但好处是作为背景不会实际占据盒子的0.5px空间。background:linear-gradient(180deg,black,black50%,
探究 CSS 解析原理
吃早饭的时候，同事随意问了一句：“你知道CSS是怎么解析的吗？”，我一头雾水。对哦，作为前端，每天都在与CSS打交道，我竟然忽视了最基本的原理。一、WebkitCSS解析器浏览器CSS模块负责CSS脚本解析，并为每个Element计算出样式。CSS模块虽小，但是计算量大，设计不好往往成为浏览器性能的瓶颈。CSS模块在实现上有几个特点：CSS对象众多(颗粒小而多)，计算频繁(为每个Element计算样式)。这些特性决定了webkit在实现CSS引擎上采取的设计，算法。如何高效的计算样式是浏览器内核的重点也是难点。Webkit使用了自动代码生成工具生成了相应的代码，也就是说词法分析和语法分析这部分代码是自动生成的，而Webkit中实现的CallBack函数就是在CSSParser中。CSS的一些解析功能的入口也在此处，它们会调用lex,parse等生成代码。相对的，生成代码中需要的CallBack也需要在这里实现。举例来说，现在我们来看其中一个回调函数的实现
使用 colgroup 和 col 实现响应式表格
Table在项目使用中十分频繁，特别是在后台管理系统中，table无疑是数据展示的第一公民，在早些年的网页中，table也是网页布局的第一选择，然后使用好table并不容易，其它有很多子元素和属性需要了解，在实际使用中，table的自适应也十分重要，如果使用不当，就会导致数据展示混乱，影响用户阅读体验，table可以说是一把利刃，只要使用恰当，可以简化DOM结构，减少很多样式编写，提升布局效率。基础知识表格的结构table(summary)captioncolgroup(widthspan)col(width)theadtr>th(colspanrowspan)tbodytr>td(colspanrowspan)tbodytr>td(colspanrowspan)tfoottr>td(colspanrowspan)说明summary用于对描述表格caption用于显示表格标题colgroup&col用于控制列的样式thead和tfoot在一张表中都只能有一个，而tbody
你从来没了解过的CSS浮动 | Design Shack
你从来没了解过的CSS浮动浮动到底是做什么呢？他们是如何影响相关元素的盒模型的呢？浮动的元素与内联元素有什么不同呢？制定浮动元素的位置的具体规则是什么？clear属性是如何工作的，并且它的作用是什么？即使是经验丰富的开发者也会在浮动上出错，所以理解浮动的行为能帮你摆脱面对CSS的很多困扰。即使你认为你已经了解了关于浮动的所有知识，我们也会深入到你可能会学习到新知识的地步。什么是浮动？在CSS中一些元素是块级元素，他们会自动启用新的一行。例如，如果你创建2个单独的单词段落元素，它们不会相互流入而会各自出现在单独的一行。另一种元素是内联元素，它们会与之前的内容保持显示在“一行”。举个例子，有个锚标签，它可以出现在像段落这个元素之内而且不会造成任何额外的空白，也不会另起一行。改变这种布局模型的一种方式是使用浮动，它允许给定的元素挪动到它那一行的一侧，并且其他内容向下流动。一个右浮动的元素将被推动直到它的容器的右侧，并且内容会沿着它的左侧向下流动，一个有浮动的元素会被挪动到左侧，内容会沿着它的右侧向下流动。有一个经典的例子是当你将一
BEM实战之扒一扒淘票票页面
BEM是一套CSS国际命名规范，是一个非常有用的功能强大且简单的命名约定，它能使前端代码更易读，易于理解易于扩展。BEM是块（block）、元素（element）、修饰符（modifier）的缩写。B：Block是块，一个独立的组件，将所有东西都划分成一个组件E：Element是块中的子节点，为了表明子节点属于哪个块，写法是block__elementM：Modifier声明某个节点的修饰状态我们以一个搜索框来简单说明上述三个东西的用法：这个搜索框就可以看作一个块Block，这个块里由两个子节点，一个是输入区域input，还有一个是查询按钮button。对于这个块的命名，按照BEM法则，我们可以写成以下这样：
spring boot系列02--Thymeleaf+Bootstrap构建页面
上一篇说了一下怎么构建springboot项目接下来我们开始讲实际应用中需要用到的先从页面说起页面侧打算用Thymeleaf+Bootstrap来做先共通模板页Guaishushu