19、网页开发中的DOM脚本与Fiddler调试技巧

DOM安全与Fiddler调试实战

pytorchlight8

于 2025-10-15 10:55:42 发布

阅读量11

点赞数

CC 4.0 BY-SA版权

分类专栏：精通IE8/9开发实战文章标签： DOM脚本 innerHTML安全表单验证

本文链接：https://blog.youkuaiyun.com/pytorchlight8/article/details/154221632

精通IE8/9开发实战专栏收录该内容

36 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

网页开发中的DOM脚本与Fiddler调试技巧

1. 自动清理innerHTML读写

Element接口的 innerHTML 属性常用于提供动态用户体验，但使用该属性获取和设置的HTML内容存在安全风险，可能导致脚本注入攻击。为了避免这种风险，可以使用原型、getter和setter来清理 innerHTML 的输入和输出内容。

以下是一个示例代码，展示了如何使用 toStaticHTML() 函数来清理 innerHTML 的读写操作：

<script type="text/javascript">
   //  获取Element接口上的innerHTML属性
   var defInnerHTML = Object.getOwnPropertyDescriptor(Element, "innerHTML");
   var defInnerText = Object.getOwnPropertyDescriptor(Element, "innerText");

   //  为innerHTML定义一个新属性
   Object.defineProperty(Element.prototype, "innerHTML",
   {
      //  将getter映射到原始的innerHTML属性getter，并使用toStaticHTML返回清理后的内容
      get: function () {  
         if(typeof toStaticHTM