复现一个循环问题以及俩个循环问题

上源码：

模仿xss的过滤框架：

分析：

注释部分：data是截取了#后面的值，然后创建了一个div，然后把#后面的值赋值给div。

for循环：root就是div，而querySelectorAll就是选中div中的所有元素，let attr of el.attributes是获取其所有的属性，el.removeAttribute(attr.name这个删除其所有的元素

简单测试一下：

 因为是innerHTML方法，所以这样肯定行不通

发现把有用的src属性删掉了，但是把坏的属性onerror留下了

这就引出一个问题？？？？

本来循环是把所有的属性删了，为什么却删了一部分，没有删完

使用短点调试的方法看看咋回事（找错记得用断点调试）

为什么只删除了一次？？ 而不是删除所有的元素

我们用python来理解一下这个成因

 就是定义了个数组，然后循环出最大的元素，然后再删除它，再循环，从而进行一个大到小的排序，那为什么只出现了三个数字？？？

下断点进行调试：

原因：当i=2进入循环的时候，这时候找出了最大的值是9，然后删除，然后i=6，进循环，把7删除了，然后i=9，进循环，把6删除了，然后发现循环结束了。这是因为你边循环边删除元素，导致下标一直在加，而你的元素却一直在减，比如当2进入循环，删除了9，此时元素总共5个了，而下标已经是2了，那么原来本应该是原先6个元素中的3进入循环，由于元素的减少导致现在的5个元素中的i=6进入循环。如此循环下去，到第三个元素时，下标已经到4了，可是元素已经被删除了3个，所以跳出了循环。

基于这个原因，就多写几个属性进入饶过，反复测试它是删哪几个属性，然后换顺序就行了，就饶过了

写四个属性：

 

基于这样，所以这样的循环删除不可靠，于是我们想到另一种方法

加一个数组 ，循环进数组，在数组里面的去删除，现在就是先放数组里面，再进行删除，就不会出现上述的情况了

测试用是svg

发现确实删除了

 用img也是发现也是发现所有的元素被删除了

解题思路：1：不进循环 2：进循环后删除无用的属性，保留我们想要的属性

 假如有个元素能劫持el.attributes(),或许删除的就是其它的元素

测试一下：下图中的x就是el  img就是attattributes

思路就是把进循环的attattributes删除掉，el也就是form表单中的元素留下是否就可以饶过

解题payload：

使用断点分析：

form进入了循环，但是删除了里面的input属性，没有删除标签，焦点还是可以聚焦。触发条件在前面还是可以触发。为什么写俩次，因为要形成集合，才能循环，为什么用tabindex 是因为后面要使用onfocus，使用tabindex使后面的生效