DOM第二天

PS抠图

• 选区（栅格化图层） --> Crtl+C–> Ctrl+N（透明背景） --> Ctrl+V --> 储存为web所有格式(png)
• 合并图层(Ctrl+E) 取消选中Ctrl+D

XSS攻击
XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，
请记住两条原则：过滤输入和转义输出。

前端注意
.innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 .textContent、.setAttribute() 等。
解决跨域时候的jsonp方法也存在XSS隐患,去请求别的域，得到别的域返回的数据，万一是个脚本，就注入到自己的代码里了
如果用 Vue/React 技术栈，并且不使用 v-html/dangerouslySetInnerHTML 功能，就在前端 render 阶段避免 innerHTML、outerHTML 的 XSS 隐患。

防止cookie信息被盗
cookie中可以设置HttpOnly属性，那么通过js脚本将无法读取到cookie信息，这样能有效的防止XSS攻击，窃取cookie内容，这样就增加了cookie的安全性，即便是这样，也不要将重要信息存入cookie。

response.addHeader("Set-Cookie", "uid=112; Path=/; HttpOnly")

xss与csrf区别：
通常来说 CSRF 是由 XSS 实现的，CSRF 时常也被称为 XSRF（CSRF 实现的方式还可以是直接通过命令行发起请求等）。
本质上讲，XSS 是代码注入问题，CSRF 是 HTTP 问题。XSS 是内容没有过滤导致浏览器将攻击者的输入当代码执行。CSRF 则是因为浏览器在发送 HTTP 请求时候自动带上 cookie，而一般网站的 session 都存在 cookie里面。

DOM中HTML的改变

一、DOM中HTML改变输出流
document.write()

// 入口函数   
// 当文档加载完成后 执行
 window.onload = function () {
     document.write("改变输出流");//会覆盖文档
 }

1、字符串
2、解析标签
3、换行
4、docunment.write()换行:与
连用
document.write(“
”);

document.writeln(“改变输出流1”);

document.writeln(“改变输出流2”);

document.writeln(“改变输出流3”);

document.writeln(“改变输出流4”);

document.write(“
”);

二、DOM中HTML改变输出内容

1、innerHTML 属性 获取/设置元素的内容

获取元素的内容 包含标签，可以解析标签

2、innerText 属性 获取/设置元素的文本内容，不能解析标签

3、outerHTML 属性 获取/设置元素的内容 包含自身

4、outerText 属性 获取/设置元素的文本内容

三、DOM中HTML改变输出属性

1、 src 属性 路径属性 获取/设置文件的路径

console.log(oImage.getAttribute(“src”));

console.log(oImage.src);

aBtns[0].οnclick=function(){

oImage.src=“./128.png”

}

2、className 属性 获取/设置元素的类名

console.log(oHeader.getAttribute(“class”));

console.log(oHeader.className);

aBtns[1].οnclick=function(){

oHeader.className=“shuishen xiaomihu”

}

3、style 属性 获取/设置元素的样式

console.log(oHeader.style);//返回样式对象

console.log(oPara.style.color);

aBtns[2].οnclick=function(){

// oHeader.style=“color:pink”

// oHeader.style.color=“pink”

// oHeader.style=“background-color:pink”

oHeader.style.backgroundColor=“pink”;//驼峰

}