一、HTML5新标签
1，新标签的XSS:
一些XSS Filter如果建立了一个黑名单的话，则可能就会覆盖到HTML5新增的标签和功能。
例如video、audio等
2，iframe的sandbox:
<iframe> 标签一直以来都为人所诟病。挂马、XSS、ClickJacking等攻击中都能看到它。浏览器厂商也一直在想办法限制iframe执行脚本的权限，比如 跨窗口访问会有限制，以及IE中的<iframe>标签支持security属性限制脚本的执行，都在向着这一目标努力。
在 HTML5中，专门为iframe定义了一个新的属性，叫sandbox。使用sandbox这一属性后，<iframe>标签加载的内容将 被视为一个独立的”源“，其中的脚本将被禁止执行，表单被禁止提交，插件被禁止加载，指向其他浏览器对象的链接也会被禁止。
sandbox属性可以通过参数来支持更精确的控制。有以下几个值可选：
allow-same-origin: 允许同源访问
allow-top-navigation: 允许访问顶层窗口
allow-forms: 允许提交表单
allow-scripts: 允许执行脚本
但有的行为即使设置了allow-scripts,也是不允许的，比如”弹出窗口".
一个iframe的实例如下：
<iframe sandbox="allow-same-origin allow-forms allow-scripts" scr="http:?/maps.example.com/embedded.html"></iframe>
毫无疑问,iframe的sandbox属性将极大地增强应用使用iframe的安全性。
3、Link Types：noreferrer
在HTML 5中为<a>标签和<area>标签定义了一个新的LInk Types:noreferrer.
顾名思义，标签指定了noreferrer之后，浏览器在请求该标签指定的地址时将不再发送Referer。
<a href="http://supershll.blog.163.com/blog/xxx" rel="noreferrer"> test</a>
这种设计是处于保护敏感信息和隐私的考虑。因为通过Referer，可能会泄漏一些敏感信息。
4、Canvas的妙用：
<canvas>标签让Javascript可以在页面中直接操作图片对象，也可以直接操作像素，构造出图片区域。Canvas的出现极大地挑战了传统富客户端插件的地位，开发者甚至可以用Canvas在浏览器上写一个小游戏。
Canvas甚至可以用来破解验证码。
二、其他安全问题：
1、Cross-Origin Resource Sharing
浏览器实现的同源策略限制了脚本的跨域请求。但互联网的发展趋势是越来越开放的，因此跨域访问的需求也变得越来越迫切。开发者们不得不想方设法的实现一些“合法”的跨域技术，比如jsonp、iframe跨域等技巧。
W3C决定指定一个新的标准来解决这个问题。
假设从http://www.a.com/test.html发起一个跨域的XMLHttpRequest请求，请求的地址为:http://www.b.com/test.php
如果服务器www.b.com返回一个HTTP Header:
Access-Control-Allow-Origin:http://www.a.com
代码如下:
<?php
header("Access-Control-Allow-Origin:*");
?>
Cross Domain Request Test!
那么这个来自http://www.a.com/test.html的跨域请求就会被通过。
在这个过程中，http://www.a.com/test.html发起的请求还必须带上一个Origin Header:
Origin:http://www.a.com
Origin Header用于标记HTTP发起的“源”，服务器端通过识别浏览器自动带上的这个Origin Header，来判断浏览器的请求是否来自一个合法的“源”。Origin Header可以用于防范CSRF，它不像Referer那么容易被伪造或清空。
在这个例子中，服务器端返回
Access-Control-Allow-Origin:*
是很危险的。
2、postMessage----跨窗口传递消息
postMessage允许每一个window(包括当前窗口、弹出窗口、iframes等）对象往其他的窗口发送文本消息，从而实现跨窗口的消息传递。这个功能是不受同源策略限制的。
在接收窗口中，需要绑定一个message事件，监听其他窗口发来的消息。这是两个窗口之间的一个“约定”，如果没有监听这个事件，则无法接收到消息。
示例：
发送消息 document.getElementById("iframe").contentWindow.postMessage(...);
接受消息:
document.addEventListener("message",function(e){
document.getElementById("test").textContent=e.domain+" said: "+e.data;
},false);
1)在必要时可以在接收窗口中验证Domain，甚至验证URL，以防止非法页面的消息。
2)如果将消息写入innerHTML或script中，可能会导致XSS的产生。
3、Web Storage:
Web Storage分为Session Storage和Local Storage。它用键值对实现。
设置一个值： window.sessionStorage.setItem(key,value)
读一个值: window.sessionStorage.getItem(key)
它在实现强大功能的同时，也带来了更多的安全挑战。
1，新标签的XSS:
一些XSS Filter如果建立了一个黑名单的话，则可能就会覆盖到HTML5新增的标签和功能。
例如video、audio等
2，iframe的sandbox:
<iframe> 标签一直以来都为人所诟病。挂马、XSS、ClickJacking等攻击中都能看到它。浏览器厂商也一直在想办法限制iframe执行脚本的权限，比如 跨窗口访问会有限制，以及IE中的<iframe>标签支持security属性限制脚本的执行，都在向着这一目标努力。
在 HTML5中，专门为iframe定义了一个新的属性，叫sandbox。使用sandbox这一属性后，<iframe>标签加载的内容将 被视为一个独立的”源“，其中的脚本将被禁止执行，表单被禁止提交，插件被禁止加载，指向其他浏览器对象的链接也会被禁止。
sandbox属性可以通过参数来支持更精确的控制。有以下几个值可选：
allow-same-origin: 允许同源访问
allow-top-navigation: 允许访问顶层窗口
allow-forms: 允许提交表单
allow-scripts: 允许执行脚本
但有的行为即使设置了allow-scripts,也是不允许的，比如”弹出窗口".
一个iframe的实例如下：
<iframe sandbox="allow-same-origin allow-forms allow-scripts" scr="http:?/maps.example.com/embedded.html"></iframe>
毫无疑问,iframe的sandbox属性将极大地增强应用使用iframe的安全性。
3、Link Types：noreferrer
在HTML 5中为<a>标签和<area>标签定义了一个新的LInk Types:noreferrer.
顾名思义，标签指定了noreferrer之后，浏览器在请求该标签指定的地址时将不再发送Referer。
<a href="http://supershll.blog.163.com/blog/xxx" rel="noreferrer"> test</a>
这种设计是处于保护敏感信息和隐私的考虑。因为通过Referer，可能会泄漏一些敏感信息。
4、Canvas的妙用：
<canvas>标签让Javascript可以在页面中直接操作图片对象，也可以直接操作像素，构造出图片区域。Canvas的出现极大地挑战了传统富客户端插件的地位，开发者甚至可以用Canvas在浏览器上写一个小游戏。
Canvas甚至可以用来破解验证码。
二、其他安全问题：
1、Cross-Origin Resource Sharing
浏览器实现的同源策略限制了脚本的跨域请求。但互联网的发展趋势是越来越开放的，因此跨域访问的需求也变得越来越迫切。开发者们不得不想方设法的实现一些“合法”的跨域技术，比如jsonp、iframe跨域等技巧。
W3C决定指定一个新的标准来解决这个问题。
假设从http://www.a.com/test.html发起一个跨域的XMLHttpRequest请求，请求的地址为:http://www.b.com/test.php
如果服务器www.b.com返回一个HTTP Header:
Access-Control-Allow-Origin:http://www.a.com
代码如下:
<?php
header("Access-Control-Allow-Origin:*");
?>
Cross Domain Request Test!
那么这个来自http://www.a.com/test.html的跨域请求就会被通过。
在这个过程中，http://www.a.com/test.html发起的请求还必须带上一个Origin Header:
Origin:http://www.a.com
Origin Header用于标记HTTP发起的“源”，服务器端通过识别浏览器自动带上的这个Origin Header，来判断浏览器的请求是否来自一个合法的“源”。Origin Header可以用于防范CSRF，它不像Referer那么容易被伪造或清空。
在这个例子中，服务器端返回
Access-Control-Allow-Origin:*
是很危险的。
2、postMessage----跨窗口传递消息
postMessage允许每一个window(包括当前窗口、弹出窗口、iframes等）对象往其他的窗口发送文本消息，从而实现跨窗口的消息传递。这个功能是不受同源策略限制的。
在接收窗口中，需要绑定一个message事件，监听其他窗口发来的消息。这是两个窗口之间的一个“约定”，如果没有监听这个事件，则无法接收到消息。
示例：
发送消息 document.getElementById("iframe").contentWindow.postMessage(...);
接受消息:
document.addEventListener("message",function(e){
document.getElementById("test").textContent=e.domain+" said: "+e.data;
},false);
1)在必要时可以在接收窗口中验证Domain，甚至验证URL，以防止非法页面的消息。
2)如果将消息写入innerHTML或script中，可能会导致XSS的产生。
3、Web Storage:
Web Storage分为Session Storage和Local Storage。它用键值对实现。
设置一个值： window.sessionStorage.setItem(key,value)
读一个值: window.sessionStorage.getItem(key)
它在实现强大功能的同时，也带来了更多的安全挑战。
css html网页设计代码
回复删除正文在html中左对齐