web面试题精选

# 四.前端安全

# 1.跨域

  • 什么是跨域

    • 同源策略：协议，端口，域名要相同
    • 由于浏览器同源策略，凡是发送请求 url 的协议、域名、端口三者之间任意一种与当前页面地址不同即为跨域

  • 跨域的十种方式

    • 1.降级浏览器
    • 2.jsonp
    • 3.cors
    • 4.node 中间件：proxy-middlewire
    • 5.nginx：配置代理服务将后端请转发给前端
    • 6.websockit:是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是 server push 技术的一种很好的实现。
    • 7.postmessage:h5 跨域方法 frame.contentWindow.postMessage,e.data;e.data,e.source.postMesage
    • 8.localhost.hash:c 页面动态创建 b 页面，请求里面有参数，b 页面 window.parent.parent.location.hash=location.hash,a 通过 location.hash 拿到参数
    • 9.document.name：proxy 一个空的代理页面，被访问的页面动态切换 iframe 页面域名，name 没有消失，frame.contentWindow.name,window.name
    • 10.document.domain:主域名相同，docuemnt.domain 强制设置主域，freame.contentWindow,window.parent

# 2.XSS

什么是 XSS 攻击？如何防范 XSS 攻击？什么是 CSP?

  • XSS 攻击有哪些类型
    • 存储型
    • 反射型
    • DOM 型
  • 如何防御 XSS 攻击
    • 输入检查
    • 设置 httpOnly
    • 开启 CSP

转义字符 首先，对于用户的输入应该是永远不信任的。最普通的做法就是转义输入输出的内容，对于引号、尖括号、斜杠进行转义。

但是对于显示富文本来说，显然不能通过上面的办法来转义所有的字符，因为这样会把需要的格式也过滤掉。对于这种情况，通常采用白名单过滤的办法，当然也可以通过黑名单过滤，但是考虑到需要过滤的标签和标签属性实在太多，更加推荐白名单的方式。

CSP CSP 本质就是建立白名单，开发者明确告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截是由浏览器自己实现的。我们可以通过这种方式来尽量减少 XSS 攻击。

通常可以通过两种方式来开启 CSP:

1.设置 HTTP Header 中的Content-Security-Policy

2.设置meta标签的方式<meta http-equiv="Content-Securiry-Policy">

这里以设置 HTTP Header 来举例

  • 只允许加载本站资源
Content-Security-Policy:default-src 'self'
1
  • 只允许加载 HTTPS 协议图片
Content-Security-Policy:img-src https://*
1
  • 允许加载任何来源框架
Content-Security-Policy:child-src 'none'
1

对于这种方式来说，只要开发者配置了正确的规则，那么即使网站存在漏洞，攻击者也不能执行它的攻击代码，并且 CSP 的兼容性也不错。

# 3.CSRF

什么是 CSRF 攻击?如何防范 CSRF 攻击?

CSRF 中文名为跨站请求伪造。原理即使攻击者构造出一个后端请求地址，诱导用户点击或者通过某些途径自动发起请求。如果用户是在登录状态下的话，后端就以为是用户在操作，从而进行相应的逻辑。

举个例子，假如网站中有一个通过GET请求提交用户评论的接口，那么攻击者就可以在钓鱼网站中加入一个图片，图片的地址就是评论接口。

<img src="http://www.domai.com/xxx?comment='attack'">
1

那么你也是否会想到使用POST方式提交请求是不是就没有这个问题了呢？其实并不是，使用这种方式也不是百分百安全，攻击者同样可以诱导用户进入某个页面，在页面个中通过表单提交POST请求。 如何防御

防范 CSRF 攻击可以遵循以下几种规则：

1、Get 请求不对数据进行修改

2、不让第三方网站访问到用户 Cookie

3、阻止第三方网站请求接口

4、请求时附带验证信息，比如验码或者 Token

SameSite

可以对 Cookie 设置SameSite属性。该属性表示 Cookie 不随着跨域请求发送，可以很大程度减少 CSRF 的攻击，但是该属性目前并不是所有浏览器都兼容。

验证 Referer

对于需要防范 CSRF 的请求，我们可以通过验证 Referer 来判断该请求是否为第三方网站发起的

Token

服务器下发一个随机 Token,每次发起请求时将 Token 携带上，服务器验证 Token 是否有效。

# 4.点击劫持

什么是点击劫持？如何防范点击劫持？

点击劫持是一种视觉欺骗的攻击手段。攻击者将需要攻击的网站通过iframe嵌套的方式嵌入自己的网页中，并将iframe设置为透明，在页面中透出一个按钮诱导用户点击。

对于这种攻击方式，推荐防御的方法有两种。 X-FRAME-OPTIONS

X-FRAME-OPTIONS是一个 HTTP 响应头，在现代浏览器有一个很好的支持。这个 HTTP 响应头就是为了防御用iframe嵌套的点击劫持攻击。

该响应头有三个值可选，分别是

  • DENY,表示页面不允许通过iframe的方式展示
  • SAMEOPIGIN,表示页面可以在相同域名下通过iframe的方式展示
  • ALLOW-FROM,表示页面可以在指定来源的iframe中展示

# 5.中间人攻击

什么是中间人攻击？如何防范中间人攻击？

中间人攻击是攻击方同时与服务端和客户端建立起了连接，并让对方认为连接是安全的，但是实际上整个通信过程都被攻击者控制了。攻击者不仅能获得双方的通信信息，还能修改通信信息。

通常来说不建议使用公共 Wi-Fi,因为很可能就会发生中间人攻击的情况。如果你在通信的过程中涉及到了某些敏感信息，就完全暴露给攻击方了。

当然防御中间人攻击其实并不难，只需要增加一个安全通道来传输信息。HTTPS 就可以用来防御中间人攻击，但是并不是说使用了 HTTPS 就可以高枕无忧了，因为如果你没有完全关闭 HTTP 访问的话，攻击方可以通过某些方式将 HTTPS 降级为 HTTP 从而实现中间人攻击。

# 6.前端安全问题

# 1.XSS：将代码注入网页中

  • 持久型：攻击代码写入数据库
  • 非持久型：一般通过修改 URL 参数的方式攻击，诱导用户点击链接

# 防范：

  • 转义字符

  • 使用白名单（CSP）

    • 设置 HTTP Header 中的Content-Security-Policy
    • 设置meta标签的方式<meta http-equiv="Content-Security-Policy">

    CSRF：是跨站请求伪造，很明显根据刚刚的解释，他的核心也就是请求伪造，通过伪造身份提交 POST 和 GET 请求来进行跨域的攻击。

# 2.CSRF:跨站请求伪造

攻击者构造一个后端请求地址，诱导用户点击或者通过某些途径自动发起请求，如果用过是在登录状态下的话，后端就一位是用户在操作

# 防范

  • Get 请求不对数据进行修改

  • 不让第三方网站访问到用户 Cookie

  • 阻止第三方网站请求接口

  • 请求时附带验证信息，比如验证码或者 Token

  • 可以对 Cookie 设置 Samesite:Cookie 不随着跨域请求发送

  • referer

    完成 CSRF 需要两个步骤：

    1.登陆受信任的网站 A，在本地生成 COOKIE

    2.在不登出 A 的情况下，或者本地 COOKIE 没有过期的情况下，访问危险网站 B。

xss 跨站脚本攻击，主要是前端层面的，用户在输入层面插入攻击脚本，改变页面的显示，或则窃取网站 cookie，预防方法：不相信用户的所有操作，对用户输入进行一个转义，不允许 js 对 cookie 的读写

csrf 跨站请求伪造，以你的名义，发送恶意请求，通过 cookie 加参数等形式过滤

# 7.常见的 web 安全及防护原理

# 1.sql 注入原理：

通过 sql 命令插入到 web 表单提交或者输入活命，达到欺骗服务器执行的恶意 sql 命令

# 2.xss（跨站脚本攻击）：

往 web 页面插入恶意的 html 标签或者 js 代码

# 3.csrf(跨站请求伪造)：

通过伪装来自受信任用户的请求

# xss 和 csrf 的区别：

  • 1.xss 是获取信息，不需要提前知道其他用户页面的代码和数据包
  • 2.csrf 代替用户完成指定的动作，需要知道其他页面的代码和数据包
上次更新: 2022/6/29 上午12:09:44

← 五.性能优化 →