提示：前端查漏补缺，仅代表个人观点，不接受任何批评

文章目录

一、XSS是什么？
二、XSS 类型划分
- 1.反射性XSS （Reflected XSS）
- 2.存储型XSS （Stored XSS）
- 3.基于DOM或本地的XSS攻击（DOM-based or local XSS）
三、XSS防范手段
- 1.htmlencode转义特殊字符
- 2.引入XSS库针对用户输入源过滤，设置标签白名单（node.js）
- 3.cookie设置HttpOnly，配合token或验证码防范
总结

提示：以下是本篇文章正文内容，下面案例可供参考

一、XSS是什么？

全称：跨站脚本漏洞（Cross Site Scripting，简写作XSS）是Web应用程序在将数据输出或者展示到网页的时候存在问题，导致攻击者可以将对网站的正常功能造成影响甚至窃取或篡改用户个人信息，其诱发的主要原因是没有针对用户输入来源的数据以及不可信数据源的过滤。

二、XSS 类型划分

1.反射性XSS （Reflected XSS）

常见情况是攻击者通过构造一个恶意链接的形式，诱导用户传播和打开，由于链接内所携带的参数会回显于页面中或作为页面的处理数据源，最终造成XSS攻击。

2.存储型XSS （Stored XSS）

存储型XSS是持久化的XSS攻击方式，通过用户输入个人信息或者发表文章的方式将恶意代码存储于服务器端，当其他用户再次访问页面时触发，造成XSS攻击。

3.基于DOM或本地的XSS攻击（DOM-based or local XSS）

同样也是利用对数据源不可靠，缺乏过滤，由于开发过程中，不可避免部分数据需要回填到DOM中，例如href、src、

三、XSS防范手段

1.htmlencode转义特殊字符

大部分的论坛或者博客平台，注册账号都会允许用户填写个人信息，包括昵称、邮箱和个性签名等，此类文本信息属于非富文本类型，最常见的方法就是对尖括号标签转义成实体字符存储，由于是非富文本信息，并且以标签内容的形式展示，如果不使用框架渲染，直接原生js通过docoment.getElementById(‘xxx’).innerText = 'your name’展示回页面

代码如下（示例）：

const htmlEncode = function (handleString){return handleString.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/ /g,"&nbsp;").replace(/\'/g,"&#39;").replace(/\"/g,"&quot;");
}

2.引入XSS库针对用户输入源过滤，设置标签白名单（node.js）

通过限定白名单，仅允许常见的文本展示标签以及图片img标签进入白名单，这部分会再过滤后被保留，并且标签内的class和style属性也会被保留；其他属性和诸如script、iframe等标签都会被直接过滤掉。

代码如下（示例）：

import * as xss from 'xss';
function handleXss(content: Content) {// 设置HTML过滤器的白名单const options = {whiteList: {p: ['class', 'style'],em: ['class', 'style'],strong: ['class', 'style'],br: ['class', 'style'],u: ['class', 'style'],s: ['class', 'style'],blockquote: ['class', 'style'],li: ['class', 'style'],ol: ['class', 'style'],ul: ['class', 'style'],h1: ['class', 'style'],h2: ['class', 'style'],h3: ['class', 'style'],h4: ['class', 'style'],h5: ['class', 'style'],h6: ['class', 'style'],span: ['class', 'style'],div: ['class', 'style'],img: ['src', 'class', 'style', 'width'],},}; // 自定义规则const myxss = new xss.FilterXSS(options);// 直接调用 myxss.process() 即可content.content = myxss.process(content.content);return content;
}

style属性也不容忽视，因此我们需要在option参数中额外为style属性设置白名单，确保style属性安全可控：

   css: {whiteList: {color: true,'background-color': true,},}

3.cookie设置HttpOnly，配合token或验证码防范

针对信息源的过滤，针对不可信数据源的过滤，已经能达到初步的效果，但这远远不够，毕竟没有绝对的安全。
由于大部分攻击者会想要获取到用户的cookie去做别的坏事，所以我们需要在http的响应头set-cookie时设置httpOnly，让浏览器知道不能通过document.cookie的方式获取到cookie内容。

总结

本文主要总结归纳了实践过程中针对XSS漏洞的防护措施，首先针对用户输入源和不可信数据源需要我们做好必要的过滤和校验，其次，通过CSP安全策略和其他HTTP响应头的设置等进一步确保安全性

前端安全之XSS攻击（跨域脚本攻击）相关推荐

什么是跨域脚本攻击?
跨域脚本攻击又叫XSS攻击,属于客户端攻击,攻击者在我们的网页中嵌入恶意脚本,当用户使用浏览器浏览被嵌入恶意脚本的网页时,脚本就会在我们的浏览器中执行.XSS攻击的核心是脚本 XSS可以分为以下三类: ...
ASP.NET Core中的OWASP Top 10 十大风险-跨站点脚本攻击 (XSS)
本博文翻译自: https://dotnetcoretutorials.com/2017/10/25/owasp-top-10-asp-net-core-cross-site-scripting-xs ...
跨网站脚本攻击（XSS）的原理与防范对策
摘要:随着计算机网络技术的迅速发展,网络安全问题已变得越来越受到人们的重视,网络攻击形式多种多样,很多蠕虫病毒.木马病毒等植入到某些网页中,给网络用户带来了很大的安全隐患.其中XSS跨网站脚本攻击,恶 ...
记录如何防止跨站点脚本攻击之抄写
一.简介跨站点脚本(XSS)是当前web应用中最危险和最普遍的漏洞之一.安全研究人员在大部分最受欢迎的网站,包括Google, Facebook, Amazon, PayPal等网站都发现这个漏洞. ...
如何防止跨站点脚本攻击
1. 简介跨站点脚本(XSS)是当前web应用中最危险和最普遍的漏洞之一.安全研究人员在大部分最受欢迎的网站,包括Google, Facebook, Amazon, PayPal等网站都发现这个漏洞 ...
django防止csrf跨域伪造攻击
Csrf跨域伪造攻击:使用当前浏览器还在生效状态的cookie对指定网站进行操作.最初针对的是银行网站的转账. Django本身会对csrf进行校验,在django的1.4版本之前,csrf默认关闭, ...
怎么更好掌握Web前端技术？JS的跨域是怎么回事？
怎么更好掌握Web前端技术?JS的跨域是怎么回事?JavaScript跨域是指通过JS在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过JS获取页面中不同域的框架中(if ...
安全编码实践之二：跨站点脚本攻击防御
安全编码实践之二:跨站点脚本攻击防御声明:本文由Bypass整理并翻译,仅用于安全研究和学习之用. 文章来源:https://medium.com/bugbountywriteup/how-to-w ...
动态加载js文件以支持跨域脚本
将以下脚本放在pageload时执行,var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async ...

前端安全之XSS攻击（跨域脚本攻击）

文章目录

一、XSS是什么？

二、XSS 类型划分

1.反射性XSS （Reflected XSS）

2.存储型XSS （Stored XSS）

3.基于DOM或本地的XSS攻击（DOM-based or local XSS）

三、XSS防范手段

1.htmlencode转义特殊字符

2.引入XSS库针对用户输入源过滤，设置标签白名单（node.js）

3.cookie设置HttpOnly，配合token或验证码防范

总结

前端安全之XSS攻击（跨域脚本攻击）相关推荐

最新文章

热门文章

前端安全之XSS攻击（跨域脚本攻击）

文章目录

一、XSS是什么？

二、XSS 类型划分

1.反射性XSS （Reflected XSS）

2.存储型XSS （Stored XSS）

3.基于DOM或本地的XSS攻击 （DOM-based or local XSS）

三、XSS防范手段

1.htmlencode转义特殊字符

2.引入XSS库针对用户输入源过滤，设置标签白名单 （node.js）

3.cookie设置HttpOnly，配合token或验证码防范

总结

前端安全之XSS攻击（跨域脚本攻击）相关推荐

最新文章

热门文章

3.基于DOM或本地的XSS攻击（DOM-based or local XSS）

2.引入XSS库针对用户输入源过滤，设置标签白名单（node.js）