来自:http://www.myhack58.com/Article/html/3/7/2011/32395.htm

innerHTML 是个奇怪的HTML属性,不是W3C标准支持的,但几乎所有的厂商都默认支持了这样一个属性,最近一些用这个属性试验了很多,这里来分享下 innerHTML一些有意思的问题。所有的元素都有innerHTML属性,它是一个字符串,用来设置或获取位于对象起始和结束标签内的HTML。通常 使用innerHTML属性来做动态插入

最简单的innerHTML是这么用的:

<br>output:<div id="output"></div>

<script>

var output=document.getElementById("output");

output.innerHTML="hello,world!";

</script>

这段代码的意思通过output变量的innerHTML属性,往div里插入一句hello world!。一般我们写网页代码都是先写一个模板,对一些用户输入之类的变量通过innerHTML往里面插就行了,非常方便

innerHTML更强大的地方在于可以更改格式,我们把输出语句改为:

output.innerHTML="<i>hello,world!<\/i>";

如果代码这样写,hello world!在页面上显示出来就是斜体

黑阔们相信都看到了重点,<i></i>标签被解析了!接下来我们想,如果输入的是<script></script>标签呢?再一次更改输出语句:

output.innerHTML="<script>alert(1);<\/script>";

结果很奇怪,没用如预想一般弹框,而是什么都没有!用firebug查看执行javascript后的代码,结果让人更奇怪了,这 里<script></script>已经被视为标签了,可以从firebug标为蓝色而看出来,但是为神马不弹窗口呢?

可以猜想这是浏览器对innerHTML解析之后的数据又做了一层编码,再换一个测试语句看看是不是真的:

output.innerHTML="<script>alert(1)<\/script>"

这里我先做了一层HTML编码,解析一次之后应该是<script>alert(1)</script>,如果 innerHTML是解析后直接显示了就应该弹框。查看处理后的源代码,输出 是<script>alert(1)</script>

这样基本就清楚了,innerHTML在javascript处理的时候做过一次HTML解析,然后到了浏览器加载页面时又做了一次HTML编码。看起来天衣无缝,处理也没有什么问题。但是!注意浏览器加载页面和加载javascript顺序是可以改变的

defer属性是专用于延迟加载的。W3shcool上是这样说明的,如果您的脚本不会改变文档的内容,可将defer 属性加入到<script> 标签中,以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。 我们试试这样的输入:Security" r" D" o! \& k/ G9 M1 G) D

output.innerHTML="<span style=\"display:none;\">1<\/span><script defer>alert(\"1\");<\/script>"

因为IE天然会忽略innerHTML属性的开头脚本,这里加一段隐藏的字符来触发defer脚本。在将javascript推迟解释之后,能弹框了。可惜firefox有点天然呆,压根不支持defer。所以这个弹框只对IE有效,比较局限

最新文章

  1. yii 核心类classes.php详解(持续更新中...)
  2. C++析构函数调用异常问题研究
  3. Codeforces Round #346 (Div. 2)
  4. 常用jsp include用法,三种include的区别
  5. PIGOSS
  6. HTTP基础03--HTTP报文
  7. 【CCS仿真】如何将CCS仿真时memory中的数据以Hex、Integer、 Long 、Float、 Addressable Unit类型保存到PC
  8. ios上取得设备唯一标志的解决方案
  9. iOS编程中throttle那些事
  10. android touchEvent事件学习
  11. 容斥原理及SQL in关键字在EF中的应用
  12. 微服务~Eureka实现的服务注册与发现及服务之间的调用
  13. 大数据技术Hadoop笔试题
  14. Xshell 5 配置上传下载命令
  15. 0516js综合练习
  16. P1348 Couple number
  17. Javascript Cookie小插件
  18. P1074 靶形数独 dfs回溯法
  19. mysql工具Navicat Premium使用
  20. MAVEN ECLIPSE JAR工程

热门文章

  1. CUDA学习笔记2:CUDA(英伟达显卡统一计算架构)与已有的VS项目结合
  2. OpenSSL Heartbleed “心脏滴血”漏洞简单攻击示例
  3. bzoj 2152
  4. 3524: [Poi2014]Couriers -- 主席树
  5. Educational Codeforces Round 11 E. Different Subsets For All Tuples 动态规划
  6. django safe 过滤器--不对字符串进行转义(转)
  7. HDU 4666 Hyperspace (2013多校7 1001题 最远曼哈顿距离)
  8. 关于spring-mvc.xml的mvc:resources元素浅析。
  9. .NET:在C#中模拟Javascript的setTimeout方法
  10. [Android Pro] git 打标签、推送tag到托管服务器、验证是否成功