网站如何使用cdn有没有便宜的注册代理

网站如何使用cdn,有没有便宜的注册代理,美食网页设计模板国内版,改进网站建设英文作文目录 一、防范措施 1.layui util 核心转义的特殊字符 示例 2.js-xss.js库 安装 1. Node.js 环境#xff08;npm/yarn#xff09; 2. 浏览器环境 核心 API 基础使用 1. 基础过滤#xff08;默认规则#xff09; 2. 自定义过滤规则 #xff08;1#xff09;允许…目录一、防范措施1.layui util核心转义的特殊字符示例2.js-xss.js库安装1. Node.js 环境npm/yarn2. 浏览器环境核心 API 基础使用1. 基础过滤默认规则2. 自定义过滤规则1允许特定标签2允许特定属性3自定义标签处理4自定义属性处理5转义特定字符常见场景示例1. 过滤用户输入的评论内容2. 允许特定富文本标签如富文本编辑器内容注意事项更多配置XSS跨站脚本攻击是一种常见的网络攻击手段它允许攻击者将恶意脚本注入到其他用户的浏览器中。XSS攻击通常发生在用户浏览网页时攻击者通过在网站表单、评论区、URL参数等地方插入恶意脚本代码当其他用户访问该页面时这些脚本就会在用户的浏览器中执行。那该如何预防呢一般是对输入框输入的内容数据进行验证和清理确保不包含任何可执行的脚本代码。一、防范措施可自行封装一个防范XSS攻击的方法这种较为自由能根据项目需求自定义防范标准当然也可以借用相关的工具库更加方便下面我为大家整理了相关工具的用法。1.layui utillayui Util 提供的layui.util.escape()是核心的 XSS 防护方法其核心作用是对 HTML 中的特殊字符进行转义处理会将具有潜在危险的特殊字符转换为对应的 HTML 实体从而阻止恶意脚本被浏览器解析执行从根源上防范大部分反射型、存储型 XSS 攻击。核心转义的特殊字符该方法会针对性转义 HTML 中最具危险性的特殊字符核心转义规则如下原始特殊字符转义后的 HTML 实体说明lt;小于号HTML 标签开始标识gt;大于号HTML 标签结束标识quot;双引号属性值包裹标识#39;单引号属性值包裹标识amp;和号HTML 实体的起始标识这些字符是构建 HTML 标签、属性的关键恶意攻击者常通过注入包含这些字符的脚本如scriptalert(XSS)/script来实施攻击转义后这些脚本会变成纯文本无法被浏览器解析执行。示例layui.use(util, function(){ var util layui.util; // 模拟用户输入的恶意内容含XSS脚本 var maliciousContent scriptalert(XSS攻击);/scripta hrefjavascript:evil()恶意链接/a; // 使用escape方法进行XSS转义 var safeContent util.escape(maliciousContent); // 输出结果已转为安全的HTML实体 console.log(safeContent); // 输出lt;scriptgt;alert(quot;XSS攻击quot;);lt;/scriptgt;lt;a hrefquot;javascript:evil()quot;gt;恶意链接lt;/agt; // 将转义后的内容插入页面仅显示为纯文本不会执行脚本 document.getElementById(content).innerText safeContent; });2.js-xss.js库js-xss是一个用于防范 XSS跨站脚本攻击的 JavaScript 库能够过滤 HTML 字符串、移除危险标签 / 属性确保输出的 HTML 安全可渲染。以下是js-xss的详细用法包括安装、基础使用、自定义规则、常见场景等。安装1. Node.js 环境npm/yarn# npm npm install xss --save # yarn yarn add xss2. 浏览器环境直接引入 CDN 或本地文件!-- CDN -- script srchttps://cdn.jsdelivr.net/npm/xss/dist/xss.min.js/script !-- 本地下载后 -- script srcpath/to/xss.min.js/script核心 API 基础使用js-xss的核心是xss()函数传入需要过滤的字符串返回安全的 HTML。1. 基础过滤默认规则默认规则会移除所有危险标签如script、iframe和危险属性如onclick、onload保留常规标签如div、p。// Node.js 环境 const xss require(xss); // 浏览器环境直接使用全局变量 xss // 待过滤的危险字符串 const dangerousHtml div onclickalert(xss)点击我/div scriptstealData()/script img srcx onerroralert(1) ; // 过滤 const safeHtml xss(dangerousHtml); console.log(safeHtml); // 输出危险内容被移除 // div点击我/div // img srcx2. 自定义过滤规则通过配置选项自定义规则满足个性化需求如允许特定标签 / 属性、自定义标签处理逻辑。1允许特定标签const safeHtml xss(dangerousHtml, { // 白名单仅允许 div、p、img 标签默认白名单包含大部分常规标签 whiteList: { div: [], // [] 表示允许该标签但不允许任何属性 p: [class], // 允许 p 标签的 class 属性 img: [src, alt] // 允许 img 标签的 src、alt 属性 } });2允许特定属性const html div classtest onclickalert(1)>3自定义标签处理通过onTag钩子自定义标签的过滤逻辑const safeHtml xss(dangerousHtml, { onTag: function(tag, html, options) { // 禁止所有 h1 标签直接返回空 if (tag h1) return ; // 其他标签按默认规则处理 return undefined; } });4自定义属性处理通过onTagAttr钩子自定义属性的过滤逻辑const html a hrefjavascript:alert(1)链接/a; const safeHtml xss(html, { onTagAttr: function(tag, name, value, isWhiteAttr) { // 处理 a 标签的 href 属性过滤 javascript: 伪协议 if (tag a name href) { if (value.startsWith(javascript:)) { return href#invalid; // 替换为无效链接 } } // 其他属性按默认规则处理 return isWhiteAttr ? ${name}${xss.escapeAttrValue(value)} : ; } }); console.log(safeHtml); // 输出a href#invalid链接/a5转义特定字符默认会转义、、、、等字符也可自定义转义规则const safeHtml xss(phello world/p, { escapeHtml: function(html) { // 自定义转义仅转义 和 return html.replace(//g, amp;).replace(//g, lt;); } }); console.log(safeHtml); // 输出phello amp; world/p常见场景示例1. 过滤用户输入的评论内容// 假设用户提交的评论包含危险代码 const userComment p我的评论/p script偷取cookie/script img srcx onerroralert(xss) ; // 过滤后渲染 const safeComment xss(userComment, { whiteList: { p: [class], img: [src, alt] // 仅允许 img 的 src 和 alt 属性 } }); // 插入到页面 document.getElementById(comment).innerHTML safeComment;2. 允许特定富文本标签如富文本编辑器内容// 富文本允许的标签和属性 const richTextWhiteList { h1: [class], h2: [class], p: [class, style], a: [href, target, class], img: [src, alt, class, width, height], strong: [], em: [] }; const richText p stylecolor: red富文本内容a hrefjavascript:alert(1)危险链接/a/p; const safeRichText xss(richText, { whiteList: richTextWhiteList, // 允许 style 属性的特定值需配合 onTagAttr 过滤 onTagAttr: function(tag, name, value) { if (tag p name style) { // 仅允许 color 样式 if (/^color:\s*[a-zA-Z0-9#];?$/.test(value)) { return style${value}; } return ; } if (tag a name href) { // 过滤 a 标签的 javascript: 伪协议 if (value.startsWith(javascript:)) { return href#; } return href${value}; } return ${name}${value}; } });注意事项不要完全依赖默认规则根据业务场景自定义白名单避免允许不必要的标签 / 属性。富文本处理需谨慎富文本编辑器可能允许更多标签需精细化配置白名单和属性过滤。服务端 客户端双重过滤客户端过滤提升用户体验服务端过滤是最后一道防线防止绕过客户端过滤。特殊场景例外如果需要允许部分安全的脚本如第三方插件需通过严格的白名单和校验避免直接放行。更多配置js-xss的完整配置项可参考官方文档js-xss核心配置包括whiteList标签白名单默认值参考源码。onTag标签处理钩子。onTagAttr属性处理钩子。onIgnoreTag忽略标签时的钩子。onIgnoreTagAttr忽略属性时的钩子。escapeHtml自定义转义函数。safeAttrValue是否过滤属性值中的危险内容。通过灵活配置js-xss可适配绝大多数 XSS 防护场景是前端 / Node.js 中防范 XSS 的较为推荐的工具之一。前端虽有xss防护但是主要还需有后端的一起配合不要仅依赖「前端过滤」攻击者可通过 Postman 等工具直接请求接口后端必须过滤。