Front end Knowledge

记录一些前端知识

Mixed Content

• 混合内容是指 https 页面下有非 https 资源时，浏览器的加载策略。

• 在 Chrome 80 中，如果你的页面开启了 https，同时你在页面中请求了 http 的音频和视频资源，这些资源将将自动升级为 https ，并且默认情况下，如果它们无法通过https 加载，Chrome 将阻止它们。这样就会造成一些未支持 https 协议的资源加载失败。

• 最合理的方案：

1. 全站统一https-但是有些时候内容是用户产生的，或者第三方数据；
2. 同域-nginx 强制跳转https NGINX配置：server{listen xx.xx.xx.xx; server_name xx.com; rewrite ^(.*)$ https://$host$1 permanent;}；

• 跨域的方案：

1. 资源有http和https协议，但是url是http的， 兼容低版本浏览器； <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
2. JS拦截簒改base host， 然后Nginx转发/后端代理；

MIME sniffing 嗅探

• 引入MIME sniffing功能的初衷是用来弥补Web服务器响应一个图像请求时有可能返回错误的内容类型Content-Type信息这一缺陷;

• 嗅探攻击解决方案：

1. 给返回内容加上对应的 contentType；
2. 添加响应头X-Content-Type-Options: nosniff，让浏览器不要尝试去嗅探；

• 嗅探乱码原因：只对HTML内容解析有效，对于css内容中(外部样式表下)的双字节字符（如中文）解析并没有作用，如果浏览器请求回来的css资源的HTTP响应头里的Content-Type未指明"charset=utf-8"的话，浏览器根据自身的嗅探机制来决定采用哪一种编码解析，结果就会概率出现双字节字符乱码的情况；
• 解决方法：

1. css资源请求的响应头的Content-Type增加"charset=utf-8"声明；
2. 使用 @charset
3. 使用 css-unicode-loader

Cookie/Set-Cookie

• 登录的原理：

• 问题：通过http方式访问一个https网站时，登录有时会失效（无法登陆、跳转），Cookies中的token没有写成功

• 原因：http和https返回的tokenName相同，由于一个是insecure一个是secure的，两者不能互相覆盖，导致cookie中的sso-token写入失败，所以也就无法登陆了。

• 查看接口，发现：Response Headers中的Set-Cookie是拿到了返回值的，但是后面有个黄色三角感叹号，提示：This Set-Cookie was blocked because it was not sent over a secure connection and would have overwritten a cookie with the Secure attribute.

• 解决方案

1. 使用https，Set-Cookie中会有Secure字段；
2. 在chrome中打开链接： chrome://flags/#site-isolation-trial-opt-out，搜索samesite上述三个选项禁用(设为disable)后重启chrome，问题解决；
3. 删掉https下的token
4. 无痕模式（有时也不行，是因为无痕模式打开时也写入了cookie）

• 几种常见的策略

1. Same Origin Policy
2. Content Security Policy (CSP)
3. Referrer-Policy