前端xss攻击——规避innerHtml过滤标签节点及属性
创始人
2024-12-28 06:37:09
0次

文章目录

    • ⭐前言
    • ⭐规避innerHtml
      • 💖在iframe中使用innerHtml的场景
      • 💖标签转义
      • 💖url 进行encode
      • 💖手动过滤内容+转义
    • ⭐inscode代码块演示
    • ⭐结束

yma16-logo

⭐前言

大家好,我是yma16,本文分享xss攻击——规避innerHtml过滤script等动态js节点。

xss攻击
XSS(Cross-Site Scripting)攻击是一种常见的网络安全漏洞,它允许攻击者将恶意的脚本代码注入到网页中,当用户通过浏览器访问这个网页时,这些恶意代码就会被执行,从而使攻击者能够窃取用户的敏感信息,如登录凭据、个人信息等。

XSS攻击一般可以分为三种类型:

  1. 存储型XSS:攻击者将恶意脚本代码存储到目标网站的数据库中,当用户访问含有恶意代码的页面时,代码会从数据库中被提取并执行。
  2. 反射型XSS:攻击者构造一个含有恶意代码的URL链接,当用户点击这个链接时,恶意代码会被注入到响应页面的参数中并执行。
  3. DOM型XSS:攻击者通过修改和篡改页面的DOM结构来实现攻击,一般通过修改URL参数或表单数据来触发。

为了防止XSS攻击,开发者可以采取以下几种措施:

  • 输入验证和过滤:对用户输入的数据进行验证和过滤,只允许合法的输入。
  • 转义输出:在向用户输出数据时,对特殊字符进行转义处理,防止恶意代码被执行。
  • 设置HttpOnly标志:在设置Cookie时,添加HttpOnly标志,使得Cookie只能通过HTTP协议传输,防止被恶意脚本窃取。
  • 使用内容安全策略(Content Security Policy,CSP):CSP可以帮助开发者限制网页中可以执行的脚本来源,从而有效防止XSS攻击。

总之,XSS攻击是一种常见而危险的漏洞,开发者和用户都需要注意防范和注意保护个人信息的安全。

⭐规避innerHtml

inner的危险
使用innerHtml属性可以直接操作和修改HTML内容,但是也存在一定的危险性。以下是一些内涵Html属性的潜在风险:

  1. 跨站脚本攻击(XSS):如果输入的内容没有经过适当的验证和过滤,恶意用户可以插入恶意脚本代码,从而实现跨站脚本攻击。这些恶意脚本可以用来窃取用户的个人信息、篡改网页内容或发送恶意行为。

  2. 不安全的内容插入:使用innerHtml属性可以直接插入内容,但如果不进行适当的验证和过滤,可能会导致插入不安全的内容,例如从不受信任的来源获取的脚本、链接或其他恶意代码。

  3. CSS注入:通过innerHtml属性,恶意用户可以插入恶意的CSS代码,从而导致网页的样式受到破坏,或者被重定向到其他网页。

  4. 内容失去结构:使用innerHtml属性可以直接修改HTML结构,但如果不小心操作,可能导致内容失去原有的结构和语义,影响网页的可访问性和可维护性。

为了减少这些风险,开发者应该始终对输入的内容进行适当的验证、过滤和转义,以防止XSS攻击和其他安全问题。建议使用安全的API或框架来处理HTML内容,例如使用textContent属性来修改文本内容,或使用DOM操作方法来修改元素的属性和子元素。

💖在iframe中使用innerHtml的场景

iframe直接渲染html字符串

 // innerHtml渲染iframe  const innerHtmlIframe = () => {      const doc = document.getElementById('iframe-id').contentWindow.document;      const iframeHtmlDom = doc.getElementsByTagName('html')[0];      iframeHtmlDom.innerHTML = getHtml()  } 

某个document直接使用innerHtml

documnet.getElementById('test').innerHTML = '恶意脚本' 

恶意代码运行的效果:点击链接运行js弹出一个弹框
xss-html
恶意的输入内容
style标签

 

svg标签

 

标签

   #弹出cookie 

video标签

script标签

   #弹出hack    #弹出hack         #弹出1,对于数字可以不用引号       #弹出cookie   #引用外部的xss 

利用JS将用户信息发送给后台

                             

hello,word!

💖标签转义

通过将特殊字符转义为实体编码

HTML常用的转义字符" & < >  

参考转义文档:https://tool.oschina.net/commons?type=2

字符十进制转义字符
"" "
&&&
<<<
>>>
不断开空格(non-breaking space)  

普通的转义处理

// HTML转义 let userInput = ''; let escapedHtml = document.createElement('div'); escapedHtml.textContent = userInput; console.log(escapedHtml.innerHTML); // 输出:<script>alert("XSS Attack");</script> 

HTML转义,使用textContent属性创建一个新的DOM元素,并将用户输入设置为文本内容,通过访问innerHTML属性获取HTML转义后的输出

💖url 进行encode

urlEncode处理跳转的属性href和src

// URL编码 let url = 'https://www.example.com/?param=' + encodeURIComponent(''); console.log(url); // 输出:https://www.example.com/?param=%3Cscript%3Ealert(%22XSS%20Attack%22);%3C/script%3E 

💖手动过滤内容+转义

使用枚举把恶意标签和脚本通过内容处理屏蔽,再使用普通的转义

32个可以触发xss的属性

[     "onmouseenter",     "onmouseleave",     "onmousewheel",     "onscroll",     "onfocusin",     "onfocusout",     "onstart",     "onbeforecopy",     "onbeforecut",     "onbeforeeditfocus",     "onbeforepaste",     "oncontextmenu",     "oncopy",     "oncut",     "ondrag",     "ondragend",     "ondragenter",     "ondragleave",     "ondragover",     "ondragstart",     "ondrop",     "onlosecapture",     "onpaste",     "onselectstart",     "onhelp",     "onEnd",     "onBegin",     "onactivate",     "onfilterchange",     "onbeforeactivate",     "onbeforedeactivate",     "ondeactivate" ] 

手动处理dom节点之后再返回dom

const xssTagArr = [     "onmouseenter",     "onmouseleave",     "onmousewheel",     "onscroll",     "onfocusin",     "onfocusout",     "onstart",     "onbeforecopy",     "onbeforecut",     "onbeforeeditfocus",     "onbeforepaste",     "oncontextmenu",     "oncopy",     "oncut",     "ondrag",     "ondragend",     "ondragenter",     "ondragleave",     "ondragover",     "ondragstart",     "ondrop",     "onlosecapture",     "onpaste",     "onselectstart",     "onhelp",     "onEnd",     "onBegin",     "onactivate",     "onfilterchange",     "onbeforeactivate",     "onbeforedeactivate",     "ondeactivate" ]  // 获取html doc const getHtmlDocByString = (htmlString) => {     const parser = new DOMParser();     const doc = parser.parseFromString(htmlString, 'text/html');     return doc }  // 过滤 head  function filterHeadDomAction(node) {     const name = node.nodeName     console.log('name', name)     if (name.toLocaleLowerCase() === 'script') {         // 过滤script 标签         console.log('script', name)         // 删除         node.remove()     }      // 对于链接使用 urlEncode     // 对于链接使用 urlEncode     ['href', 'src'].forEach(attr => {         const arrtVal = node.getAttribute(attr)         if (arrtVal) {             node.setAttribute(attr, encodeURIComponent(arrtVal))         }     })      // 移除异常属性     xssTagArr.forEach(attr => {         if (node && node.getAttribute(attr)) {             node.removeAttribute(attr)         }      })      // 遍历当前节点的子节点     for (let i = 0; i < node.childNodes.length; i++) {         const child = node.childNodes[i];         // 递归遍历子节点         if (child.nodeType === 1) {             filterHeadDomAction(child)         }     }     return node }  //   过滤 body dom function filterBodyDomAction(node) {     const name = node.nodeName     console.log('name', name)     if (name.toLocaleLowerCase() === 'script') {         // 过滤script 标签         console.log('script', name)         // 删除 script         node.remove()     }     // 对于链接使用 urlEncode     ['href', 'src'].forEach(attr => {         const arrtVal = node.getAttribute(attr)         if (arrtVal) {             node.setAttribute(attr, encodeURIComponent(arrtVal))         }     })      // 移除异常属性     xssTagArr.forEach(attr => {         if (node && node.getAttribute(attr)) {             node.removeAttribute(attr)         }      })     // 遍历当前节点的子节点     for (let i = 0; i < node.childNodes.length; i++) {         const child = node.childNodes[i];         // 递归遍历子节点         if (child.nodeType === 1) {             filterBodyDomAction(child)         }     }     return node }    // 过滤html const filterHtmlDoc = () => {     const htmlVal = getHtml()      const htmlDom = getHtmlDocByString(htmlVal)      const filterBodyDom = filterBodyDomAction(htmlDom.body)     const filterHeadDom = filterHeadDomAction(htmlDom.head)     // dom节点替换  html ->head\body     const doc = document.getElementById('iframe-id').contentWindow.document;      const iframeHtmlDom = doc.getElementsByTagName('html')[0];     // 替换dom     iframeHtmlDom.replaceChild(filterHeadDom, iframeHtmlDom.getElementsByTagName('head')[0]);     iframeHtmlDom.replaceChild(filterBodyDom, iframeHtmlDom.getElementsByTagName('body')[0]);  } 

⭐inscode代码块演示

img
inscode代码如下

运行测试截图如下
xss-test

⭐结束

本文分享到这结束,如有错误或者不足之处欢迎指出!
earth

👍 点赞,是我创作的动力!
⭐️ 收藏,是我努力的方向!
✏️ 评论,是我进步的财富!
💖 最后,感谢你的阅读!

相关内容

热门资讯

实测交流透视挂!宝玛大厅ai智... 实测交流透视挂!宝玛大厅ai智能透视挂教程,宝玛大厅破解软件经验(本来有挂辅助)1、每一步都需要思考...
总算了解辅助器!朱雀吴江三缺一... 总算了解辅助器!朱雀吴江三缺一ai智能透视辅助挂技巧,朱雀吴江三缺一好像是有挂(有辅助挂细节)朱雀吴...
今日公布透视!九五至尊大厅ai... 今日公布透视!九五至尊大厅ai智能透视插件,九五至尊大厅有没有透视挂窍门(切实有挂技术)1、在九五至...
玩家必看科普开挂!聚闲麻将ai... 玩家必看科普开挂!聚闲麻将ai智能透视辅助挂软件,聚闲麻将总是真的有挂(有辅助挂方式)聚闲麻将能透视...
据报道开挂!旅游娱乐ai智能开... 据报道开挂!旅游娱乐ai智能开挂工具,旅游娱乐辅助工具演示(一直有挂教学)1、全新机制【旅游娱乐ai...
一分钟揭秘开挂!决胜朋来麻将a... 一分钟揭秘开挂!决胜朋来麻将ai智能透视辅助挂教程,决胜朋来麻将真是真的是有挂(有辅助挂总结)1、首...
如何分辨真伪透视!红牛ai智能... 如何分辨真伪透视!红牛ai智能透视攻略,红牛是不是有挂经验(真是有挂技术)1、操作简单,无需红牛手机...
2分钟细说辅助器!江湖大庆麻将... 2分钟细说辅助器!江湖大庆麻将ai智能透视辅助挂攻略,江湖大庆麻将竟然是真的有挂(有辅助挂头条)1、...
总算清楚透视挂!老夫子厅ai智... 总算清楚透视挂!老夫子厅ai智能透视挂技巧,老夫子厅怎么开挂课程(好像发现有挂)老夫子厅破解侠是真的...
解密关于辅助!菜鸟麻将ai智能... 解密关于辅助!菜鸟麻将ai智能透视辅助挂脚本,菜鸟麻将总是存在有挂(有辅助挂存在)1、用户打开应用后...