本文由腾讯 WeTest 团队提供，更多资讯可直接戳链接查看：http://wetest.qq.com/lab/
微信号：TencentWeTest

对于新接触 web 开发的同学来说，XSS 注入是一件非常头疼的事情。就算是 web 开发多年的老手，也不敢保证自己写的代码完全没有 XSS 注入的风险。

因为现在比较主流的 XSS 防治手段主要有两种，一种是在用户输入是将异常关键词过滤，另一种则是在页面渲染时将 html 内容实体化转义。

然而第一种方法一定程度上对业务数据要求相对较高，存在屏蔽数据和业务数据有冲突的情况，例如 “程序类帮助文档的编辑保存”，“外站帖子爬虫” 等等。都不能无差别将异常关键词过滤掉，必须保持原输入内容的完整性。

而另一种 html 内容实体化的方式，又非常的依赖开发的编程习惯。一个不小心漏写了就是一个安全工单，做 web 的前端同事应该深有体会。于是，我开始研究能不能不再依赖开发习惯，从框架层面上完全屏蔽 XSS。

这里先介绍一下我的 PHP web Server 框架，是我自己从从事 web 开发开始就一直在维护更新的框架，链接在此，有兴趣的同学，可以看下。或者提出更多改进的建议。

首先来看下普通的 PHP 是怎么转义 html 实体的：

htmlspecialchars($content, ENT_QUOTES | ENT_SUBSTITUTE)

ENT_QUOTES 意思是需要转义双引号（"）和 单引号（'）

ENT_SUBSTITUTE 意思是 把无效的编码替代成一个指定的带有 Unicode 替代字符

首先很容易想到的是把 php 模版中的字符串全部替换掉。

而熟悉 smarty 的同学应该知道，其实 smarty 的模版渲染也是用了转义字符串的方式。那我们渲染页面的代码可以这么写。

/**
     * 获得模板渲染后的内容
     * @return string
     */
    public function getContent()
    {
        //防XSS注入
        foreach ($this->params as &$param) {
            $param = is_string($param) ? htmlspecialchars($param, ENT_QUOTES | ENT_SUBSTITUTE) : $param;
        }
        unset($param);

        extract($this->params);
        ob_start();
        //include template
        $file = sprintf('%s/template/%s.tpl.php', TXApp::$app_root, $this->view);
        include $file;
        $content = ob_get_clean();
        return $content;
    }

这样的话，传入的字符串类型的变量都会被替换掉了。但是问题也很明显。那就是如果是数组或者 object 对象，里面的内容就无法进行转义了。而这同样也是 smarty 的一个弊端，smarty 是在 assign 方法里进行的实体化转义，如果是数组或者 object 就无视了。当然我们还需要更进一步的进行转义处理。

有同学看到这里肯定会有个想法，如果是数组的话，递归进行转义处理不就可以了吗。

事实上我一开始的确是这么做的，但是弊端也很明显。递归的层数越多，性能损耗就越大。而且并非所有进行转义的内容我们都会用到，这样就会造成性能的浪费。最优化的处理方式就是当需要用到的时候再做转义处理，没用到的时候该咋样还是咋样。

于是我开始着手自己写一个类，在我的框架里我命名为 TXArray 继承了 ArrayObject，也就是让其具备了 array 的部分性质。接下来开始进行 array 方法重构。以下是部分代码

class TXArray extends ArrayObject
{
    private $storage = [];
    private $encodes = [];

    public function __construct($storage=array())
    {
        $this->storage = $storage;
    }

    public function getIterator()
    {
        foreach ($this->storage as $key => $value){
            $key = $this->encode($key);
            if (!isset($this->encodes[$key])){
                $this->encodes[$key] = $this->encode($value);
            }
        }
        return new ArrayIterator($this->encodes);
    }

    public function offsetGet($k)
    {
        if (isset($this->storage[$k])){
            $key = $this->encode($k);
            if (!isset($this->encodes[$key])){
                $this->encodes[$key] = $this->encode($this->storage[$k]);
            }
            return $this->encodes[$key];
        }
        return null;
    }

    public function offsetExists($k)
    {
        return isset($this->storage[$k]);
    }

    public function offsetUnset($k)
    {        
        unset($this->storage[$k]);
        $k = $this->encode($k);
        unset($this->encodes[$k]);
    }

    public function offsetSet($k, $value)
    {
        $this->storage[$k] = $value;
        $this->encodes[$k] = $this->encode($value);
    }

    public function count()
    {
        return count($this->storage);
    }

    private function encode($value)
    {
        if (is_string($value)){
            $value = is_string($value) ? htmlspecialchars($value, ENT_QUOTES | ENT_SUBSTITUTE) : $value
        } elseif (is_array($value)){
            $value = new self($value);
        }
        return $value;
    }
}

offsetGet 会在 $array[$key] 时候被调用。getIterator() 方法则是在 foreach 循环时被调用。当发现内部参数是个 array 时，会再次递归调用自己，重复上述步骤。效果如下图所示：

这样一个递归的转义模型就写好了。也实现了用到时才转义的目标。

但是还有个问题。并不是所有字段都需要转义的，例如我们平台的舆情监控数据，数据来源主要是各大贴吧论坛，数据本身包含了图片 img，字体颜色等 html 元素。在展示时并不希望被模版转义。所以我在框架上继续优化。添加了 PHP 的魔法方法__get()

public function __get($k)
  {
      return isset($this->storage[$k]) ? $this->storage[$k] : null;
  }

  public function get($key)
  {
      return $this->__get($key);
  }

也就是说只要调用 $array->key 或者 $array->get(0) 就可以直接获取原来的数据而不进行转义了。

另外看业务也再需要加上一些对 array 的处理方法，例如 array_key_exists，in_array， join 等。或者直接使用__call() 魔法方法

public function __call($method, $args)
 {
     $args[] = &$this->storage;
     return call_user_func_array($method, $args);
 }

 public function serialize()
 {
     return serialize($this->storage);
 }

 public function __invoke()
 {
     return $this->storage ? true : false;
 }

 public function keys()
 {
     return array_keys($this->values(false));
 }

然后我们在页面模版里就可以愉快的使用了

本文由腾讯 WeTest 团队提供，更多资讯可直接戳链接查看：http://wetest.qq.com/lab/
微信号：TencentWeTest