前端常见安全问题

最新推荐文章于 2024-02-22 20:04:30 发布

牛小小小婷～

最新推荐文章于 2024-02-22 20:04:30 发布

阅读量380

点赞数 1

文章标签：前端安全 javascript

本文链接：https://blog.csdn.net/hannah2233/article/details/125689488

版权

iframe
opener
CSRF(跨站请求伪造)
XSS（跨站脚本攻击）
CND劫持

文章目录

一、 iframe

1、如何让自己的网站不被其他网站的iframe引用?

// 检测当前网站是否被第三方iframe引用
// 若相等则证明没有被引用
if(top.location != self.location) {
	top.location.href = 'http://www.baidu.com'
}

2、如何禁用“被使用的iframe对当前网站”某些操作

sandbox是h5的新属性，主要提高iframe安全系数
现在有一场景：我的网站需要 iframe 引用某网站，但是不想被该网站操作DOM、不想加载某些js（广告、弹框等）、当前窗口被强行跳转链接，可以设置sandbox属性

二、 opener

2-1 问题

在项目中需要打开新标签进行跳转方式

// 1) HTML -> <a target='_blank' href='http://www.baidu.com'>
// 2)  JS  -> window.open('http://www.baidu.com')

1、看起来没有问题，但是存在漏洞

通过这两种方式打开的页面可以使用window.opener来访问同源页面的window对象

2、场景：A 页面通过<a>或 window.open 方式，打开 B 页面。但是 B 页面存在恶意代码如下：

window.opener.location.replace('https://www.baidu.com') 【此代码仅针对打开新标签有效】
此时，用户正在浏览新标签页，但是原来网站的标签页已经被导航到了百度页面。
恶意网站可以伪造一个足以欺骗用户的页面，使得进行恶意破坏。
即使在跨域状态下 opener 仍可以调用 location.replace 方法。

2-2 解决

1、 <a>

<a target = "_black" href="" rel="noopener noreferrer nofollow">a标签跳转url</a>
<!-- 
  通过 rel 属性进行控制：
  noopener：会将 window.opener 置空，从而源标签页不会进行跳转（存在浏览器兼容问题）
  noreferrer：兼容老浏览器/火狐。禁用HTTP头部Referer属性（后端方式）。
  nofollow：SEO权重优化，详情见 https://blog.csdn.net/qq_33981438/article/details/80909881
 -->

2、 b.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攻击：攻击者调用你的身份，以你的名义进行恶意请求。能做的事情：

以你的名义发送邮件、发信息、盗用账号、购买商品、虚拟货币转账等
个人隐私及财产安全问题

1、 CSRF攻击思想：

浏览并登录信任网站
登陆成功在浏览器产生cookie存储
此时访问危险网站,网站存在恶意代码，代码发送一个恶意请求
携带在浏览器产生的额信息进行恶意请求
网站请求为合法请求（无法区分是否为该用户发送）

2、防御措施（添加token/HTTP头自定义属性）：

涉及到数据修改造作严格使用post请求而不是get请求
HTTP协议中使用Referer属性来确定请求来源进行过滤（禁止外域）
请求地址添加token，使黑客无法伪造用户请求
HTTP头自定义属性验证
显示验证方式：添加验证码、密码等

四、XSS/CSS(跨站脚本攻击Cross Site Script)

攻击者在目标网站植入恶意脚本（js/html），用户在浏览器上运行时可以获取用户敏感信息（cookie/session）、修改web页面来欺骗用户

1、浏览器遇到html中的script标签时，会解析并执行其中的js代码
2、 XSS类型：

持久型XSS：将脚本植入到服务器上，从而导致每个访问的用户都会执行
非持久型XSS：对个体用户某url的参数进行攻击

3、防御措施（对用户输入内容和服务端返回内容进行过滤和转译）：

现代大部分浏览器自带XSS筛选器，vue/react等成熟框架也对XSS进行防护
对用户输入内容和服务器返回内容进行过滤和转译
重要内容加密传输
合理使用get/post等请求方式
对于URL携带参数谨慎使用

五、 CDN劫持

出于性能考虑，前端应用通常会把一些静态资源存放到CDN（Content Delivery Networks）上面，例如 js 脚本和 style 文件。

这么做可以显著提高前端应用的访问速度
却也隐含了一个新的安全风险。如果攻击者劫持了CDN，或者对CDN中的资源进行了污染，攻击者可以肆意篡改我们的前端页面，对用户实施攻击。