有哪些可能引起前端安全的问题？

1、跨站脚本攻击（Cross-Site Scripting ，XSS）

一种代码注入方式，为了与css区分所以称之为XSS。早期常见于网络论坛，起因是网站没有对用户的输入进行严格的限制，使得攻击者可以将脚本上传到帖子让其他人在浏览器到有恶意的脚本页面。

2、iframe滥用

iframe中的内容是由第三方来提供的，默认情况下它们不受我们的限制，它们可以在iframe中运行Javascript脚本、Flash插件、弹出对话框等。

3、跨站请求伪造（Cross-Site Request Forgeries ， CSRF）

指攻击者通过设计好的陷进，强制对于完成认证的用户进行非预期的个人信息或设定信息等某些状态更新，属于被动攻击。

4、恶意第三方库

无论开发服务端还是客户端，绝大多数的时候我们都在借助开发框架和第三方工具进行快速开发，一旦第三方库被植入恶意代码就容易引起安全问题。

详细介绍如下

1、XSS 攻击（跨站脚本攻击）

跨站脚本攻击 英文名称：Cross Site Script ， XSS攻击，通常指黑客通过HTML注入篡改了页面，插入恶意脚本，从而在用户浏览页面时，控制用户浏览器的一种行为。

XSS分类

根据攻击源来源分为：存储型、反射型和DOM型三种。

• 存储区：恶意代码存放位置。
• 插入点：由谁取代恶意代码，并插入到网站。

存蓄型XSS

原理：一般是攻击者输入恶意代码存储在服务端，主要是将XSS代码发送到服务器，只要受害者浏览包含此恶意代码的页面就会执行恶意代码。

1. 攻击者将恶意代码提交到目标服务器中。
2. 用户打开目标网站时，网站服务器取出包含恶意代码的数据，拼接在HTML中返回给浏览器。
3. 用户浏览器解析带有恶意代码的数据。
4. 恶意代码窃取用户数据并发送到攻击者网站；或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

反射型XSS

原理：反射型 XSS，也叫非持久型 XSS，是指发生请求时，XSS 代码出现在请求 URL 中，作为参数提交到服务器中，服务器解析并响应。响应结果中包含 XSS 代码，最后浏览器解析并执行

1. 攻击者构造出特殊的URL，其中包含恶意代码；
2. 用户打开带有恶意代码的URL时，网站服务器将恶意代码从URL中取出，拼接在HTML中返回给浏览器；
3. 用户浏览器接收到响应后解析执行，混在其中的恶意代码被执行；
4. 恶意代码窃取用户数据并发送到攻击者网站；或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

DOM型XSS

原理：和反射型XSS攻击一样。

1. 攻击者构造出特殊的 URL，其中包含恶意代码；
2. 用户打开带有恶意代码的URL；
3. 用户浏览器接收到代码后进行解析，前端js取出URL中的恶意代码并执行；
4. 恶意代码窃取用户数据并发送到攻击者网站；或冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

DOM型XSS 和前两种 XSS 的区别：DOM型取出和执行恶意代码由浏览器完成，属于前端自身的安全漏洞；而其他两种则属于服务端的安全漏洞。

如何阻止发生

预防这两种漏洞，有两种常见的做法：

• 改成纯前端渲染，把代码和数据分隔开；
• 对 HTML 做充分转义。

2、CSRF分类

GET 类型的 CSRF

GET 类型的 CSRF 实现方式非常简单，只需要一个普通的 HTTP 请求，一般会放在图片等资源里面，受害者在打开危险网站后，危险网站的图片加载就发出了一个危险的 GET 请求，这样就完成了一个 GET 类型的 CSRF 攻击。

POST 类型的 CSRF

这种方式通常会使用一个自动提交的表单。当访问该页面时，表单会自动提交，相当于模拟用户完成了一个 POST 操作。
POST 类型的攻击通常会比 GET 类型的更加严格一点，但仍并不复杂，所以后端的接口并不能将安全寄托在仅允许 POST 上面。

链接类型的 CSRF

这种方式并不常见，实现思路和 GET 类型一致，但是需要用户手动点击才能触发，因此攻击者通常会以广告的形式诱导用户中招。

CSRF的两个特点：

• 发生在第三方域名；
• 攻击者不能获取 cookie 信息，只能使用。

针对这两点，我们可以专门指定防护策略：

• 阻止部名外域的访问
  • 同源检测
  • Samesite Cookie
• 提交时要求附加本域才能获取的信息
  • Token
  • 双重 Cookie 验证

Iframe 滥用

严格来说这个不算是安全问题，但是如果是要防范自己网站被人用 iframe 嵌套的话，可以使用这几种方法：

添加响应头

在响应头中加一个 X-Frame-Options

取值有三种，大部分浏览器都支持：

• DENY：拒绝当前页面加载任何 Frame 页面；
• SAMEORIGIN：Frame 页面只能加载在同源网站下；
• ALLOW-FROM origin：origin 为允许 Frame 页面加载的地址。