关于Payload：<details/open/ontoggle=alert(1)>

有幸看到flagellantX师傅分享的XSS的Payload：

https://github.com/flagellantX/xsspayload

<details/open/ontoggle=alert(1)>

关于details标签

HTML5 中新增的<details>标签允许用户创建一个可以展开/折叠的标签，可以用来查看详细信息。

details标签里面可以填充一个summary标签，用来设置显示在页面上的标题。

当用户点击标题时会显示出详细信息。

<details>

    <summary>Google Nexus 6</summary>

    <p>商品详情：</p>

    <dl>
        <dt>屏幕</dt>
        <dd>5.96” 2560x1440 QHD AMOLED display (493 ppi)</dd>
        <dt>电池</dt>
        <dd>3220 mAh</dd>
        <dt>相机</dt>
        <dd>13MP rear-facing with optical image stabilization 2MP front-facing</dd>
        <dt>处理器</dt>
        <dd>Qualcomm® Snapdragon™ 805 processor</dd>
    </dl>

</details>

展现效果如下：点击标题时，便会展开查看详情，再次点击时便会折叠该详情。

请输入图片描述

details标签默认是折叠状态

open属性

可以在details标签中添加open属性，用来设置标签初始状态是展开状态。

<details open>
    <summary>An attempt</summary>
    <img src="http://www.teagle.top/kedaya.jpg" width="50" height="50">
</details>

此时展现效果如下：展现到页面上的便是展开状态

请输入图片描述

添加了open属性后，浏览器在进行渲染时会将折叠的详情自动展开

ontoggle事件

toggle

英 [ˈtɒgl] 美 [ˈtɑ:gl] 

n. 棒形纽扣;套索扣;转换键;切换键
v.切换

ontoggle事件专属于details标签，当标签打开/折叠时触发

<details ontoggle=alert(1)>
    <summary>An attempt</summary>
    <img src="http://www.teagle.top/kedaya.jpg" width="50" height="50">
</details>

请输入图片描述

而此时如果再加上open属性，那么便会自动触发ontoggle事件，因为details标签默认是折叠状态，在读取到open属性以后，展开详情，此时触发ontoggle事件

于是便有了最开始所说的XSS Payload.

相关文章

html <details>标签的使用方法详解
http://www.php.cn/div-tutorial-369822.html