HTML中的字符串转义

这篇具有很好参考价值的文章主要介绍了HTML中的字符串转义。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

为什么要转义?

转义可以防止 xss 攻击。接下来,我们来看一下如何转义。

HTML Sanitizer API

Sanitizer 是浏览器自带的转义方法,在2021年初被提出,兼容性问题很大。

HTML中的字符串转义,HTML5,html,转义

列举几个常用的 API: 

const $div = document.querySelector('div');
const user_input = `<em>Hello There</em><img src="" onerror=alert(0)>`;
const sanitizer = new Sanitizer() 

$div.setHTML(user_input, sanitizer); // <div><em>Hello There</em><img src=""></div>
const user_input = `<em>Hello There</em><img src="" onerror=alert(0)>`
const sanitizer = new Sanitizer()

sanitizer.sanitizeFor("div", user_input) // HTMLDivElement <div>

sanitizer.sanitizeFor("div", user_input).innerHTML // <em>Hello There</em><img src="">

自定义方法进行转义

这是一个简单的转义,只会把跟 html 有冲突的标签进行转义。

const escapeMap = {
  //'&': '&amp;',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#x27;'
};
 
function escape(string = '') {
  const reg = new RegExp(`[${Object.keys(escapeMap).join('')}]`, 'g');
  return string.replace(reg, item => escapeMap[item]);
}

防止用户输入恶意篡改,Vue,JSX 默认情况下不用处理,插入的文本都是按照字符串处理。Vue中用 v-html 引入的内容要做转义。

第三方库转义

DOMPurify

转义库里面 GitHub star 最多,11.5k。

const user_input = '<em>Hello There</em><img src="" onerror=alert(0)>';
const cleanedHtml = DOMPurify.sanitize(user_input); // <em>Hello There</em><img src="">

还可以根据需要定义自己的白名单(允许的标签)和属性,比如字符串中包含自定义标签和属性时就需要用到。文章来源地址https://www.toymoban.com/news/detail-651631.html

js-xss

sanitize-html

到了这里,关于HTML中的字符串转义的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端如何安全的渲染HTML字符串?

    在现代的Web 应用中,动态生成和渲染 HTML 字符串是很常见的需求。然而,不正确地渲染HTML字符串可能会导致安全漏洞,例如跨站脚本攻击(XSS)。为了确保应用的安全性,我们需要采取一些措施来在安全的环境下渲染HTML字符串。本文将介绍一些安全渲染 HTML 字符串的最佳实

    2024年02月12日
    浏览(45)
  • react如何渲染包含html标签元素的字符串

    最近有个搜索替换的需求,用户可以输入信息来匹配出对应的数据,然后对其进行标记显示,如下图所示: 实现上面的需求的思路就是前端去判断检索内容,将内容中对应的设置一个背景颜色的样式,代码如下: 但这样设置后并未达到我想要的效果,前端

    2024年02月03日
    浏览(39)
  • 使用正则表达式 移除 HTML 标签后得到字符串

    在上述代码中,stripHTMLTags 函数使用正则表达式 /[^]+/g 来匹配所有的 HTML 标签,并使用空字符串进行替换,从而将 HTML 标签移除。 最后,返回移除 HTML 标签后的字符串。

    2024年02月14日
    浏览(55)
  • java中字符串如何去掉转义字符

      处理代码: 处理结果:  java:StringEscapeUtils.unescapeJava去掉转义字符_小徐也要努力鸭的博客-CSDN博客 java中字符串如何去掉转义字符 - 码农教程

    2024年02月11日
    浏览(69)
  • 8.Python从入门到精通—Python 字符串,转义字符,字符串运算符

    在 Python 中,字符串是一种基本数据类型,用于表示文本数据。Python 中的字符串是不可变的,即无法修改字符串中的单个字符。 以下是一些关于 Python 字符串的基本知识点: 创建字符串:可以使用单引号(\\\')或双引号(\\\")来创建字符串。如果字符串中包含引号,则需要使用

    2024年04月08日
    浏览(74)
  • C语言-print字符串打印-转义字符妙用

    这里有两个有关打印的小知识 打印的字符串内容由两部分组成: 可见字符、转义字符 ;各种字母、数字、以及空格,均属于可见字符,“”等属于转义字符 举例: 1.直接print里面打印内容,内容直接出现 2.这里想将一行字符串拆开来展示,直接打印行不通 3.这里要用到转义

    2024年02月16日
    浏览(74)
  • C语言入门之变量、常量、字符串、转义字符

    文章目录 变量 常量 字符串 转义字符 1.变量的命名规则: 只能由字母(包括大写和小写)、数字和下划线( _ )组成。 不能以数字开头。 长度不能超过63个字符。 变量名中区分大小写的。 变量名不能使用。 2.变量的分类:         变量可以分为局部变量以及全局

    2023年04月19日
    浏览(63)
  • HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具

    公文一键排版系统基本完成,准备继续完善SysInfo,增加用户帐户信息,其中涉及到Win32_Account结构,其C++定义如下:  由于WMI使用的是UniCode(WCHAR),所以我们在MASM32中要将以上成员属性AccountType、Caption……按DW UniCode(WCHAR)来定义,如下: 虽然MASM32 在QEDITOR 的 Conversions里提

    2024年02月13日
    浏览(42)
  • 怎么将拼接的字符串element组件通过“v-html“渲染到页面

    如上图所示,没那么多废话,直接上代码 html中 vue中

    2024年02月16日
    浏览(48)
  • 飞天使-python的字符串转义字符元组字典等

    基础语法 数据类型 python的字符串 运算符 输入和输出 数据结构 列表与元组 元组的操作 字典与集合 参考文档

    2024年02月10日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包