javascript && jQuery 实现html转义

2501207950 发布于2019-08-20 16:27 / 1826人阅读

摘要：解决方案实现转义解码获取实体借助和函数来转译方法获取设置的是匹配元素的文本内容，且会将中的预留字符如大于号转换成字符实体，以便于正确显示方法是获取设置匹配元素的内容。实现转译编码解码

背景：

做快站项目遇到的一个bug，一图胜千言，bug如下图：

这个问题只在某些帐号下出现，绝大数其他帐号都是正常的，正常情况下是这个样子的：

为啥会因帐号而已呢？猜测是因为前端渲染模板所用的数据惹得祸 :（

分析

查看DOM结构：

正常情况下，蓝框内的所有li标签应该都在红筐内。

再看渲染模板用的数据：

果然，数据里面含有html标签，可我在渲染模板之前没有做转义处理，恩，XSS攻击就是这么来的。

解决方案

jQuery 实现html转义

function htmlEncode(value){  
  return $("").text(value).html();  
}  
//Html解码获取Html实体  
function htmlDecode(value){  
  return $("").html(value).text();  
}

借助text()和html()函数来转译html
text() : 方法获取/设置的是匹配元素的文本内容，且会将HTML中的预留字符（如大于号（>））转换成html字符实体，以便于正确显示.
html(): 方法是获取/设置匹配元素的html内容。

javascript 实现html转译

//编码
function html_encode(str)  
    {  
        var s = "";  
        if (str.length == 0) return "";  
        s = str.replace(/&/g, ">");  
        s = s.replace(//g, ">");  
        s = s.replace(/ /g, " ");  
        s = s.replace(/"/g, """);  
        s = s.replace(/"/g, """);  
        s = s.replace(/
/g, "
");  
        return s;  
    }  
  
//解码  
function html_decode(str)  
{  
    var s = "";  
    if (str.length == 0) return "";  
    s = str.replace(/>/g, "&");  
    s = s.replace(//g, ">");  
    s = s.replace(/ /g, " ");  
    s = s.replace(/"/g, """);  
    s = s.replace(/"/g, """);  
    s = s.replace(/
/g, "
");  
    return s;  
}

云服务器 GPU云服务器 html不转义&lt jsp &amp转义符 jquery&ampamp html &lthr&gt

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82928.html

库&amp;插件&amp;框架&amp;工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

Codeing_ls 2019-08-01 18:22 评论0 收藏0
库&amp;插件&amp;框架&amp;工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

xiaowugui666 2019-08-21 18:43 评论0 收藏0
ES6 Features系列：Template Strings &amp; Tagged Templ

摘要：由两部分组成模板起始符，称为沉音符反引号，其内容被识别为字符串模板。其实这是通过属性操作中的结果，也就是说属性将对控制符进行转义从而实现按照普通字符输出。的语法是紧跟在后面，两者间不能有空格或制表符等。 1. Brief ES6(ECMAScript 6th edition)于2015年7月份发布，虽然各大浏览器仍未全面支持ES6，但我们可以在后端通过Node.js 0.12和io....

MyFaith 2019-08-21 10:34 评论0 收藏0
用JavaScript来实现Tab点击切换

　　现在很多都用到Tab 选项卡切换效果，例如点击切换、滑动切换、延迟切换、自动切换等多种效果，本篇文章讲述的就是通过原生 Jquery 来实现 Tab 点击切换的效果。　　例如：　　html　　<body> 　　<divstyle="position:relative;margin-top:56px;display:flex;justify-content:space...

3403771864 2022-10-24 21:40 评论0 收藏0