关于前端:SVG-安全

29次阅读

共计 15771 个字符，预计需要花费 40 分钟才能阅读完成。

一 目录

不折腾的前端，和咸鱼有什么区别

目录
一 目录
二 工作指标
三 SVG 简要介绍
四 SVG 破绽认知
 4.1 跨站脚本（XSS）
 4.2 HTML 注入
 4.3 XML 实体导致的 Billion Laughs 攻打
 4.4 Dos（拒绝服务）：新型 SVG Billion Laughs 攻打
 4.5 XML 内部实体注入（XXE）
五 SVG 平安防护
 5.1 平安援用 SVG
 5.2 文件格式验证
 5.3 SVG 非法标签白名单列表
六 SVG 平安库
 6.1 DOMPurify 介绍
 6.2 DOMPurify 应用
 6.3 DOMPurify 源码分析
  6.3.1 DOMPurify v0.1
  6.3.2 DOMPurify v2.4.1
七 总结
八 参考资料

二 工作指标

返回目录

本篇文章的目标有：

  • [] 理解 SVG 破绽
  • [] 理解 SVG 常见防护伎俩
  • [] 搜查 SVG 数据安全性校验和过滤的库
  • [] 理解如何应用此类库来进行 SVG 上传防护
  • [] 浏览源码，能明确讲述此类库做了什么

如果对你有所帮忙，无妨点赞、评论、珍藏和吐槽一番~

三 SVG 简要介绍

返回目录

SVG 即可缩放矢量图形（Scalable Vector Graphics），它应用 XML 格局定义图像。

circle.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="deepskyblue" />
</svg>

关上 circle.svg，即可看到：

注：因后续 SVG 代码有些存有危害，请自行创立 xx.svg 文件来寄存，理解此 SVG 用处（甚至有些 SVG 倡议只看代码理解其攻击性即可，否则会卡本人机子）

SVG 更像是 HTML，而不单单是一张简略的图像。

例如，当设计师须要五彩斑斓的黑，咱们还能够间接批改下面 circle.svg 中的 fill="deepskyblue"，将其改成 fill="black"，想必设计师会十分开心，咱们又帮 ta 解决了一个难题~

此外，可缩放矢量也是 SVG 一大长处，毕竟能大能小还能清晰可见，放弃真本色，谁不喜爱呢~

更多的可自行返回 MDN 等网站理解：

  • MDN – SVG
  • 菜鸟教程 – SVG

四 SVG 破绽认知

返回目录

在下面，咱们理解到，SVG 更像是（X）HTML，而不单单是一张简略的图像。

所以，在进行 SVG 平安防护之前，咱们尚需理解它的危害性。

4.1 跨站脚本（XSS）

返回目录

SVG 可通过 <script> 元素执行 JavaScript 代码。

所以，如果凋谢了 SVG 上传，那么会存在 XSS（跨站脚本）平安危险。

01-xss.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="black" />
  <!-- 这种操作，能够在 SVG 中间接执行 Script，从而通过 Ajax 将同域的 cookie 投出去，造成存储型 XSS -->
  <script>alert(document.cookie)</script>
</svg>

注：如果在 Chrome 上通过 <img /> 标签引入，并不会触发攻打。然而，如果独自在 Tab 上关上图片，是会触发攻打的！！

又或者，咱们能够通过 SVG，让用户在查看图片的时候，伪装失落了明码，须要从新输出：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="black" />
  <script>
    const passwd = prompt('输出明码持续');
    console.error('passwd:', passwd);
    alert(` 感激你的明码：${passwd}`);
  </script>
</svg>

4.2 HTML 注入

返回目录

SVG 是基于 XML 的矢量图，没法简略将 HTML 内容放到外面。

所以，SVG 提供了 <foreignObject> 元素，用来蕴含其余 XML 命名空间的元素。

这一部分数据很可能采纳（X）HTML 模式。

02-html-injection

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
    div {
      background: black;
      color: pink;
      font: 18px serif;
      width: 100px;
      height: 100px;
      overflow: auto;
    }
  </style>

  <foreignObject x="20" y="20" width="100" height="100">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <a href="https://www.kdocs.cn"> 点击这里 </a>
      <p> 超难看的内容等你来喔~</p>
    </div>
  </foreignObject>
</svg>

在这种状况下，咱们能够发动相似钓鱼、绕开同源策略、CSRF 之类的攻打。

如果在 Chrome 上通过 <img /> 标签引入，并不会渲染 <a> 标签，可能是 Chrome 做的防护，然而独自关上是会触发的

4.3 XML 实体导致的 Billion Laughs 攻打

返回目录

a billion laughs attack 是一种 denial-of-service（DoS）攻打，它次要作用于 XML 文档解析器。

它也被称为指数实体扩大攻打，是一种货真价实的 XML 炸弹。

在 SVG 中，能够通过 Entity 申明实体性能：

03-billion-laughs.svg

<!DOCTYPE lolz [
<!ENTITY lol "lol">
<!ENTITY lol2 "&lol;&lol;&lol;&lol;&lol;&lol;&lol;&lol;&lol;&lol;">
<!ENTITY lol3 "&lol2;&lol2;&lol2;&lol2;&lol2;&lol2;&lol2;&lol2;&lol2;&lol2;">
<!ENTITY lol4 "&lol3;&lol3;&lol3;&lol3;&lol3;&lol3;&lol3;&lol3;&lol3;&lol3;">
<!ENTITY lol5 "&lol4;&lol4;&lol4;&lol4;&lol4;&lol4;&lol4;&lol4;&lol4;&lol4;">
<!ENTITY lol6 "&lol5;&lol5;&lol5;&lol5;&lol5;&lol5;&lol5;&lol5;&lol5;&lol5;">
<!ENTITY lol7 "&lol6;&lol6;&lol6;&lol6;&lol6;&lol6;&lol6;&lol6;&lol6;&lol6;">
<!ENTITY lol8 "&lol7;&lol7;&lol7;&lol7;&lol7;&lol7;&lol7;&lol7;&lol7;&lol7;">
<!ENTITY lol9 "&lol8;&lol8;&lol8;&lol8;&lol8;&lol8;&lol8;&lol8;&lol8;&lol8;">
<!ENTITY lol10 "&lol9;&lol9;&lol9;&lol9;&lol9;&lol9;&lol9;&lol9;&lol9;&lol9;">
<!ENTITY lol11 "&lol10;&lol10;&lol10;&lol10;&lol10;&lol10;&lol10;&lol10;&lol10;">
<!ENTITY lol12 "&lol11;&lol11;&lol11;&lol11;&lol11;&lol11;&lol11;&lol11;&lol11;">
<!ENTITY lol13 "&lol12;&lol12;&lol12;&lol12;&lol12;&lol12;&lol12;&lol12;&lol12;">
<!ENTITY lol14 "&lol13;&lol13;&lol13;&lol13;&lol13;&lol13;&lol13;&lol13;&lol13;">
<!ENTITY lol15 "&lol14;&lol14;&lol14;&lol14;&lol14;&lol14;&lol14;&lol14;&lol14;">
]>
<svg xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="20" font-size="20">
    <lolz>&lol15;</lolz>
  </text>
</svg>

浏览器关上这个文件后，CPU 间接干上 100%，所以如非必要，不要关上它。

4.4 Dos（拒绝服务）：新型 SVG Billion Laughs 攻打

返回目录

除了 Entity，还有一种形式，就是通过 SVG 图像发动攻打。

其中 xlink:href 属性以 IRI（国内资源标识）形式定义了对某个资源的援用，该链接的具体含意需依据应用该链接的每个元素的上下文来决定。

<use> 元素从 SVG 文档中获取节点，而后将其复制到其余地位。

在上面代码中，咱们实现了重复嵌套应用，直至浏览器或者电脑卡死。

04-xlink-billion-laughs.svg

<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<path id="a" d="M0,0"/>
<g id="b"><use xlink:href="#a"/><use xlink:href="#a"/><use xlink:href="#a"/><use xlink:href="#a"/><use xlink:href="#a"/><use xlink:href="#a"/><use xlink:href="#a"/><use xlink:href="#a"/><use xlink:href="#a"/><use xlink:href="#a"/></g>
<g id="c"><use xlink:href="#b"/><use xlink:href="#b"/><use xlink:href="#b"/><use xlink:href="#b"/><use xlink:href="#b"/><use xlink:href="#b"/><use xlink:href="#b"/><use xlink:href="#b"/><use xlink:href="#b"/><use xlink:href="#b"/></g>
<g id="d"><use xlink:href="#c"/><use xlink:href="#c"/><use xlink:href="#c"/><use xlink:href="#c"/><use xlink:href="#c"/><use xlink:href="#c"/><use xlink:href="#c"/><use xlink:href="#c"/><use xlink:href="#c"/><use xlink:href="#c"/></g>
<g id="e"><use xlink:href="#d"/><use xlink:href="#d"/><use xlink:href="#d"/><use xlink:href="#d"/><use xlink:href="#d"/><use xlink:href="#d"/><use xlink:href="#d"/><use xlink:href="#d"/><use xlink:href="#d"/><use xlink:href="#d"/></g>
<g id="f"><use xlink:href="#e"/><use xlink:href="#e"/><use xlink:href="#e"/><use xlink:href="#e"/><use xlink:href="#e"/><use xlink:href="#e"/><use xlink:href="#e"/><use xlink:href="#e"/><use xlink:href="#e"/><use xlink:href="#e"/></g>
<g id="g"><use xlink:href="#f"/><use xlink:href="#f"/><use xlink:href="#f"/><use xlink:href="#f"/><use xlink:href="#f"/><use xlink:href="#f"/><use xlink:href="#f"/><use xlink:href="#f"/><use xlink:href="#f"/><use xlink:href="#f"/></g>
<g id="h"><use xlink:href="#g"/><use xlink:href="#g"/><use xlink:href="#g"/><use xlink:href="#g"/><use xlink:href="#g"/><use xlink:href="#g"/><use xlink:href="#g"/><use xlink:href="#g"/><use xlink:href="#g"/><use xlink:href="#g"/></g>
<g id="i"><use xlink:href="#h"/><use xlink:href="#h"/><use xlink:href="#h"/><use xlink:href="#h"/><use xlink:href="#h"/><use xlink:href="#h"/><use xlink:href="#h"/><use xlink:href="#h"/><use xlink:href="#h"/><use xlink:href="#h"/></g>
<g id="j"><use xlink:href="#i"/><use xlink:href="#i"/><use xlink:href="#i"/><use xlink:href="#i"/><use xlink:href="#i"/><use xlink:href="#i"/><use xlink:href="#i"/><use xlink:href="#i"/><use xlink:href="#i"/><use xlink:href="#i"/></g>
</svg>

4.5 XML 内部实体注入（XXE）

返回目录

这个危害没有在浏览器测试到，然而看他们说是存在的。

可能我的网络安全材料比拟不足，所以这里记录一下：

05-xxe.svg

 <!-- ubuntu 文件信息：file:///etc/passwd -->
 <!-- ubuntu 文件信息：file:///etc/hostname -->
<!DOCTYPE test [<!ENTITY xxe SYSTEM "file:///etc/hostname">]>
<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <text font-size="16" x="0" y="16">&xxe;</text>
</svg>

五 SVG 平安防护

返回目录

既然贸然应用 SVG 是有危险的，那么咱们必定要有所措施来应答应用。

  1. 限度 SVG 的危险标签。例如 <script>、<foreignObject> 等
  2. 限度 SVG 图像内加载资源和一些拓展逻辑
  3. 将 SVG 图片存储到其余服务器，避免次要服务器被攻打
  4. 限度 SVG 的援用形式，尽可能通过 <img> 标签等平安模式援用
  5. ……

5.1 平安援用 SVG

返回目录

在 DigiNinja 的《Protecting against XSS in SVG》一文中，咱们能够看到 ta 对其的一些个人见解。

  • DigiNinja – Protecting against XSS in SVG

不举荐的 ：

  • 「容易被攻打的」间接查看。这种间接链接并查看很危险
  • 「容易被攻打的」查看 iframe 中的图片
  • 「容易被攻打的」通过矢量图形进行消杀（？原文 Sanitised through Inkscape）。这种操作相似于间接查看，尽管它看起来像是被上面指令爱护 
inkscape --file="xss.svg" --verb="FileVacuum" --export-plain-svg="sanitised.svg"

这个指令看起来像是移除了 JavaScript 代码，然而实际上并没有

举荐的 ：

  • 「不容易被攻打的」在 Content-Disposition 响应标头查看
  • 「不容易被攻打的」设置查看元素的 CSP 白名单
  • 「不容易被攻打的」通过 <img> 标签加载。<img> 标签具备避免 JS 脚本攻打的性能
  • 「不容易被攻打的」设置标签的 CSP 白名单。通过下面的 <img> 标签，加上这个动作，能够进行双重爱护
  • 「不容易被攻打的」在 iframe 沙箱中查看图片。设置 iframe 的时候，须要设置 sandbox 属性，来防止脚本攻打

5.2 文件格式验证

返回目录

上面 2 个是不牢靠且能够被结构的：

  1. 文件名后缀
  2. 表单上传 Content-Type

所以，如果须要上传平安的 SVG，那么对其格局也须要进行验证。

判断文件类型的库：

  • Github – sindresorhus/file-type

5.3 SVG 非法标签白名单列表

返回目录

如下面所言，SVG 更像是（X）HTML，所以须要过滤掉诸如 <script>、<foreignObject> 等相干标签和属性。

可参考的过滤清单：

  • Github – lizheming – svg-allow-tags.json
  • Github – DOMPurify – tags.js
  • Github – DOMPurify – attrs.js

六 SVG 平安库

返回目录

如果是本人写的话，那也太对不住你的用户了，毕竟你不晓得还有啥内容没防护到。

所以这里举荐一个库：DOMPurify

6.1 DOMPurify 介绍

返回目录

DOMPurify 从 2014.07 开始建设，截止指标 10.1k Star，仅有 2 个待解决 Issue。

兼容性方面，能够说十分到位：

  • Safari（10+）
  • Opera（15+）
  • IE（10+）
  • Edge
  • Firefox
  • Chrome

其余介绍：

  • 仓库自动测试覆盖面
  • 反对 TypeScript
  • 过滤尝试

6.2 DOMPurify 应用

返回目录

既然咱们的指标之一：

  • [x] 理解如何应用此类库来进行 SVG 上传防护

那么，理解怎么防护也是必要的，这里 jsliang 编写了一个实例：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>DOMPurify - jsliang</title>
  <style>img {width: 300px; height: 300px;}</style>
  <script src="./dist/purify.min.js"></script>
</head>
<body>
  <p> 请上传你的 svg 图片 </p>
  <input id="input" type="file" accept="image/*">
  <div>
    <!-- TODO: 批改为相应的占位图图片 -->
    <img id="img" src="./img/placeholder.jpg" />
  </div>

  <script>
    window.onload = () => {const input = document.querySelector('#input');
      const img = document.querySelector('#img');

      // 监听文件上传，并以文本模式读取内容
      const reader = new FileReader();
      input.onchange = (e) => {const [file] = input.files;
        if (file) {reader.readAsText(file);
        };
      };

      // 对获取到的内容进行解决，并进行加载
      reader.onload = (e) => {
        const result = e.target.result;
        const cleanResult = DOMPurify.sanitize(result);
        console.error('过滤前:', result);
        console.error('过滤后:', cleanResult);
        const bolb = new Blob([cleanResult], {type: 'image/svg+xml',});
        img.src = URL.createObjectURL(bolb);
      };
    };
  </script>
</body>
</html>

那么，对于下述 SVG 代码，它的 Diff 比对为：

01-xss.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="black" />
-  <!-- 这种操作，能够在 SVG 中间接执行 Script，从而通过 Ajax 将同域的 cookie 投出去，造成存储型 XSS -->
-  <script>alert(document.cookie)</script>
</svg>

是的，它会清理掉这个正文，并且把具备危害的 <script> 也给清理了。

那么，它是如何做到的？咱们接着往下看。

6.3 DOMPurify 源码分析

返回目录

对于 DOMPurify 源码分析，将划分 v0.1 版本的细讲，和 v2.4.1 版本的新增解说。

6.3.1 DOMPurify v0.1

返回目录

DOMPurify 的 v0.1 最后版本代码在 2014.03.01 开始打 Tag，地址为：DOMPurify v0.1

作为一个精美的小类库，我认为它的初始版本是十分具备参考性的，所以特意下载下来查看实现思路：

purify.js

;(function(root, factory) {
  'use strict';
  if (typeof define === "function" && define.amd) {define(factory);
  } else {root.DOMPurify = factory();
  }
}(this, function() {
  'use strict';
  var DOMPurify = {};
  DOMPurify.sanitize = function(dirty, cfg) {// ... 其余内容};
  return DOMPurify;
}));

咱们能够看到，它往以后环境挂载了 DOMPurify，且反对 2 种形式援用：

  1. 在 HTML 中援用：
// 挂载到诸如 window.DOMPurify 并应用
var clean = DOMPurify.sanitize(dirty);
  1. 在 AMD 模式中援用：
require(['dompurify'], function(DOMPurify) {var clean = DOMPurify.sanitize(dirty);
};

此时，如果咱们注入的 dirty 如下述调用所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>DOMPurify - 0.1 版本 </title>
  <script src="purify.js"></script>
</head>
<body>
  <script>
    window.onload = () => {
      const svg = `
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="black" />
  <!-- 这种操作，能够在 SVG 中间接执行 Script，从而通过 Ajax 将同域的 cookie 投出去，造成存储型 XSS -->
  <script>alert(document.cookie)<\/script>
</svg>
`;
      debugger;
      const clean = DOMPurify.sanitize(svg);
      console.error('clean:', clean);
      /**
       * 清理后，正文和 script 均移除：<svg xmlns="http://www.w3.org/2000/svg">
          <circle fill="black" stroke-width="2" stroke="black" r="40" cy="50" cx="100"></circle>
        
        
        </svg>
       */
    };
  </script>
</body>
</html>

那么，它的代码调用程序是这样的：

代码 + 解说 

// 步骤一，进入主函数
DOMPurify.sanitize = function(dirty, cfg) {// ... 其余内容};



// 步骤二，判断传参，是否须要依据用户参数做配置
cfg ? _parseConfig(cfg) : null;
var _parseConfig = function(cfg) {
  cfg.ALLOWED_ATTR    ? ALLOWED_ATTR    = cfg.ALLOWED_ATTR    : null;
  // ... 诸如 cfg.xxx，来配置参数
};



/**
 * @name 步骤三，初始化含脏数据的新 Document
 * @description
 * document.implementation 介绍 - https://javascript.ruanyifeng.com/dom/document.html#toc8
 * document.implementation 属性返回一个 DOMImplementation 对象。该对象有三个办法，次要用于创立独立于以后文档的新的 Document 对象。* 上面代码的作用，是将新创建的 Document 对象变为：<html>
  <head></head>
  <body>
    <!-- 这里寄存传入的 dirty 脏数据 -->
  </body>
</html>
 */
// 
var dom = document.implementation.createHTMLDocument('');
  dom.body.parentNode.removeChild(dom.body.parentNode.firstElementChild);
  dom.body.outerHTML = dirty;
var body = WHOLE_DOCUMENT ? dom.body.parentNode : dom.body;

if (!(dom.body instanceof HTMLBodyElement) ||
  !(dom.body instanceof HTMLHtmlElement)
) {var freshdom = document.implementation.createHTMLDocument('');
  body = WHOLE_DOCUMENT
    ? freshdom.getElementsByTagName.call(dom,'html')[0]
    : freshdom.getElementsByTagName.call(dom,'body')[0];
}



/**
 * @name 步骤四，创立新的节点，来寄存最终后果
 * @description
 * document.createNodeIterator 介绍 - https://javascript.ruanyifeng.com/dom/document.html#toc28
 * document.createNodeIterator 办法返回一个子节点遍历器
 * 该实例的 nextNode() 办法和 previousNode() 办法，能够用来遍历所有子节点
 * 
 */
var _createIterator = function(doc) {
  return document.createNodeIterator(
    doc,
    NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT,
    function() { return NodeFilter.FILTER_ACCEPT;},
    false
  );
};
var currentNode;
var nodeIterator = _createIterator(body);



// 步骤五，迭代节点，清理标签和元素
while (currentNode = nodeIterator.nextNode()) {
  // 注 5-1：清理标签和元素:
  if (_sanitizeElements(currentNode)) {continue;}

  // 注 5-2：检测到 Shadow DOM，对其进行清理
  if (currentNode.content instanceof DocumentFragment) {_sanitizeShadowDOM(currentNode.content);
  }

  // 注 5-3：查看属性，如有必要则清理
  _sanitizeAttributes(currentNode);
}



// 步骤六，清理结束，按须要返回数据（字符串或者 DOM）if (RETURN_DOM) {return body;}
return WHOLE_DOCUMENT ? body.outerHTML : body.innerHTML;

这外面的【注 5-1】【注 5-2】以及【注 5-3】代码分析如下所示：

注 5-1

// 通过 3 种伎俩，查看以后 Node 节点是否平安，如不平安，则删除之
// 第 1 种伎俩是独立查看
// 第 2 种是判断正文
// 第 3 种是查看标签白名单（具体白名单能够看附件，这里不具体提醒）// 查看 JQ 的跳过不看
var _sanitizeElements = function(currentNode) {
  if (
    // 注：_isClobbered 在下方独自解读
    _isClobbered(currentNode)
    || currentNode.nodeType === currentNode.COMMENT_NODE
    || ALLOWED_TAGS.indexOf(currentNode.nodeName.toLowerCase()) === -1
  ) {currentNode.parentNode.removeChild(currentNode);
    return true;
  }
  if (SAFE_FOR_JQUERY && !currentNode.firstElementChild) {currentNode.textContent = currentNode.textContent.replace(/</g, '&lt;');
  }
  return false;
};

// _isClobbered：查看具备攻击性的元素，如果返回 true 则代表具备攻击性，否则没有
var _isClobbered = function(elm) {
  if ((elm.children && !(elm.children instanceof HTMLCollection))
    || typeof elm.nodeName  !== 'string'
    || typeof elm.textContent !== 'string'
    || typeof elm.nodeType !== 'number'
    || typeof elm.COMMENT_NODE !== 'number'
    || typeof elm.setAttribute !== 'function'
    || typeof elm.cloneNode !== 'function'
    || typeof elm.removeAttributeNode !== 'function'
    || typeof elm.attributes.item !== 'function'
  ) {return true;}
  return false;
};

注 5-2

// 清理 Shadow DOM
var _sanitizeShadowDOM = function(fragment) {
  var shadowNode;
  var shadowIterator = _createIterator(fragment);

  while (shadowNode = shadowIterator.nextNode()) {
    // 注 5-1：清理标签和元素
    if (_sanitizeElements(shadowNode)) {continue;}

    // 递归查看 Shadow DOM
    if (shadowNode.content instanceof DocumentFragment) {_sanitizeShadowDOM(shadowNode.content);
    }

    // 注 5-3：查看属性，如有必要则清理
    _sanitizeAttributes(shadowNode);
  }
};

注 5-3

// 清理属性
var _sanitizeAttributes = function(currentNode) {var regex = /^(\w+script|data):/gi,
    clonedNode = currentNode.cloneNode();

  for (var attr = currentNode.attributes.length-1; attr >= 0; attr--) {var tmp = clonedNode.attributes[attr];
    currentNode.removeAttribute(currentNode.attributes[attr].name);

    if (tmp instanceof Attr) {
      if ((ALLOWED_ATTR.indexOf(tmp.name.toLowerCase()) > -1 ||
        (ALLOW_DATA_ATTR && tmp.name.match(/^data-[\w-]+/i)))
          && !tmp.value.replace(/[\x00-\x20]/g,'').match(regex)
      ) {currentNode.setAttribute(tmp.name, tmp.value);
      }
    }
  }
};

6.3.2 DOMPurify v2.4.1

返回目录

  • 版本地址：https://github.com/cure53/DOM…
  • 版本工夫：2022.11.10

这里次要看 DOMPurify.sanitize 局部源码更改：

  • 【新增】数据判空、数据格式问题、数据兼容
  • 【优化】配置项更加丰盛
  • 【新增】DOMPurify.removed 数组可查看被清理的元素
  • 【新增】传入的数据会先进行平安监测
  • 【新增】传入的数据类型更为丰盛（可为 DOM element）
  • 【优化】修复了一些 IE 等浏览器的兼容 bug
  • 【优化】迭代节点，清理标签和元素的代码更为欠缺（清理 Shadow DOM 的也优化了）
  • 【新增】条件容许会序列化 doctype
  • 【新增】条件容许会对最初的数据通过 template-safe 再清理一次
  • 【优化】标签白名单和属性白名单更加丰盛健全了

具体的这里就不一一解说了，感兴趣的小伙伴能够自行返回下面版本地址下载和理解。

七 总结

返回目录

通过这一系列的操作，咱们能够给结尾的工作指标划上句号啦~

  • [x] 理解 SVG 破绽
  • [x] 理解 SVG 常见防护伎俩
  • [x] 搜查 SVG 数据安全性校验和过滤的库
  • [x] 理解如何应用此类库来进行 SVG 上传防护
  • [x] 浏览源码，能明确讲述此类库做了什么

欢送小伙伴们点赞、评论、珍藏和吐槽，我是 jsliang，下篇文章见~

八 参考资料

返回目录

优良网站：

  • MDN – SVG
  • 菜鸟教程 – SVG
  • FreeBuf 网络安全行业门户

参考文献：

  • 某某某在搬砖 – 从黑产的角度看文件上传平安之 svg 文件
  • 知乎 – 怡红公子 – Web 安全漏洞之文件上传
  • 平安客 – 興趣使然的小胃 – SVG 在 Web 攻打中的利用
  • CSDN – 帅气的吴先生 – billion laughs attack
  • srcmini – 什么是.NET Framework C#Xml Parser 上的 Billion Laughs XML DoS 攻打
  • freebuf – 山石网科 – SVG 简介
  • 腾讯云 – FB 客服 – 平安钻研 | 利用图片上传性能实现存储型 XSS
  • 知乎 – 合天网安实验室 – 浅谈 SVG 的两个黑魔法
  • DigiNinja – SVG XSS Defence Scenarios
  • Github – digininja/svg_xss
  • DigiNinja – Protecting against XSS in SVG
  • 简书 – book4yi – 文件上传利用 Tips
  • FinClip 小程序里如何平安应用 SVG
  • StackOverflow – Change default text in input type=”file”?
  • How to handle SVG
  • MDN – FileReader.readAsText()
  • StackOverflow – HTML5 File API: How to see the result of readAsText()
  • 掘金 – redmed – SVG 在 image 标签中的动静批改技巧
  • Github – lizheming – svg-allow-tags.json
  • Github – sindresorhus/file-type
  • Github – DOMPurify – tags.js
  • Github – DOMPurify – attrs.js

不折腾的前端，和咸鱼有什么区别！

感觉文章不错的小伙伴欢送点赞 / 点 Star。

如果小伙伴须要分割 jsliang：

  • Github
  • 掘金

集体联系方式寄存在 Github 首页，欢送一起折腾~

争取打造本人成为一个充斥摸索欲，喜爱折腾，乐于扩大本人知识面的一生学习斜杠程序员。

jsliang 的文档库由 梁峻荣 采纳 常识共享 署名 - 非商业性应用 - 雷同形式共享 4.0 国内 许可协定 进行许可。<br/> 基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/> 本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。

正文完
前端
发表至： 前端
2022-12-28
 0
关于前端:疯狂的-Vue3-之-特殊属性
关于前端:20道前端高频面试题附答案
关于前端:用eggjsmongodb简单实现CURDAPI
关于前端:数说热点-2022商业地产的破局与新生逆境之下探索新兴可能