安全篇-介绍xss以及如何应用 | Wukong's Blog

安全篇-介绍xss以及如何应用

Peipei Wong 12月 11, 2020

xss的类型

反射型
例如：从url中读取再渲染，在项目中，读取出来的值会当作string去渲染，不会使用innerHTML
存储型
例如：知识点的答案，富文本中输入script标签，这个会在node过滤掉，但是对于，这个前端在渲染的时候会使用xssFilter过滤掉，即使不过滤，在增加csp的情况下，也执行不了。

import { filterXSS } from 'xss'

export function xssFilter(html: string) {
  return filterXSS(html)
}

DOM型
例如：一般在搜索列表的时候，返回的数据会在原来的string的基础上，加上em标签，这个时候你不得不使用innerHTML来使em标签起作用，假如title是<img src=1 onerror='xxx'>，这个就中枪了

策略

[high]重要对外的项目一定增加csp策略，例如吾来、mage、官网
[high]第三方组件/资源

禁止引入非可信来源的第三方js，应检查页面内引入的第三方js资源是否可控

[high]禁止使用eval
[high]开启xss保护模式：”X-XSS-Protection”: “1; mode=block”

X-XSS-Protection：浏览器监测到xss的攻击会立即阻止页面的加载。浏览器支持性不太好
```
app.use(helmet.xssFilter());
```

[middle]定期检查依赖关系

使用npm/yarn audit得到易受攻击的列表，升级他们来避免安全问题，github中有专门的bot来检测repo的依赖，有风险的会自动提pr

[middle]减少没有必要的dangerouslySetInnerHTML使用
[middle]设置Referrer-Policy: 用来控制在request中可以包换多少refer信息
设置方式：

在header中设置：”Referrer-Policy”: “no-referrer”

app.use(
helmet.referrerPolicy({
  policy: ["origin", "unsafe-url"],
})
);

或者a标签增加rel = noopener or noreferrer
meta中设置

[low]使用script标签引入资源时，增加integrity来验证资源没有被篡改过

<script src= "https://example.com/example-framework.js" integrity= "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/ux..." crossorigin= "anonymous" ></script>

[low]增加Strict-Transport-Security、X-Frame-Options、X-Content-Type-Options相关头部设置

Strict-Transport-Security: 允许网站告诉浏览器应该使用https访问，而不是http
X-Frame-Options： HTTP响应标头可用于指示是否应允许浏览器在，，<embed>或<object>中呈现页面</object>
X-Content-Type-Options: 相当于提示标志，被服务器用来提示客户端一定要遵循在content-type中对MIME类型的设定

[low]Feature-Policy: 限制浏览器特性和api的访问(该功能还在实验状态)

"Feature-Policy": "accelerometer 'none'; ambient-light-sensor 'none'; autoplay 'none'; camera 'none'; encrypted-media 'none'; fullscreen 'self'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; midi 'none'; payment 'none';  picture-in-picture 'none'; speaker 'none'; sync-xhr 'none'; usb 'none'; vr 'none';"

// 可以在这个网站securityheaders得到网站的分数

参考链接：