【前端面试之浏览器原理】什么是同源策略、什么是XSS、CSRF攻击

阿卡内

已于 2022-08-25 17:05:24 修改

阅读量881

点赞数

分类专栏：前端面试总结文章标签：前端面试 xss

于 2022-07-29 20:51:38 首次发布

本文链接：https://blog.csdn.net/qq_40695234/article/details/126059919

版权

前端面试总结专栏收录该内容

15 篇文章 2 订阅

订阅专栏

1、同源策略

例如：http://www.baidu.com

url=协议（http\https\ftp）+子机名（www）+主域名（baidu.com）+端口号(443) //有一个不一样就叫做跨域
浏览器默认两个相同的源之间是可以互相访问资源和操作DOM。不同源之间不能互相访问资源操作DOM。
同源策略的目的：
在浏览器中的cookie等其他数据可以任意读取，不同域下的DOM任意操作，ajax任意请求其他网站的数据，如果浏览了恶意网站那么就会泄漏这些隐私数据。同源策略就是为了保证用户信息的安全的。

注意：错误是发生在浏览器端的，请求可以正常的从浏览器发送到服务器端。服务器也可以处理请求，
只不过在返回浏览器端时出错了。

同源策略限制了三个方面：

当前域下的js脚本不能够访问到其他域下的cookie、localStorage。
当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。
当前域下 ajax 无法发送跨域请求。

如何实现页面的跨域请求？

1、 JSONP跨域
jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。
缺点：只支持get请求，不支持post请求。
script、img、link、iframe都不存在跨域请求的限制，并且它们的src请求都是资源文件请求（即get请求）

下面是他的一个原生实现方式：
服务端：
在这里插入图片描述
前端页面：

结果：

Jquery中ajax的核心是通过 XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加

(只有在主域相同的时候才能使用该方法)
实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

(1)父页面

<iframe id="iframe" src="http://child.demo.com/b.html"></iframe>
<script>
    document.domain = 'demo.com';
    var user = 'admin';
</script>

子窗口：

<script>
    document.domain = 'demo.com';
    // 获取父窗口中变量
    alert('get js data from parent ---> ' + window.parent.user);
</script>

3、跨域资源共享（CORS）

CORS是一个W3C标准，全称是跨域资源共享。它允许浏览器向跨源服务器发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。
只服务端设置Access-Control-Allow-Origin即可，表示这个源是允许跨域的。前端无须设置，若要带cookie请求：前后端都需要设置。

发送请求的时候会出现两种情况，分别是简单请求和复杂请求。

简单请求，满足以下两大条件：
- GET、HEAD、POST
- Content-Type的值仅限于下列三者之一：
  - text/plain
  - multipart/form-data
  - application/x-www-form-urlencoded
复杂请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求,该请求是 option 方法的，通过该请求来知道服务端是否允许跨域请求。

服务端（node）：

const http = require('http')
const server = http.createServer()
server.on('request', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*')
    res.end(`hello`)
})
server.listen(8080, () => {
    console.log('8080端口监听中...')
})

客户端：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>
      const promise = axios.get('http://127.0.0.1:8080')
      promise.then((msg) => {
          console.log(msg.data)
      }).catch((err) => {
          console.log(err)
      })

  </script>

除此之外还有Access-Control-Allow-Credentials表示请求中是否包含cookie信息，以及Access-Control-Expose-Headers，它表示XMLHttpRequest对象的getResponseHeader()方法可以拿到的额外字段（默认只能拿到六个字段）
CoRS与Jsonp的区别：
JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器。

4、 proxy代理跨域
利用vue-cli脚手架，启动一个webpack开发服务器，做代理转发。前端和这个服务器是同源的都是8080，因此前端的跨域问题便不存在了。

在项目根目录中创建vue.config.js文件
添加devServer配置项，配置里面的proxy

 devServer: {
    proxy: {
      "/api": {
        target: "http://gmall-h5-api.atguigu.cn",
        changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求
        ws: true,
        // pathRewrite: { "^/api": "" },
      }
    }
  }

在这里插入图片描述
5、 nodejs中间件代理跨域
实现原理类似于Node中间件代理，需要你搭建一个中转nginx服务器，用于转发请求。
使用nginx反向代理实现跨域，是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题，支持所有浏览器，支持session，不需要修改任何代码，并且不会影响服务器性能。
实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。