1、
web资源防盗链
- 盗链是什么? 为什么要防?
在自己页面上显示一些不是自己服务器的资源
(图片、音频、视频、css、js等)
由于别人盗链你的资源会加重你的服务器负担,所以我们需要防止
可能会影响统计
-
防盗链是什么? 有哪几种方式?
防止别人通过一些技术手段绕过本站的资源展示页,盗用本站资源,让绕开本站资源展示页面的资源链接失效
大大减轻服务器压力1、Referer (易伪造referer,安全性低)2、加密签名 (安全性高)
防盗链的工作原理
通过Referer,服务器可以检测到访问目标资源的来源网站,如果是资源文件,则可以跟踪到显示它的网页地址。一旦检测到来源网站不是本站进行阻止
通过签名,根据计算签名的方式,判断请求是否合法,如果合法则显示,否则返回错误信息
Referer实现
以Nginx为例,前提加载ngx_http_referer_module模块
//指令valid_referers 全局invalid_referer
location ~* \.(gif|jpg|png|webp)$ {
valid_referers none blocked domain.com *.domain.com ;
if ($invalid_referer) {
return 403;
#rewrite ^/ http://www.domain.com/403.jpg;
}
}
注意:为什么要none呢?因为如果通过浏览器直接访问资源,referer就是为空,所以这种方式不能彻底阻挡住盗链。
加密签名
以Nginx为例,前提加载第三方模块HttpAccessKeyModule实现防盗链
location ~* \.(gif|jpg|png|webp)$ {
accesskey on;
accesskey_hashmethod md5;
accesskey_arg key;
accesskey_signature "mysrc$remote_addr";
}
减少HTTP请求次数
发现问题
80~90%是花费在页面引用控件的加载上,只有10~20%是花费在文档的加载上
HTTP/1.1协议规定请求只能串行发送,话句话就是100个请求,只能一个一个发送,上一个请求完成才能进行下一个请求如何改善?
减少引用控件数量,从而达到减少HTTP请求次数
如何实现减少请求?
1、图片地图
原理:把多张图片合成一张,再使用<map>标签来实现对图片上不同区域的链接
<img src="img/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
2、CSS Sprites(雪碧图)
原理:合拼图片,再使用css的background-image和background-position来指定显示元素
CSS Sprites与图片地图性能差不多,但CSS Sprites更加简单灵活
3、合并JS与CSS文件
加载一个JS文件比加载多个JS文件要快
一般会使用前端自动构建工具打包合并
4、图片使用base64编码
注意:图片base64除了可以使用在<img>中,还可以使用在css的background-image中