2021-06-24 box-sizing/vue路由/跨域

A. CSS中

box-sizing:border-box;

1. box-sizing默认是content-box，content-box就是元素的width和height决定了元素的宽高，这意味着元素的border和padding等不能算在元素的width和height中 ，padding和border的改变不能改变width和height的值
2. box-sizing的另一个值border-box就是用元素内容和padding和border一起决定width和height，啥意思，就是width和元素的内容以及padding和border相互制约。

B. vue 路由

三种模式：

　　Hash:      使用URL的hash值来作为路由。支持所有浏览器。

　　History:   以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式

　　Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。

C.通过Nginx设置HttpOnly Secure SameSite参数解决Cookie跨域丢失

一、Cookie安全相关属性

    HttpOnly ：

        在Cookie中设置了“HttpOnly”属性，通过程序(JS脚本、Applet等)将无法读取到Cookie信息。

        将HttpOnly 设置为true 防止程序获取cookie后进行攻击。

    Secure ：

        安全性，指定Cookie是否只能通过https协议访问，一般的Cookie使用HTTP协议既可访问。

        设置了Secure （没有值），则只有当使用https协议连接时cookie才可以被页面访问。可用于防止信息在传递的过程中被监听捕获后信息泄漏。

    SameSite：

        Chrome浏览器在51版本后为 Cookie 新增的属性，用来防止 CSRF 攻击和用户追踪。可以设置三个值：Strict、 Lax、 None

        Strict：完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。换言之，只有当前网页的 URL 与请求目标一致，才会带上 Cookie。Set-Cookie: CookieName=CookieValue; SameSite=Strict;

        Lax：规则稍稍放宽，大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。Set-Cookie: CookieName=CookieValue; SameSite=Lax；设置了Strict或Lax以后，基本就杜绝了 CSRF 攻击。当然，前提是用户浏览器支持 SameSite 属性。

        None：Chrome 计划将Lax变为默认设置。这时，网站可以选择显式关闭SameSite属性，将其设为None。不过，前提是必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效。Set-Cookie: key=value; SameSite=None; Secure

    二、配置路径

    要通过nginx配置SameSite，可以在 nginx.conf 的 location 节点下进行配置：

proxy_cookie_path / "/; httponly; secure; SameSite=Lax";

解决跨域的方式

1. jsonp
   1) 原生实现：

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://192.168.1.1:8080/api/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 </script>

 2) jquery ajax：

$.ajax({
    url:'http://192.168.1.1:8080/api/Login?method=login',
    dataType:"jsonp",
    data:{username:'zhangsan',password:'0'},
                jsonpCallback:"success_jsonp", 
    success:function(data){
        $("#user").val(data);
    }

3.）vue.js：

this.$http.jsonp('http://192.168.1.1:8080/api/Login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

2. cors 需要浏览器和后端同时支持

3. websocket 

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。

使用Socket.io

参考: https://segmentfault.com/a/1190000011145364

<div>user input：<input type="text"></div>
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');

// 连接成功处理
socket.on('connect', function() {
    // 监听服务端消息
    socket.on('message', function(msg) {
        console.log('data from server: ---> ' + msg); 
    });

    // 监听服务端关闭
    socket.on('disconnect', function() { 
        console.log('Server socket has closed.'); 
    });
});

document.getElementsByTagName('input')[0].onblur = function() {
    socket.send(this.value);
};
</script>

 Nodejs socket后台：

var http = require('http');
var socket = require('socket.io');

// 启http服务
var server = http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-type': 'text/html'
    });
    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

// 监听socket连接
socket.listen(server).on('connection', function(client) {
    // 接收信息
    client.on('message', function(msg) {
        client.send('hello：' + msg);
        console.log('data from client: ---> ' + msg);
    });

    // 断开处理
    client.on('disconnect', function() {
        console.log('Client socket has closed.'); 
    });
});

4. nginx反向代理

5. window.name + iframe

前端调用接口之跨域问题

修改请求头，设置如下：

'headers': {'Access-Control-Allow-Origin': '*',
            "access-control-allow-credentials": "true"}

发送请求时, ajax加上参数 withCredentials: false

---

记录一下