首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性

赋值操作:先对值内容进行模式匹配,然后把处理后的值赋予给innerHTML属性。         模式匹配结果将导致 保留 和 将字符转换为HTML实体 两个操作。         a)....HTML实体(ASCII实体、符号实体和字符实体)的实体名或实体编号;              2. 符号实体和字符实体对应的字符;              3....ASCII实体对应的字符(、&、'和")。         也就是说除了单独的 、&、'和" 会被转换为实体名外,将原封不动地将值赋予给innerHTML属性。...对CSS样式进行带限制的解析和渲染;          3. 将ASCII实体转换为对应的字符;          4. 剔除格式信息(如\t、\r和\n等),将多个连续的空格合并为一个。  ...、innerText、textContent和value      到这里大家应该对innerHTML、innerText和textContent之间的关系和行为有一定了解了,但不幸的是表单元素一如既往地会推翻我们之前的理解

4.2K70
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Web APIs第七天

    定义正则表达式语法: 定义规则 查找 JavaScript 中定义正则表达式的语法有两种,我们先学习其中比较简单的方法: 其中 / /是正则表达式字面量 // 1....判断是否有符合规则的字符串 1. test() 方法 用来查看正则表达式与指定的字符串是否匹配 定义正则表达式, 检测查找是否匹配 如果正则表达式与指定的字符串匹配 ,返回true,否则false //...检索(查找)符合规则的字符串: exec() 方法 在一个指定字符串中执行一个搜索匹配 如果匹配成功,exec() 方法返回一个数组,否则返回null // 检索/查找 符合规则的字符串 返回的数组 let...num2 = reg.exec(num1) console.log(num2) 正则表达式检测查找 test方法和exec方法的区别 test方法 用于判断是否有符合规则的字符串,返回的是布尔值 找到返回...元字符 是一些具有特殊含义的字符,可以极大提高了灵活性和强大的匹配功能, 比如,规定用户只能输入英文26个英文字母,普通字符的话 abcdefghijklm….., 但是换成元字符写法: [a-z] MDN

    30220

    前端成神之路-JavaScript高级第04天

    = /123/; 2.2测试正则表达式 test() 正则对象方法,用于检测字符串是否符合该规则,该对象会返回 true 或 false,其参数是测试字符串。...3.正则表达式中的特殊字符 3.1正则表达式的组成 一个正则表达式可以由简单的字符构成,比如 /abc/,也可以是简单和特殊字符的组合,比如 /ab*c/ 。...其中特殊字符也被称为元字符,在正则表达式中是具有特殊意义的专用符号,如 ^ 、$ 、+ 等。...字符类表示有一系列字符可供选择,只要匹配其中一个就可以了。...是否一致 3.5正则替换replace replace() 方法可以实现替换字符串操作,用来替换的参数可以是一个字符串或是一个正则表达式。

    52520

    JS魔法堂:再识ASCII实体、符号实体和字符实体

    字符实体有三种表示方式: // Named character reference(实体名) // 示例:  &entity_name; // Decimal numeric character...对于每个实体的使用请参考@张鑫旭的《web页面相关的一些常见可用字符介绍》,这里就借用一下关于空格符部分的内容。   ,不是space键产生的空格。宽度受到字体的影响。...四、通过outerHTML,innerHTML,innerText,textContent和value操作实体    首先我们需要将3种实体类型分成两类,ASCII实体为一类,字符实体和符号实体为一类。...对于ASCII实体      1. 非表单元素的outerHTML和innerHTML只能获取实体名或实体编号;      2. ...对于字符实体和符号实体      只能获取对应的字符,无法直接获取实体名和实体编号。 五、总结                                     若有纰漏请大家指正,谢谢。

    2.2K80

    基本正则表达式的运用【前端】

    关于正则表达式一直都是个让很多程序员都觉得很郁闷的一个东西,我觉得创造正则表达式的那个家伙简直就是个奇葩,要不就是外星人。...就那么一个字符规则校验就足以使那么多程序员为之抓狂,你可以想象这个东西该有多变态。...代码真的很详细,句句有解释 正则表达式简介: 正则表达式是由一些具有特殊含义的字符组成的字符串,多用于查找、替换符合规则的字符串。在表单验证、Url映射等处都会经常用到。...下面是没有任何css样式和js文件的正则表达式,很简单,可以直接用,下面是效果图  代码如下 <!...reg.test(name)){//不匹配 shift+end sp.innerHTML = "用户名必须是6-10位的合法字符"; return false; }

    52010

    「JS高级」正则表达式

    = /123/; 2.2测试正则表达式 test() 正则对象方法,用于检测字符串是否符合该规则,该对象会返回 true 或 false,其参数是测试字符串。...123 未出现结果为false 测试正则表达式 3.正则表达式中的特殊字符 3.1正则表达式的组成 一个正则表达式可以由简单的字符构成,比如 /abc/,也可以是简单和特殊字符的组合,比如 /ab...其中特殊字符也被称为元字符,在正则表达式中是具有特殊意义的专用符号,如 ^ 、$ 、+ 等。...特殊字符非常多,可以参考: MDN官方手册 jQuery 手册:正则表达式部分——正则测试工具 3.2边界符 正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符 边界符 说明 ^ 表示匹配行首的文本...字符类表示有一系列字符可供选择,只要匹配其中一个就可以了。

    2.5K20

    XSS编码剖析

    另外在freebuf里,有很多文章介绍过跨站编码,有兴趣的,可以搜索下。 本文介绍常见的编码方法,能力不足,如有其他意见,请指正。...0×01 常用编码 URL编码:一个百分号和该字符的ASCII编码所对应的2位十六进制数字,例如“/”的URL编码为%2F(一般大写,但不强求) HTML实体编码: 命名实体:以&开头,分号结尾的,例如...“的编码是“<” 字符编码:十进制、十六进制ASCII码或unicode字符编码,样式为“&#数值;”,例如“和“<” JS编码:js提供了四种字符编码的策略...,使用特殊的C类型的转义风格(例如\n和\r) CSS编码:用一个反斜线(\)后面跟1~6位的十六进制数字,例如e可以编码为“\65”或“65”或“00065” 复合编码: 所谓复合编码,也就是说输出的内容输出在多个环境中...0×02基本概念 HTML解析器能识别在文本节点和参数值里的实体编码,并在内存里创建文档树的表现形式时,透明的对这些编码进行解码。 例如以下两种写法的功能是一样的(忽略里面的空格。。

    1.6K80

    HTML语义化:HTML5新标签——template

    伪文档片段入口——content属性 二、那些年我们存放模板文本的方式                     首先要明确模板文档具有以下2个要求:     1.   "' 不被转成字符实体;  ...但不能通过tplEl.innerHTML获取,因为它会对"'等转换为字符实体 tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '') Handlebars.compile...“文档片段”的[[Class]]为[object DocumentFragment],“文档片段”具有文档片段的所有功能API,不同的是设置img元素的src属性不会发出资源请求、不执行Script和CSS...规则,而[object HTMLDocument]“文档”则会发送img请求并在当前browsing context(即window对象上下文)内执行Script和CSS规则。...因此我们需要复制模板内的元素,然后再将元素副本添加到当前文档中。实现手段有很多种,大家可以自行了解一下。

    1.9K90

    新的 W3C 提案助你安全操作 DOM

    转义 将用户输入、查询字符串、cookie 内容等插入 DOM 时,必须要正确转义这些字符串。通过 .innerHTML 插入未转义的字符串是 XSS 的典型来源。...HTML 特殊字符或使用 .textContent 对它进行展开,alert(0) 就不会被执行。...消除 转义是指把 HTML 实体 替换未特殊的 HTML 字符。而消除则指的是从 HTML 字符串中删除可能产生危害的脚本。...$div.innerHTML = `hello world` 为了实现正确的消除效果,可能需要将输入字符串解析为 HTML,省略被认为有风险的标签和属性,并保留安全的部分...如果返回一个字符串,则输入字符串会被 DOMPurify 和 .innerHTML 解析两次。这种双重解析会浪费处理时间,但也可能导致由于第二次解析的结果与第一次不同的情况引起其他的漏洞。

    75820

    JavaScript中的数据类型

    数据类型 转换为true的值 转换为false的值 Boolean true false String 任何非空字符串 ""(空字符串) Number 任何非零数字值(包括无穷大) 0和NaN Object...基本上所有浏览器的上限均为 1.7976931348623157e+308 ,下限均为 5e-324 。 超出数值范围,数值将被自动转换为特殊的Infinity(无穷)值。...(4)数值转换 有三个函数可以把非数值转换为数值: Number() 、 parseInt() 、 parseFloat() 。第一个可以用于任何数据类型,而后两个专用于字符串的转换。...① toString() 方法 null和undefined没有 toString() 方法,如果使用会报错。 1 规则 --> 2 <!...var obj = new Object(); // 可以创建一个对象 Object的每个实例都具有一下属性和方法: ① constructor :构造函数; ② hasOwnProperty :用以检查给定属性是否存在于当前对象实例中

    2.2K60

    【踩坑】angularJS 1.X版本中 ng-bind 指令多空格展示

    2、定位分析   2.1 从用户输入到最终查询展示经理太多环节,可能转换的地方有:  输入时的事件中,请求服务器前,http传输,服务器接收解析,服务器处理,服务器保存至数据库,数据库查询服务,查询服务返回...:先将ASCII实体对应的字符(、&、'和")转换为实体名,然后把处理后的值赋予给innerHTML属性。...'' : value.replace(/[ ]/g," ");      会被保留在html中,这和以前常用的jquery的html()或者innerHtml不一样   3.2 替换后的...基于我们项目目前的情况1、严格使用ng-bind,2 使用$sce 3、数据在Service有编码转码处理,目前还没有发现BUG,但是在通用场景下这样改是否合适?...欢迎大家补充 参考:JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性

    1.1K30

    前端XSS相关整理

    要想在HTML页面中呈现出特殊字符,就需要用到对应的字符实体。...+ #符号 以及字符的十进制数字,如”的实体编号为< 或以&开头 + #x符号 以及字符的十六进制数字,如”的实体编号为< 字符都是有实体编号的但有些字符没有实体名称。...普通编码与实体编码的在线转换 1.3.2 Javascript编码 Unicode 是字符集,而 utf-8,utf-16,utf-32 是编码规则 最常用的如“\uXXXX”这种写法为Unicode转义序列...%加字符的ASCII编码对于的2位16进制数字,如”/”对应的URL编码为%2f 转换可以使用 JS 自带的 encodeURIComponent 和 decodeURLComponent 方法来对特殊字符进行转义...不过和后端一样,使用模板也要考虑到XSS的问题 Handlebars模板中可选择是否开启转义 <!

    4.7K32

    Web前端学习 第3章 JavaScript基础教程10 正则表达

    一、正则表达式概述 正则表达式用于匹配字符串,例如我们想验证某一个字符串是否为邮箱格式,可以使用正则表达式判断;我们希望特换一片文章中的所有英文字母,可以使用正则表达式;我们想截取一片文章中的某些内容,...,如果字符串中的内容符合这种规则,就会匹配,如果不符合这个规则,就不会匹配 1 var reg = /123/; //创建了一个正则表达式,这个正则表达式可以匹配字符串"123" 2 var str...,我们先来确定一下邮箱的格式: 5~12位的数字字母下划线开头 后面接@ 后面接2~5位的数字和字母 后面接....,为了取消它的特殊含义,我们需要在特殊符号之前加“\”将其转义。...、 三、表单验证 通过上面的学习,我们已经对正则表达式有了初步的了解,下面我们来实现一个表单验证邮箱的功能,验证通过或者不通过,都要在文本框后面输出结果 1

    32720

    2024全网最全面及最新且最为详细的网络安全技巧 七之 XSS漏洞典例分析POC以及 如何防御和修复(5)———— 作者:LJS

    常见的Markdown渲染器对于XSS问题有两种处理方式: 在渲染的时候格外注意,在写入标签和属性的时候进行实体编码 渲染时不做任何处理,渲染完成以后再将整个数据作为富文本进行过滤 相比起来,后一种方式更加安全...1)> 字符匹配导致的问题 回看这个[^>]*,作者的意思是一直往后找onload=直到标签闭合的位置为止,但是实际上这里有个Bug,一个HTML属性中,也可能存在字符>...-- 用于显示通知的 div --> /* Utils */ // escape 函数:用于转义特殊字符...innerHTML是原生js的写法,Jqury.html()也是调用原生的innerHTML方法,但是加了自己的解析规则(后文介绍)。...关于两种方式:Jquery.html()和innerHTMl的区别我们用示例来看。

    10910

    换一种姿势挖掘CORS漏洞

    xxe.sh、其子域、以及它们所有的端口的跨域请求 和上面不同的是,这里关于端口的正则相对严格一点,要求不能出现....这不就绕过了吗,美滋滋~ 然而,这种方式在浏览器里并没有用,浏览器根本就不会向这种域名发起请求 浏览器在发起请求前会检查域名是否合法 但是,通过正则我们已经知道xxe.sh后面是可以加一些特殊字符绕过的...和前面两个浏览器不同,safari报了400错误,其他两个都是直接地址不可达,safari实际上是发送了请求的,除此之外,这里还有很多其他的特殊字符可以尝试一下,例如: ,&'";!...因为Apache和Nginx对这些有特殊字符的域名支持都不太好,所以,我们直接用NodeJS在我们的主机上搭建一个Server比较好 serve.js var http = require('http'...但是如果让我们在挖掘的时候一个一个试这些特殊字符是否被access-control-allow-origin接收是很难受的,所以...

    1.2K20

    这一次,彻底理解XSS攻击

    ; 非HTML文档中的实体突变; HTML文档中的非HTML上下文的实体突变; 三、XSS攻击代码出现的场景 四、XSS 攻击的预防 网上防范XSS攻击的方法一搜就一大堆,但是无论方法有多少...()、setInterval()等,都能把字符串作为代码运行。...那么,换一个过滤时机:后端在写入数据库前,对输入进行过滤,然后把“安全的”内容,返回给前端。这样是否可行呢?...这里的“并不确定内容要输出到哪里”有两层含义: 用户的输入内容可能同时提供给前端和客户端,而一旦经过了 escapeHTML(),客户端显示的内容就变成了乱码( 5 $lt;7 )。...常用的模板引擎,如 doT.js、ejs、FreeMarker 等,对于 HTML 转义通常只有一个规则,就是把 & " ' / 这几个字符转义掉,确 实能起到一定的 XSS 防护作用,但并不完善

    3.4K20
    领券