前端网络安全

什么是同源策略

同源指的是:协议、端口号、域名必须一致。他是浏览器的一个用于隔离潜在恶意文件的重要安全机制。

限制了从同一个源加载的文档或脚本,与另一个源的资源进行交互。

同源策略主要限制了三个方面:

  1. 当前域下的js脚本不能够访问其他域下的cookie、localStorage和indexDB。

  1. 当前域下的js脚本不能够访问操作其他域下的DOM。

  1. 当前域下的Ajax无法发送跨域请求。

为什么要有同源策略,他的目的是什么

同源策略的目的主要是为了保证用户的信息安全,它只是对js脚本的一种限制,并不是对浏览器的限制,对于一般的img、或者script脚本的请求都不会有跨域的限制,这是因为这些操作都不会通过响应结果来进行可能出现的安全问题的操作。

解决跨域问题的方案

  1. CORS

  1. JSONP

3.nginx代理跨域

4.nodejs中间件代理跨域

5.WebSocket协议跨域

XSS攻击

什么是XSS攻击

XSS攻击是指跨站脚本攻击,是一种代码注入攻击。攻击者通过网站注入恶意脚本,使之在用户的浏览器上运行,从而窃取用户信息如cookie等。

XSS的本质是因为网站没有对恶意代码进行过滤,与正常的代码混合在一起了,浏览器没有办法分辨哪些脚本是可信的,从而导致了恶意代码的执行。

攻击者可以通过这种攻击方式可以进行以下操作:

  1. 获取页面的数据,如DOM、cookie、 localStorage;

  1. DOS攻击,发送合理请求,占用服务器资源,从而使用户无法访问服务器;

  1. 流量劫持(将链接指向某网站) ;

体验XSS攻击

文件结构如下:

前端网络安全_第1张图片

index.js

使用node配置一个服务

const express = require('express')
const path = require('path')
const app = express()

app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

app.get('/', function(req, res, next) {
  res.render('index', { title: 'Express', xss: req.query.xss })
})

app.listen(3000,() => {
   console.log('服务已在3000端口启动');
})

index.html文件内容




    
    
    
    Document


    <%-xss%>

这样配置完成之后,我们通过URL的localhost:3000后追加的方式,模拟向服务器请求数据后,服务器将数据返回并渲染到页面上的操作。

如这样

那么当这串代码执行后,就会发生这样的事

前端网络安全_第2张图片

由于我这里只是写了一个弹窗,因此并没有造成什么危害,但是一旦

你可能感兴趣的:(浏览器基础,前端,web安全,javascript)