目录
以下是对一些常见的前端安全问题的总结
一、iframe
1、防止自己的网站不被其他网站的 iframe 引用
// 检测当前网站是否被第三方iframe引用
// 若相等证明没有被第三方引用,若不等证明被第三方引用。当发现被引用时强制跳转百度。
if(top.location != self.location){
top.location.href = 'http://www.baidu.com'
}
2、禁用被使用的 iframe 对当前网站某些操作
在HTML5中,iframe有了一个叫做sandbox的安全属性,通过它可以对iframe的行为进行各种限制,充分实现“最小权限“原则。使用sandbox的最简单的方式就是只在iframe元素中添加上这个关键词就好,就像下面这样:
<iframe sandbox="value" src="..."> ... </iframe>
如果只是添加上这个属性而保持属性值为空,那么浏览器将会对iframe实施史上最严厉的调控限制,基本上来讲就是除了允许显示静态资源以外,其他什么都做不了。比如不准提交表单、不准弹窗、不准执行脚本等等,连Origin都会被强制重新分配一个唯一的值,换句话讲就是iframe中的页面访问它自己的服务器都会被算作跨域请求。
sandbox也提供了丰富的配置参数:
value | 描述 |
---|---|
空 | 启用所有限制条件 |
allow-same-origin | 允许被视为同源,即可操作父级DOM或cookie等 |
allow-top-navigation | 允许当前iframe的引用网页通过url跳转链接或加载 |
allow-forms | 允许表单提交 |
allow-scripts | 允许执行脚本文件 |
allow-popups | 允许浏览器打开新窗口进行跳转 |
二、opener
// 1) HTML -> <a target='_blank' href='http://www.baidu.com'>
// 2) JS -> window.open('http://www.baidu.com')
/*
* 这两种方式看起来没有问题,但是存在漏洞。
* 通过这两种方式打开的页面可以使用 window.opener 来访问源页面的 window 对象。
* 场景:A 页面通过 <a> 或 window.open 方式,打开 B 页面。但是 B 页面存在恶意代码如下:
* window.opener.location.replace('https://www.baidu.com') 【此代码仅针对打开新标签有效】
* 此时,用户正在浏览新标签页,但是原来网站的标签页已经被导航到了百度页面。
* 恶意网站可以伪造一个足以欺骗用户的页面,使得进行恶意破坏。
* 即使在跨域状态下 opener 仍可以调用 location.replace 方法。
*/
1、target="_blank"
<a target="_blank" href="" rel="noopener noreferrer nofollow">a标签跳转url</a>
<!--
通过 rel 属性进行控制:
noopener:会将 window.opener 置空,从而源标签页不会进行跳转(存在浏览器兼容问题)
noreferrer:兼容老浏览器/火狐。禁用HTTP头部Referer属性(后端方式)。
nofollow:SEO权重优化
-->
2、window.open()
<button onclick='openurl("http://www.baidu.com")'>click跳转</button>
function openurl(url) {
var newTab = window.open();
newTab.opener = null;
newTab.location = url;
}
三、CSRF / XSRF(跨站请求伪造)
可以这么理解 CSRF 攻击:攻击者盗用了你的身份,以你的名义进行恶意请求。它能做的事情有很多包括:以你的名义发送邮件、发信息、盗取账号、购买商品、虚拟货币转账等。
总结起来就是:个人隐私暴露及财产安全问题。
/*
* 阐述 CSRF 主要攻击思想:(核心2和3)
* 1、浏览并登录信任网站(举例:淘宝)
* 2、登录成功后在浏览器产生信息存储(举例:cookie)
* 3、用户在没有登出淘宝的情况下,访问危险网站
* 4、危险网站中存在恶意代码,代码为发送一个恶意请求(举例:购买商品/余额转账)
* 5、携带刚刚在浏览器产生的信息进行恶意请求
* 6、淘宝验证请求为合法请求(区分不出是否是该用户发送)
* 7、达到了恶意目标
*/
防御措施
- 涉及到数据修改操作严格使用 POST 请求而不是 GET 请求
- HTTP 协议中使用 Referer 属性来确定请求来源进行过滤(禁止外域)
- 请求地址添加 token ,使黑客无法伪造用户请求
- HTTP 头自定义属性验证(类似上一条)
- 显示验证方式:添加验证码、密码等
四、XSS/CSS(跨站脚本攻击)
XSS 又叫 CSS(Cross Site Script),跨站脚本攻击:攻击者在目标网站植入恶意脚本(js / html),用户在浏览器上运行时可以获取用户敏感信息(cookie / session)、修改web页面以欺骗用户、与其他漏洞相结合形成蠕虫等。
针对这种情况,我们对特殊字符进行转译就好了(vue/react等主流框架已经避免类似问题,vue举例:不能在template中写script标签,无法在js中通过ref或append等方式动态改变或添加script标签)
XSS类型:
- 持久型XSS:将脚本植入到服务器上,从而导致每个访问的用户都会执行
- 非持久型XSS:对个体用户某url的参数进行攻击
防御措施(对用户输入内容和服务端返回内容进行过滤和转译)
- 现代大部分浏览器都自带 XSS 筛选器,vue / react 等成熟框架也对 XSS 进行一些防护
- 对用户输入内容和服务端返回内容进行过滤和转译
- 重要内容加密传输
- 合理使用get/post等请求方式
- 对于URL携带参数谨慎使用
五、ClickJacking(点击劫持)
ClickJacking 翻译过来被称为点击劫持,是一种视觉上的欺骗手段。攻击者使用一个透明的iframe,覆盖在一个网页上,然后诱使用户在网页上进行操作,此时用户将在不知情的情况下点击透明的iframe页面。通过调整iframe页面的位置,可以诱使用户恰好点击在iframe页面的一些功能性按钮上。
防御措施
- HTTP响应头信息中的X-Frame-Options,可以指示浏览器是否应该加载一个iframe中的页面。如果服务器响应头信息中没有X-Frame-Options,则该网站存在ClickJacking攻击风险。网站可以通过设置X-Frame-Options阻止站点内的页面被其他页面嵌入从而防止点击劫持。
value | 描述 |
---|---|
DENY | 不能被嵌入到任何iframe或者frame中。 |
SAMEORIGIN | 页面只能被本站页面嵌入到iframe或者frame中 |
ALLOW-FROM URL | 只能被嵌入到指定域名的框架中 |
- 判断当前网页是否被 iframe 嵌套(详情见一)
测试网站是否设置了X-Frame-Options
将如下的代码中iframe中的链接换成待测网站的,保存为.html文件,本地打开。如果打开的页面中显示了待测的网站,则说明没有设置,反之设置了
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" >
<title>测试 X-Frame-Options</title>
</head>
<body>
<iframe src="http://www.xxx.com/" width="500" height="500" frameborder="10"> </iframe>
</body>
</html>
六、HSTS(HTTP Strict Transport Security)HTTP严格传输安全)
网站接受从 HTTP 请求跳转到 HTTPS 请求的做法,例如我们输入“http://www.baidu.com”或“www.baidu.com”最终都会被302重定向到“https://www.baidu.com”。这就存在安全风险,当我们第一次通过 HTTP 或域名进行访问时,302重定向有可能会被劫持,篡改成一个恶意或钓鱼网站。
HSTS:通知浏览器此网站禁止使用 HTTP 方式加载,浏览器应该自动把所有尝试使用 HTTP 的请求自动替换为 HTTPS 进行请求。用户首次访问时并不受 HSTS 保护,因为第一次还未形成链接。我们可以通过 浏览器预置HSTS域名列表 或 将HSTS信息加入到域名系统记录中,来解决第一次访问的问题。
七、CDN劫持
出于性能考虑,前端应用通常会把一些静态资源存放到CDN(Content Delivery Networks)上面,例如 js 脚本和 style 文件。这么做可以显著提高前端应用的访问速度,但与此同时却也隐含了一个新的安全风险。如果攻击者劫持了CDN,或者对CDN中的资源进行了污染,攻击者可以肆意篡改我们的前端页面,对用户实施攻击。
现在的CDN以支持SRI为荣,script 和 link 标签有了新的属性 integrity,这个属性是为了防止校验资源完整性来判断是否被篡改。它通过 验证获取文件的哈希值是否和你提供的哈希值一样 来判断资源是否被篡改。
使用 SRI 需要两个条件:一是要保证 资源同域 或开启跨域,二是在script标签中 提供签名 以供校验。
integrity 属性分为两个部分,第一部分是指定哈希值的生成算法(例:sha384),第二部分是经过编码的实际哈希值,两者之前用一个短横(-)来分隔
integrity 属性存在浏览器兼容问题