window.onbeforeunload的正确用法

通过window.onbeforeunload方法,我们可以在用户离开当前页面时进行提示,通常情况是用户输入了某些内容而没有及时保存。

经常地,我们会被告知,onbeforeunload方法并不是所有的浏览器都支持的,的确是的。但是这并不影响我们对它的使用,因为主流的浏览器,或者说90%的浏览器都是支持的。

下面是引用mozilla社区关于onbeforeunload的浏览器支持情况

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1 1 4 12 3

个人测试下来,如果使用的是基于Presto内核的opera,即使最新版12.15仍然是不支持的,需要使用基于WebKit内核的opera next才可以支持。对于safari已经停止windows平台版本的开发,历史的东西就让它属于历史吧

更多关于onbeforeunload的描述可以看看mozilla的开发文档
https://developer.mozilla.org/en-US/docs/Web/API/window.onbeforeunload

微软也有相关的介绍
http://msdn.microsoft.com/en-us/library/ms536907(v=vs.85).aspx

接着要特别指出的是,正确使用onbeforeunload才能达到理想的效果

window.onbeforeunload = function(e) {
return ‘Dialog text here.’;
};

我们经常会看到如下的写法

window.onbeforeunload = function(e) {
window.event.returnValue = “确定离开当前页面吗?”;
};

这样的写法是有局限性的,IE、chrome是有效的,而在firefox、opera next下是无效的。

配置cas实现单点登录实例

结合cas官方文档及一篇中文教程,搭建单点登录的完整实例。

官方配置文档,配置的每一步描述都很详细,不过各软件版本较旧,文档中给出的有些链接已经失效。
https://wiki.jasig.org/display/CASUM/Demo

small_love的中文教程很精炼
http://blog.csdn.net/small_love/article/details/6664831

系统环境 – windows 7 32

下面是详细的配置过程:

由于某些网络原因,cas官方网站(www.jasig.org/cas)无法访问,故将文中涉及到的各软件版本及下载地址列出

Tomcat 6.0.37
http://archive.apache.org/dist/tomcat/tomcat-6/v6.0.37/bin/

cas-server 3.5.2
http://downloads.jasig.org/cas/

cas-client 3.2.1
http://downloads.jasig.org/cas-clients/

以上给出的仅为软件所在的目录,请根据自身需要下载相应的文件类型

1. JDK环境配置
不再赘述,请参考相关教程
cas-server-3.5需要jdk1.6以上的版本,本例jdk1.6.0_21

2. 使用JDK自带的keytool工具制作证书
如果将JAVA_HOME加入了系统path变量,在任意目录dos命令窗口都可以直接执行命令;否则需要在cmd中切换到java工具目录(例如C:\Program Files\Java\jdk1.6.0_21\bin)

// 生成证书并存储到自定义的证书库,输入的密码为证书库密码

keytool -genkey -alias tomcat -keyalg RSA -keystore C:/keystore
输入keystore密码:123456
再次输入新密码:123456
您的名字与姓氏是什么?
[Unknown]:compA
您的组织单位名称是什么?
[Unknown]:IT
您的组织名称是什么?
[Unknown]:Inc
您所在的城市或区域名称是什么?
[Unknown]:SZ
您所在的州或省份名称是什么?
[Unknown]:JS
该单位的两字母国家代码是什么
[Unknown]:CN
CN=compA, OU=IT, O=Inc, L=SZ, ST=JS, C=CN 正确吗?
[否]:是
输入的主密码
(如果和 keystore 密码相同,按回车):回车

// 从自定义证书库中导出证书文件,密码为自定义证书库的密码

keytool -export -file C:/server.crt -alias tomcat -keystore C:/keystore
输入keystore密码:123456
保存在文件中的认证

// 将证书导入JDK证书库中,此处要求输入的密码是JDK的证书库密码,默认为changeit

keytool -import -keystore “%JAVA_HOME%\jre\lib\security\cacerts” -file C:/server.crt -alias tomcat
输入keystore密码:changeit
所有者:CN=compA, OU=IT, O=Inc, L=SZ, ST=JS, C=CN
签发人:CN=compA, OU=IT, O=Inc, L=SZ, ST=JS, C=CN
序列号:52564247
有效期: Thu Oct 10 13:59:35 CST 2013 至Wed Jan 08 13:59:35 CST 2014
证书指纹:
MD5:4D:9A:FE:3E:CB:72:CF:FC:00:FF:74:96:0C:24:22:2D
SHA1:9E:61:59:FF:27:A2:3B:EA:58:06:31:F9:5B:BA:C4:FA:D8:1D:62:6B
签名算法名称:SHA1withRSA
版本: 3
信任这个认证? [否]: 是
认证已添加至keystore中

如果出现错误,可能是JDK的证书库密码已经修改过了,如果不知道密码,需要删除%JAVA_HOME%\jre\lib\security\cacerts文件,再重新导入证书,此时会自动新建一个证书库,会要求设置证书库的密码
keytool错误: java.io.IOException: Keystore was tampered with, or password was incorrect

修改证书库密码可以使用下面的命令

C:\Users\flyash>keytool -storepasswd -keystore “%JAVA_HOME%\jre\lib\security\cacerts”

3. 配置cas服务器
安装Tomcat 6.0.37,此处不再展开,请参考tomcat安装的相关说明教程。

解压下载的cas-server-3.5.2,将modules文件夹下的cas-server-webapp-3.5.2.war复制到tomcat的webapps目录下并重命名为cas.war

修改tomcat的conf目录下的server.xml文件,去掉SSL在8443端口配置的注释,修改后的配置如下

启动tomcat,访问https://localhost:8443/cas/可以看到cas的登录页面,浏览器会提示证书不受信任,忽略或者添加例外即可。

4. 配置cas客户端
本例中cas客户端和服务端使用同一个tomcat,仅用于演示,实际使用中,一般客户端与服务端分属于不同的tomcat(服务器)中。

解压下载的cas-client-3.2.1,将modules文件夹下的cas-client-core-3.2.1.jar和commons-logging-1.1.jar复制到tomcat下的webapps\examples\WEB-INF\lib目录。

修改tomcat的webapps\examples\WEB-INF下的web.xml文件,增加cas过滤器,这里cas服务器的地址不能是localhost,此处通过修改host文件自定义域名指向本机

修改host文件,增加一行,注意域名(主机名)小写

127.0.0.1 compa

重启tomcat,访问http://localhost:8080/examples/servlets/servlet/HelloWorldExample,会跳转到cas登录页面

输入用户名及密码admin,登录成功后返回到hello world页面

用户身份认证方式小结

因项目需要,对用户身份认证的方式进行了一番了解,作个小结。

http基本认证

客户端使用Base64算法编码用户名及密码后进行传输,服务端解码得到用户名和密码。

优点

基本认证方式简单,在安全的私有网络内可以采用。

缺点

以明文传输的密钥和口令很容易被拦截,安全性很差。

建议

一般不使用

 

http digest认证(摘要认证)

通过附加一些其它信息对用户名及密码采用md5生成摘要信息进行传输认证。

优点

比http基本认证更安全,使用http协议

缺点

安全选项是可选的,安全性可能会被降低;易于受到中间人攻击

建议

在无法实施https协议的情况下可以使用

 

client-cert认证(客户端证书认证)

通常使用X.509标准证书认证,需要使用SSL(Secure Sockets Layer 安全套接层)

优点

数据加密后传递,防止被中间人窃听,安全性较高

缺点

环境部署较复杂

建议

对数据保密性、安全性要求较高时,可以使用

 

Form认证

通过编写服务端及客户端程序,实现自定义方式验证用户身份,一般由客户端将用户名及密码加密后提交到服务端进行认证

优点

数据加密方式可定制,安全性较高

缺点

需要编写程序

建议

目前使用最多的一种认证方式

 

单点登录SSO

简介

单点登录(Single Sign On),简称为 SSO,主要用于在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

 

当用户第一次访问应用系统1的时候,因为还没有登录,会被引导到认证系统中进行登录;根据用户提供的登录信息,认证系统进行身份效验,如果通过效验,应该返回给用户一个认证的凭据--ticket;用户再访问别的应用的时候,就会将这个ticket带上,作为自己认证的凭据,应用系统接受到请求之后会把ticket送到认证系统进行效验,检查ticket的合法性。如果通过校验,用户就可以在不用再次登录的情况下访问应用系统2和应用系统3了。

优点

集中认证,一次登录即可访问多个应用系统

缺点

需要搭建中心身份认证服务器,应用系统需要做相应调整与认证服务器配合

建议

有多个应用系统时,应该使用

 

OAuth

简介

OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用。

 

OAuth允许用户提供一个令牌,而不是用户名和密码来访问他们存放在特定服务提供者的数据。每一个令牌授权一个特定的网站(例如,视频编辑网站)在特定的时段(例如,接下来的2小时内)内访问特定的资源(例如仅仅是某一相册中的视频)。这样,OAuth让用户可以授权第三方网站访问他们存储在另外服务提供者的某些特定信息,而非所有内容。

 

使用OAuth进行认证和授权的过程如下所示:

1. 用户访问客户端的网站,想操作自己存放在服务提供方的资源。

2. 客户端向服务提供方请求一个临时令牌。

3. 服务提供方验证客户端的身份后,授予一个临时令牌。

4. 客户端获得临时令牌后,将用户引导至服务提供方的授权页面请求用户授权。在这个过程中将临时令牌和客户端的回调连接发送给服务提供方。

5. 用户在服务提供方的网页上输入用户名和密码,然后授权该客户端访问所请求的资源。

6. 授权成功后,服务提供方引导用户返回客户端的网页。

7. 客户端根据临时令牌从服务提供方那里获取访问令牌 。

8. 服务提供方根据临时令牌和用户的授权情况授予客户端访问令牌。

9. 客户端使用获取的访问令牌访问存放在服务提供方上的受保护的资源。

优点

安全,用户密钥不会提供给第三方

任何服务提供商都可以实现OAUTH,任何软件开发商都可以使用OAUTH

缺点

OAuth 1.0存在一些不足,OAuth 2.0进行了修正

建议

用户需要访问第三方服务时使用

升级php请求等待响应时间变长

一个比较老的php项目,将php版本升级到5.4.x以后,请求响应变得缓慢,在firebug中查看等待响应时间要大于1s,本地的测试环境,项目不大,数据很少,不应该出现这么慢的响应速度。重要的是未升级php之前同样的代码是正常工作的,响应时间没有这么久的。升级了性能不可能更差了啊。

经查证,原来与ipv4和ipv6有关,PHP 5.3以上的版本在遇到localhost时会检测是ipv4还是ipv6,因此出现响应时间过长的情况。

项目中关于数据库连接的相关配置通常都会这样定义

// MySQL 服务器地址
define(“dbserver”, “localhost”);

很多情况下我们的web服务器和数据库服务器就是同一台电脑,所以会设置为localhost,这就是响应变慢的原因。

解决就很简单了,将localhost替换为127.0.0.1就可以了,这样就明确为ipv4地址了,不需要php在那边费时费力的猜测了。

define(“dbserver”, “127.0.0.1”);

再来看看我们的网站,是不是快的飞起来了呢。

apache支持mht类型文件

ppt文件另存为单个网页mht类型文件,直接使用ie打开该类型文件没有问题。放到服务器(apache)上之后,使用iframe嵌入该文件,浏览器无法正常显示。

因为apache默认是不支持mht文件格式的,我们需要手动添加一下。

打开apache安装目录下的conf/mime.types文件,找到这行

message/rfc822 eml mime

在后面添加mht

message/rfc822 eml mime mht

可能apache的版本不一样,message/rfc822后面的内容有所不同,只要在原有的基础上加上mht就可以了。

保存文件,重启apache后,访问mht文件就正常了。

解决embed嵌入视频叠加文字遮挡

使用embed标签可以很方便的将音频、视频等媒体资源嵌入到网页中,最近在一个项目中使用时遇到了一个问题。

根据需求,在视频内容的上层需要显示文字,类似电视节目中那种滚动字幕的效果。设置容器z-index未果,网上查了查,关于遮挡的问题大致有两种类型:

一是对于嵌入flash的情况,一般使用object标签,通过修改参数wmode为Opaque或Transparent就可以了,本文嵌入的为视频文件,这种不适用。

另外一种是针对嵌入ActiveX控件的情况,需要增加iframe设置透明,再配合z-index等等,试了多次,没有效果。

不得不再次海搜,偶然看到关于vb控制windows media player的文章里提到设置windowlessvideo属性为true可以叠加文字等效果,于是试了一下,果然ok。

原来解决如此轻而易举:

又看了下windowlessvideo属性的官方文档,通过设置为true使得视频成为无窗口模式,这样就与网页其它元素位于同一层面了,结合z-index就可以达到想要的效果了。

这里需要补习一下了,关于windows的有窗口元素和无窗口元素。

有窗口元素:
<object> 、ActiveX控件 、Plug-ins、DHTML Scriptlets、SELECT elements(即DropdownList的HTML表现)、IE5.01以前的IFRAMEs

无窗口元素:
无窗口的ActiveX控件、IE5.5以后的IFRAMEs、大部分的DHTML元素

关于html中遇到的各种遮挡问题,大多数都与有窗口元素有关。