当前位置:网站首页>Web Security (1) -- browser homology strategy
Web Security (1) -- browser homology strategy
2020-11-07 20:56:00 【Coxhuang】
List of articles
- Web Security ( One ) --- Browser homology strategy
- #1 What is browser homology strategy
- #1.1 What is homology ?
- #1.2 Restriction of homologous strategy
-
- #1.2.1 Can't read or write Cookie、Session Storage、Local Storage、Cache、Indexed DB
- #1.2.2 DOM
- #1.2.3 Asynchronous requests
- #2 Cross domain
- #2.1 Solutions to cross domain problems
- #2.2 Cross-domain resource sharing (CORS)
- # CORS How to carry Cookie
- #2.3 Nginx Reverse proxy
- #1 What is browser homology strategy
Web Security ( One ) — Browser homology strategy
#1 What is browser homology strategy
Browser's homology strategy has always been a common problem in development , It is the core and basic security function of browser , If the same origin policy is missing , The normal function of the browser will be affected
#1.1 What is homology ?
Homology means the same agreement
、 Same as domain name
、 Same port
.
notes :IE No
Port number
Add to the components of the same source strategy
In the browser , <script>
、<img>
、<iframe>
、<link>
All tags can be loaded across domains , And not limited by the browser's same origin policy , These tapes src
Every time the tag of the property is loaded , It's actually launched by the browser once GET request , Different from normal requests (XMLHTTPRequest) Yes. , adopt src Property loaded resources , Browsers limit JavaScript Authority , Make it unreadable src Load the returned content
Browser homology strategy , In addition to the above tags can be loaded across domains , When other cross domain requests occur , The request is sent to a cross domain server , And the server will return data , It's just a browser " Rejection " Returned data
#1.2 Restriction of homologous strategy
The same source strategy of browser aims to protect the information security of users , In order to prevent malicious websites from stealing users' data in the browser , If It's not homologous
The site of , The following operations will not be possible :
- Cookie、LocalStorage and IndexDB Unable to read and write
- DOM and Js Object can't get
- AJAX Request cannot be sent
#1.2.1 Can't read or write Cookie、Session Storage、Local Storage、Cache、Indexed DB
Users log in to a site , After the site back-end server verifies that the account password is correct , Returns the Cookie、Token Or the user name and password to the client browser , The browser will save this personal data to Cookie、Session Storage、Local Storage、Cache、Indexed DB One of them ( How to save it , It's up to the website developer ), If the browser doesn't have the same origin policy , When a user visits a malicious website , Malicious websites can get users' data through scripts , This is extremely unsafe behavior
So if it's not homologous , Can't read and write other site settings Cookie、Session Storage、Local Storage、Cache、Indexed DB
#1.2.2 DOM
From a source js You can only read and write from your own source DOM Trees cannot read from other sources DOM Trees
#1.2.3 Asynchronous requests
Generally speaking, from one source js You can only send requests to your own source interface , Cannot send requests to interfaces from other sources . Of course, the essence is , On the one hand, the browser finds a source of js When sending a request to an interface of another source, it will automatically bring Origin The header identifies the source from , Let the server pass through Origin Judge whether to respond to ; On the other hand , If the browser does not find Access-Control-Allow-Origin The domain that sends the request is allowed to request, and that does not allow parsing
#2 Cross domain
Access between different domains is called cross domain , Because of the limitation of the same origin policy , That leads us to communicate between different sources , There is a problem that the browser cannot accept the data returned by the server , This is also the problem that must be solved in the project of separating the front end from the back end
#2.1 Solutions to cross domain problems
- adopt jsonp Cross domain
- document.domain + iframe Cross domain
- location.hash + iframe
- window.name + iframe Cross domain
- postMessage Cross domain
- Cross-domain resource sharing (CORS)
- Nginx Reverse proxy
- nodejs Middleware agent cross domain
- WebSocket Protocol cross domain
The following is mainly about two common methods I usually use to solve cross domain problems CORS and Nginx Reverse proxy
#2.2 Cross-domain resource sharing (CORS)
Only server settings Access-Control-Allow-Origin that will do , There is no need to set the front end , To bring cookie request : Both front and rear ends need to be set .
- The server needs to set the following response header
Access-Control-Allow-Origin:http://www.admin.minhung.me // General usage (*, Specify domain , Dynamic setting ),* It is not allowed to carry the authentication head and cookies Access-Control-Allow-Credentials: true // Whether to allow subsequent requests to carry authentication information ( Such as :cookies), The value can only be true, Otherwise do not return Access-Control-Max-Age: 1800 // Pre check result cache time , This is the cache mentioned above , Company : second Access-Control-Allow-Methods:GET,POST,PUT,POST // Allow request verb , GET|POST|PUT|DELETE Access-Control-Allow-Headers:x-requested-with,content-type // Allowed request header fields
# CORS How to carry Cookie
If you use CORS Solving cross domain problems , In addition to the back-end server needs to configure the above information , The front end also needs to be configured as follows :
// Indicates whether credentials are required for cross domain requests axios.defaults.withCredentials = true // Vue.js frame
also , Back end server cannot be configured Access-Control-Allow-Origin: *, Remember that , If configured to any , No matter withCredentials Is there any setting ,cookie I can't take it with me
#2.3 Nginx Reverse proxy
adopt nginx Configure a proxy server ( Domain name is different from port number and client ) For detecting , Reverse proxy access api.minhung.me Interface , And it can be modified incidentally cookie in admin.minhung.me Information , Convenient current field cookie write in , Implement cross-domain login .
The front-end project (admin.minhung.me:19700)
The back-end project (api.minhung.me:19800)
In front end projects nginx Add in configuration proxy_pass, Proxy the requested interface to api.minhung.me:19800
# front end nginx To configure server { listen 19700; server_name admin.minhung.me; location / { proxy_pass http://api.minhung.me:19800; # Reverse proxy proxy_cookie_domain api.minhung.me:19800 admin.minhung.me:19700; # modify cookie In the domain name index index.html index.htm; } }
Participation of this paper Tencent cloud media sharing plan , You are welcome to join us , share .
版权声明
本文为[Coxhuang]所创,转载请带上原文链接,感谢
边栏推荐
- laravel8更新之维护模式改进
- 快速上手Git
- Why do we need software engineering -- looking at a simple project
- Animation techniques and details you may not know
- Data transmission of asynchronous serial communication controlled by group bus communication
- Git代码提交操作,以及git push提示failed to push some refs'XXX'
- Adobe Lightroom /Lr 2021软件安装包(附安装教程)
- Three steps, one pit, five steps and one thunder, how to lead the technical team under the rapid growth?
- awk实现类sql的join操作
- The instanceof operator in ecmascript7 specification
猜你喜欢
来自不同行业领域的50多个对象检测数据集
使用 Xunit.DependencyInjection 改造测试项目
构造请求日志分析系统
What do you think of the most controversial programming ideas?
The instanceof operator in ecmascript7 specification
计组-总线通信控制之异步串行通信的数据传输
微信小程序request报400错误 @RequestBody接收不到
Analysis of kubernetes service types: from concept to practice
盘点那些争议最大的编程观点,你是什么看法呢?
The CPU does this without the memory
随机推荐
Animation techniques and details you may not know
栈-括号的匹配
More than 50 object detection datasets from different industries
聊聊Go代码覆盖率技术与最佳实践
graph generation model
laravel8更新之维护模式改进
快速上手Git
微服务的出现和意义的探索
编程界大佬教你:一行Python代码能做出哪些神奇的事情?
使用jsDelivr加速你的网站
【C++学习笔记】C++ 标准库 std::thread 的简单使用,一文搞定还不简单?
【解决方案】分布式定时任务解决方案
Web安全(三)---CSRF攻击
汇编函数mcall systemstack asmcgocall syscall
Big data algorithm - bloon filter
大数据算法——布隆过滤器
ECMAScript7规范中的instanceof操作符
ROS学习---远程启动ROS节点
laravel8更新之维护模式改进
The CPU does this without the memory