前端常见安全问题

目录

  • 以下是对一些常见的前端安全问题的总结
  • 一、iframe
      • 1、防止自己的网站不被其他网站的 iframe 引用
      • 2、禁用被使用的 iframe 对当前网站某些操作
  • 二、opener
      • 1、target="_blank"
      • 2、window.open()
  • 三、CSRF / XSRF(跨站请求伪造)
      • 防御措施
  • 四、XSS/CSS(跨站脚本攻击)
      • XSS类型:
      • 防御措施(对用户输入内容和服务端返回内容进行过滤和转译)
  • 五、ClickJacking(点击劫持)
      • 防御措施
      • 测试网站是否设置了X-Frame-Options
  • 六、HSTS(HTTP Strict Transport Security)HTTP严格传输安全)
  • 七、CDN劫持

以下是对一些常见的前端安全问题的总结

一、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 -> 
// 2)  JS  -> window.open('http://www.baidu.com')

/* 
 * 这两种方式看起来没有问题,但是存在漏洞。
 * 通过这两种方式打开的页面可以使用 window.opener 来访问源页面的 window 对象。
 * 场景: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标签跳转urla>


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文件,本地打开。如果打开的页面中显示了待测的网站,则说明没有设置,反之设置了


<html>
<head lang="en">
    <meta charset="UTF-8" >
    <title>测试 X-Frame-Optionstitle>
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 属性存在浏览器兼容问题

你可能感兴趣的:(笔记,前端,安全,javascript)