页面渲染完成后，点击弹窗如下所示：
2. 使用innerHTML直接输出导致浏览器解析恶意代码
代码如下：
点击一样也会弹窗窗口的。也会一样执行xss攻击的。
- 使用location/location.href/location.replace/iframe.src 造成的XSS
如下代码：
刷新下页面，也会弹出窗口执行 xss攻击了。
=============================================================================
在服务器端设置cookie的时候设置 http-only, 这样就可以防止用户通过JS获取cookie。对cookie的读写或发送一般有如下字段进行设置：
-
http-only: 只允许http或https请求读取cookie、JS代码是无法读取cookie的(document.cookie会显示http-only的cookie项被自动过滤掉)。发送请求时自动发送cookie.
-
secure-only: 只允许https请求读取，发送请求时自动发送cookie。
-
host-only: 只允许主机域名与domain设置完成一致的网站才能访问该cookie。
=====================================================================================
目前该属性被所有的主流浏览器默认开启XSS保护。该参数是设置在响应头中目的是用来防范XSS攻击的。它有如下几种配置：
值有如下几种：默认为1.
-
0：禁用XSS保护。
-
1：启用XSS保护。
1;mode=block; 启用xss保护，并且在检查到XSS攻击是，停止渲染页面。
==============================================================================
我们为什么要防御HTML编码呢？比如如下html代码：<div>content</div>,在div标签中存在一个输出变量{content}. 那么浏览器在解析的过程中，首先是html解析，当解析到div标签时，再解析 content的内容，然后会将页面显示出来。那假如该{content} 的值是 <script>alert('XSS攻击')</script>这样的呢？因此该script脚本就会解析并且执行了，从而达到XSS的攻击目标。
因此我们需要将不可信数据放入到html标签内(比如div、span等)的时候需要进行html编码。
编码规则：将 & < > " ’ / 转义为实体字符。如下基本转义代码：
// 使用正则表达式实现html编码
function htmlEncodeByRegExp(str) {
var s = ‘’;
if (str.length === 0) {
return s;
}
return (s + str)
.replace(/&/g, “&”)
.replace(/</g, “<”)
.replace(/>/g, “>”)
.replace(/ /g, " ")
.replace(/'/g, “'”)
.replace(/“/g, “””)
.replace(///g, ‘/’);
}
// 使用正则表达式实现html解码
function htmlDecodeByRegExp(str) {
var s = ‘’;
if (str.length === 0) {
return s;
}
return (s + str)
.replace(/&/g, “&”)
.replace(/</g, “<”)
.replace(/>/g, “>”)
.replace(/ /g, " ")
.replace(/'/g, “'”)
.replace(/“/g, “””)
.replace(///g, “/”);
}
=========================================================================================
和HTML编码一样，html中的属性也要进行编码，比如 这样的，name是input的属性，因此在html解析时，会对name属性进行编码，因为假如{name} 的值为：" " οnclick=“alert(‘属性XSS’)” " " 这样的，也就是说input变成这样的了，<input name=" " οnclick=“alert(‘属性XSS’)” " ">，input属性name被插入onclick事件了，因此也需要针对这种常规的html属性，都需要对其进行HTML属性编码。
因此我们需要将不可信数据放入html属性时(不含src、href、style 和 事件处理函数(onclick, onmouseover等))。需要进行HTML Attribute 编码。
编码规则：除了字母、数字、字符以外，使用 &#x;16进制格式来转义ASCII值小于256所有的字符。
因此编码代码如下：
function encodeForHTMLAttibute(str) {
let encoded = ‘’;
for(let i = 0; i < str.length; i++) {
let ch = hex = str[i];
if (!/[A-Za-z0-9]/.test(str[i]) && str.charCodeAt(i) < 256) {
hex = ‘&#x’ + ch.charCodeAt(0).toString(16) + ‘;’;
}
encoded += hex;
}
return encoded;
};
=====================================================================================
在上面的 XSS 防御HTML Attribute编码中我们是可以防御XSS攻击，但是它只能防御的是HTML通用属性，并不是全部属性，在html中还存在很多支持协议解析的html属性，比如 onclick, onerror, href, src 等这些，类似这些属性我们是无法通过HTML编码来防范XSS攻击的。因为浏览器会先解析html编码的字符，将其转换为该属性的值，但是该属性本身支持JS代码执行，因此游览器在HTML解码后，对该属性的值进行JS解析，因此会执行响应的代码。
比如如下代码：<a href="javascript:alert('href xss')" target="_blank">href xss</a>是可以点击的。 如果我们对该进行html属性编码一下，还是可以点击的，
如代码：<a href="javascript:alert('href xss HTML编码无效')" target="_blank">href xss HTML属性编码无效 页面还是可以点击的。如下图所示：
=================================================================================
作用范围：将不可信数据作为 URL 参数值时需要对参数进行 URL 编码
编码规则：将参数值进行 encodeURIComponent 编码
编码代码如下：
function encodeForURL(str){
return encodeURIComponent(str);
};
=================================================================================
作用范围：将不可信数据作为 CSS 时进行 CSS 编码
比如：通过css构造（background-img:url\expression\link-href@import）
编码规则：除了字母数字字符以外，使用\XXXXXX格式来转义ASCII值小于256的所有字符。 编码代码如下：
function encodeForCSS (attr, str){
let encoded = ‘’;
for (let i = 0; i < str.length; i++) {
let ch = str.charAt(i);
if (!ch.match(/[a-zA-Z0-9]/) {
let hex = str.charCodeAt(i).toString(16);
let pad = ‘000000’.substr((hex.length));
encoded += ‘\’ + pad + hex;
} else {
encoded += ch;
}
}
return encoded;
};
=====================================================================================
Content-Security-Policy 中文的意思是 网页安全政策，
CSP是网页安全政策(Content Security Policy)的缩写。主要用来防止XSS攻击。是一种由开发者定义的安全性政策申明，通过CSP所约束的责任指定可信的内容来源，通过 Content-Security-Policy 网页的开发者可以控制整个页面中 外部资源 的加载和执行。
比如可以控制哪些 域名下的静态资源可以被页面加载，哪些不能被加载。这样就可以很大程度的防范了 来自 跨站(域名不同) 的脚本攻击。
如何使用呢？
我们只需要在meta属性中设置下即可：如下代码：
比如如下的列子：
<meta http-equiv=“Content-Security-Policy” content="
default-src http: https: *.xxx.com ‘self’ ‘unsafe-inline’ ;
style-src ‘self’ ‘unsafe-inline’ *.yyy.com;
script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval’ ;
">
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**
[外链图片转存中…(img-44KrTy5a-1712237546230)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
4047
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
