使用 HTMLPurifier 来解决 Laravel 5 中的 XSS 跨站脚本攻击安全问题
92

说明

本文是对老文章 Laravel 4 XSS 解决方案 HTMLPurifier for Laravel 4 的更新。

The Problem

XSS 一直是 Web 开发安全里面的一个大话题, 更多信息请见这里 IBM 文档库:跨站点脚本攻击深入解析

本社区运行于 PHPHub 之上,PHPHub 是一个论坛软件,由大量 UGC(User Generated Content 意味用户产生内容)驱动,随时面临的 XSS 的威胁,即使软件使用 Markdown 来撰写内容,减小了 XSS 的威胁,但是像以下问题还是会出现:

[some text](javascript:alert('xss'))

更详细的 Markdown 和 XSS 的信息请见这里 -> Markdown and XSS

没有绝对的安全,这里介绍 PHPHub 是如何利用 HTMLPurifier for Laravel 5 来减小 XSS 的安全危害。

The Solution

HTMLPurifier

HTMLPurifier 本身就是一个独立的项目,运用『白名单机制』对 HTML 文本信息进行 XSS 过滤。

这里的『白名单机制』指的是,使用配置信息来定义『HTML 标签』、『标签属性』和『CSS 属性』数组,在执行 clean() 方法时,只允许配置信息『白名单』里出现的元素通过,其他都进行过滤。

如配置信息:

'HTML.Allowed' => 'div,em,a[href|title|style],ul,ol,li,p[style],br',
'CSS.AllowedProperties'    => 'font,font-size,font-weight,font-style,font-family',

用户提交:

<a someproperty="somevalue" href="http://example.com" style="color:#ccc;font-size:16px">
    文章内容<script>alert('Alerted')</script>
</a>

会被解析为:

<a href="http://example.com" style="font-size:16px">
    文章内容
</a>

以下内容因为未指定会被过滤:

  1. someproperty 未指定的 HTML 属性
  2. color 未指定的 CSS 属性
  3. script 未指定的 HTML 标签

HTMLPurifier for Laravel 5

HTMLPurifier for Laravel 是对 HTMLPurifier 针对 Laravel 框架的一个封装.

安装 HTMLPurifier for Laravel 5

使用 Composer 安装:

composer require mews/purifier

config/app.php 文件的 providers 数组添加以下

Mews\Purifier\PurifierServiceProvider::class,

配置 HTMLPurifier for Laravel 5

命令行下运行

$ php artisan vendor:publish --provider="Mews\Purifier\PurifierServiceProvider"

打开 config/purifier.php , 默认的配置有以下:


return [
    'encoding'      => 'UTF-8',
    'finalize'      => true,
    'cachePath'     => storage_path('app/purifier'),
    'cacheFileMode' => 0755,
    'settings'      => [
        'default' => [
            'HTML.Doctype'             => 'HTML 4.01 Transitional',
            'HTML.Allowed'             => 'div,b,strong,i,em,u,a[href|title],ul,ol,li,p[style],br,span[style],img[width|height|alt|src]',
            'CSS.AllowedProperties'    => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align',
            'AutoFormat.AutoParagraph' => true,
            'AutoFormat.RemoveEmpty'   => true,
        ],
        'test'    => [
            'Attr.EnableID' => 'true',
        ],
        "youtube" => [
            "HTML.SafeIframe"      => 'true',
            "URI.SafeIframeRegexp" => "%^(http://|https://|//)(www.youtube.com/embed/|player.vimeo.com/video/)%",
        ],
        'custom_definition' => [
            'id'  => 'html5-definitions',
            'rev' => 1,
            'debug' => false,
            'elements' => [
                // http://developers.whatwg.org/sections.html
                ['section', 'Block', 'Flow', 'Common'],
                ['nav',     'Block', 'Flow', 'Common'],
                ['article', 'Block', 'Flow', 'Common'],
                ['aside',   'Block', 'Flow', 'Common'],
                ['header',  'Block', 'Flow', 'Common'],
                ['footer',  'Block', 'Flow', 'Common'],

                // Content model actually excludes several tags, not modelled here
                ['address', 'Block', 'Flow', 'Common'],
                ['hgroup', 'Block', 'Required: h1 | h2 | h3 | h4 | h5 | h6', 'Common'],

                // http://developers.whatwg.org/grouping-content.html
                ['figure', 'Block', 'Optional: (figcaption, Flow) | (Flow, figcaption) | Flow', 'Common'],
                ['figcaption', 'Inline', 'Flow', 'Common'],

                // http://developers.whatwg.org/the-video-element.html#the-video-element
                ['video', 'Block', 'Optional: (source, Flow) | (Flow, source) | Flow', 'Common', [
                    'src' => 'URI',
                    'type' => 'Text',
                    'width' => 'Length',
                    'height' => 'Length',
                    'poster' => 'URI',
                    'preload' => 'Enum#auto,metadata,none',
                    'controls' => 'Bool',
                ]],
                ['source', 'Block', 'Flow', 'Common', [
                    'src' => 'URI',
                    'type' => 'Text',
                ]],

                // http://developers.whatwg.org/text-level-semantics.html
                ['s',    'Inline', 'Inline', 'Common'],
                ['var',  'Inline', 'Inline', 'Common'],
                ['sub',  'Inline', 'Inline', 'Common'],
                ['sup',  'Inline', 'Inline', 'Common'],
                ['mark', 'Inline', 'Inline', 'Common'],
                ['wbr',  'Inline', 'Empty', 'Core'],

                // http://developers.whatwg.org/edits.html
                ['ins', 'Block', 'Flow', 'Common', ['cite' => 'URI', 'datetime' => 'CDATA']],
                ['del', 'Block', 'Flow', 'Common', ['cite' => 'URI', 'datetime' => 'CDATA']],
            ],
            'attributes' => [
                ['iframe', 'allowfullscreen', 'Bool'],
                ['table', 'height', 'Text'],
                ['td', 'border', 'Text'],
                ['th', 'border', 'Text'],
                ['tr', 'width', 'Text'],
                ['tr', 'height', 'Text'],
                ['tr', 'border', 'Text'],
            ],
        ],
        'custom_attributes' => [
            ['a', 'target', 'Enum#_blank,_self,_target,_top'],
        ],
        'custom_elements' => [
            ['u', 'Inline', 'Inline', 'Common'],
        ],
    ],

];

这个时候就可以使用如下的调用进行过滤了

clean(Input::get('inputname'));

扩展设置

为了方便扩展性, 我将 config 文件如以下:

<?php

return [
    'encoding'      => 'UTF-8',
    'finalize'      => true,
    'cachePath'     => storage_path('app/purifier'),
    'cacheFileMode' => 0755,
    'settings'      => [
        'default' => [
            'HTML.Doctype'             => 'HTML 4.01 Transitional',
            'HTML.Allowed'             => 'div,b,strong,i,em,u,a[href|title],ul,ol,li,p[style],br,span[style],img[width|height|alt|src]',
            'CSS.AllowedProperties'    => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align',
            'AutoFormat.AutoParagraph' => true,
            'AutoFormat.RemoveEmpty'   => true,
        ],
        'test'    => [
            'Attr.EnableID' => 'true',
        ],
        .
        .
        // 省略无数代码
        .
        .
        'user_topic_body' => array(
            'HTML.Doctype'             => 'XHTML 1.0 Strict',
            'HTML.Allowed'             => 'div,b,strong,i,em,a[href|title],ul,ol,li,p[style],br,span[style],img[width|height|alt|src],pre,code',
            'CSS.AllowedProperties'    => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align',
            'AutoFormat.AutoParagraph' => true,
            'AutoFormat.RemoveEmpty'   => true,
        ),
    ],

];

注意到多了一个 user_topic_body 的节点, 这样的话, 我就可以针对性的调用, 如以下, 注意第二个传参:

clean($html_data, 'user_topic_body');

--- EOF ---


Practice makes perfect.

本帖由 Summer 于 1年前 加精
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 27
overtrue

666

1年前

越了解XSS,感觉越难防御:fearful:

1年前

能挡住的终究是少数

1年前
Summer

@Rekkles
@轻色年华 愿闻其详。

1年前
Summer

欢迎对 XSS 防御有过深入了解的同学发表下看法哈 - 你认为 HTMLPurifier 的弱点有哪些?

1年前
Destiny

很详细!

1年前

可以的

some text

我都不知道有这种写法。。

1年前

不敢说很了解XSS,只是简单的知道XSS的一些奇淫技巧,自己当前真的无法防御住:joy:

1年前

如果只考虑到现代浏览器的话,可以试试 CSP (Content Security Policy)。

1年前

这个可以

1年前

没法收藏,分享微信吧,bundleID 错误。点更多操作,发现点不动,还不小心点到了举报。大大,我不是故意的。

1年前
Summer

@MehrLicht 你估计用的是老的 App ,卸载了重新装下。

1年前

$ php artisan config:publish mews/purifier --provider="Mews\Purifier\PurifierServiceProvider"
这段命令5.4里面好像不行,换成
$ php artisan vendor:publish --provider="Mews\Purifier\PurifierServiceProvider"之后倒是可以了

1年前

另外代码是怎么发出来的啊:scream:

1年前
$ php artisan config:publish mews/purifier --provider="Mews\Purifier\PurifierServiceProvider"
1年前
Summer

@生活无限好 已改正,感谢

1年前

之前想用时发现HTML Purifier不支持PHP7

1年前
rovast

:thumbsup:

1年前

还需要在config/app.php中的aliases添加 'Purifier' => Mews\Purifier\Facades\Purifier::class, 才能使用clean()

1年前

直接转义 不让直行不就 可以了,

1年前

没考虑用nginx直接过滤xss的模块吗,比如lua-waf

1年前

这个好像不能防止图片XSS,比如上传一个头像,在图片中嵌入了XSS代码,加载的时候还是会被执行吧。

1年前
Summer

@Payne 直接试试

1年前
Johnson16

markdown语法里用这个扩展,全部都带上了P标签,请赐教

1个月前

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!