HTTP协议又冷又实用的技能大全( 三 ) _小知识

黑客也是用户。他可以编辑一段Javascript脚本作为内容提交上去。如果服务器没有做好防范，这段脚本就会在生成的网页中运行起来。当其它用户在登陆的状态下来浏览这个网页的时候，就悲剧了。
防范XSS一般是通过对输出的内容进行内容替换做到的。在HTML页面中不同的位置会有不同的内容替换规则。
比较常见的是使用HTML entity编码将HTML标签之间的内容中的一些特殊的字符进行转码。
<div># safe now<script>send_to_hacker(document.cookie)</script></div>还有些UGC内容在HTML标签的属性中、Javascript的变量中、URL、css代码中，他们转码的规则并不一样，具体方法可以去google相关文档。
13、跨域
跨域是个很头痛的问题。
当你有多个后端服务，但是只有一个前端的时候，你想做前后端分离，就会遇到跨域问题。你发现你的前端js调用后端服务时控制台告诉你不ok 。然后只好把这些服务都挂在了同一个nginx域名下面，通过url前缀区分。

文章插图

这时候你会想，跨域太TM讨厌了。既然跨域这么讨厌，那为什么浏览器非要限制跨域呢？
还是安全原因。
让我们回到上文的搭便车攻击(Session Riding) ，也就是骑着别人的会话来搞事情。
假设现在你的浏览器开了一个站点A ，登陆了进去，于是cookie便记录了会话id 。
然后你又不小心开了另一个站点B ，这个站点页面一打开就开始执行一些恶意代码。这些代码的逻辑是调用站点A的API来获取站点A的数据，因为可以骑着(Ride)站点A的会话cookie 。而这些数据正好是用户私密性的。于是用户在站点A上的私有信息就被站点B上的代码窃走了。这就是跨域的风险。
但是有时候我们又希望共享数据给不同的站点，该怎么办呢？
答案是JSONP & CORS
14、JSONP(JSON Padding)
JSONP通过HTML的script标记实现了跨域共享数据的方式。JSON通过在网页里定义一个回调方法，然后在页面上插入一个动态script标签，指向目标调用地址。服务器会返回一段javascript代码，一般是some_callback(data)这种形式的回调。该段代码会在浏览器里自动执行，于是网页就得到了跨域服务器返回的数据。

文章插图

因为JSONP是不携带cookie信息的，所以能有效避免搭便车攻击。JSONP是否可以获取到数据还需要服务器对这种调用提供显示支持，服务器必须将数据以javascript代码的形式返回才可以传递给浏览器。
15、CORS(Cross-Origin Resource Sharing)
JSONP的不足在于它只能发送GET请求，并且不能携带cookie 。而CORS则可以发送任意类型的请求，可以选择性携带cookie 。
CORS是通过Ajax发送的跨域请求技术。CORS的请求分为两种，一种是简单请求，一种是复杂请求。简单请求就是头部很少很简单的GET/HEAD/POST请求。复杂请求就是非简单请求。
浏览器发现Ajax的请求是跨域的，就会在请求头添加一个Origin参数，指明当前请求的发起站点来源。服务器根据Origin参数来决定是否授权。
如果是简单请求， Ajax直接请求服务器。服务器会当成普通的请求直接返回内容，不同的是还会在响应头部添加几个重要的头部，其中最重要的头部是Access-Control-Allow-Origin: http://example.com 。
浏览器如果在响应中没有读到这个头部，就会通知Ajax请求失败。虽然服务器返回了数据，浏览器也不让脚本读到数据，这就保证了跨域的安全。服务器就是通过请求的Origin参数来决定要不要响应Access-Control-Allow-Origin头部来决定是否允许指定网站的跨域请求。
如果是复杂请求，要走一个预检的流程。预检就是浏览器先向服务器发送一个Method为Options的请求，如果服务器允许跨域请求，浏览器再发起这个Ajax请求。所以CORS的复杂请求会比简单请求额外耗费一个TTL的时间。
CORS的细节请参见大神阮一峰的博文《跨域资源共享CORS详解》

【HTTP协议又冷又实用的技能大全】