主頁 > 企業開發 > 九種跨域方式實作原理（完整版）

九種跨域方式實作原理（完整版）

2021-01-28 07:08:00 企業開發

目錄
  • 前言
  • 一、什么是跨域？
    • 1.什么是同源策略及其限制內容？
    • 2.常見跨域場景
  • 二、跨域解決方案
    • 1.jsonp
      • 1) JSONP原理
      • 2) JSONP和AJAX對比
      • 3) JSONP優缺點
      • 4) JSONP的實作流程
      • 5) jQuery的jsonp形式
    • 2.cors
      • 1) 簡單請求
      • 2) 復雜請求
    • 3.postMessage
    • 4.websocket
    • 5. Node中間件代理(兩次跨域)
    • 6.nginx反向代理
    • 7.window.name + iframe
    • 8.location.hash + iframe
    • 9.document.domain + iframe
  • 三、總結

前言

前后端資料互動經常會碰到請求跨域，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內容，

一、什么是跨域？

1.什么是同源策略及其限制內容？

同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSRF等攻擊，所謂同源是指"協議+域名+埠"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源，

同源策略限制內容有：

  • Cookie、LocalStorage、IndexedDB 等存盤性內容
  • DOM 節點
  • AJAX 請求發送后，結果被瀏覽器攔截了

但是有三個標簽是允許跨域加載資源：

  • <img src=https://www.cnblogs.com/xzsj/p/XXX>
  • <link href=https://www.cnblogs.com/xzsj/p/XXX>
  • <script src=https://www.cnblogs.com/xzsj/p/XXX>

2.常見跨域場景

當協議、子域名、主域名、埠號中任意一個不相同時，都算作不同域，不同域之間相互請求資源，就算作“跨域”，常見跨域場景如下圖所示：

特別說明兩點：

第一：如果是協議和埠造成的跨域問題“前臺”是無能為力的，

第二：在跨域問題上，僅僅是通過“URL的首部”來識別而不會根據域名對應的IP地址是否相同來判斷，“URL的首部”可以理解為“協議, 域名和埠必須匹配”，

這里你或許有個疑問：請求跨域了，那么請求到底發出去沒有？

跨域并不是請求發不出去，請求能發出去，服務端能收到請求并正常回傳結果，只是結果被瀏覽器攔截了，你可能會疑問明明通過表單的方式可以發起跨域請求，為什么 Ajax 就不會?因為歸根結底，跨域是為了阻止用戶讀取到另一個域名下的內容，Ajax 可以獲取回應，瀏覽器認為這不安全，所以攔截了回應，但是表單并不會獲取新的內容，所以可以發起跨域請求，同時也說明了跨域并不能完全阻止 CSRF，因為請求畢竟是發出去了，

二、跨域解決方案

1.jsonp

1) JSONP原理

利用 <script> 標簽沒有跨域限制的漏洞，網頁可以得到從其他來源動態產生的 JSON 資料，JSONP請求一定需要對方的服務器做支持才可以，

2) JSONP和AJAX對比

JSONP和AJAX相同，都是客戶端向服務器端發送請求，從服務器端獲取資料的方式，但AJAX屬于同源策略，JSONP屬于非同源策略（跨域請求）

3) JSONP優缺點

JSONP優點是簡單兼容性好，可用于解決主流瀏覽器的跨域資料訪問的問題，缺點是僅支持get方法具有局限性,不安全可能會遭受XSS攻擊，

4) JSONP的實作流程

  • 宣告一個回呼函式，其函式名(如show)當做引數值，要傳遞給跨域請求資料的服務器，函式形參為要獲取目標資料(服務器回傳的data)，
  • 創建一個<script>標簽，把那個跨域的API資料介面地址，賦值給script的src,還要在這個地址中向服務器傳遞該函式名（可以通過問號傳參:?callback=show），
  • 服務器接收到請求后，需要進行特殊的處理：把傳遞進來的函式名和它需要給你的資料拼接成一個字串,例如：傳遞進去的函式名是show，它準備好的資料是show('我不愛你')，
  • 最后服務器把準備的資料通過HTTP協議回傳給客戶端，客戶端再呼叫執行之前宣告的回呼函式（show），對回傳的資料進行操作，

在開發中可能會遇到多個 JSONP 請求的回呼函式名是相同的，這時候就需要自己封裝一個 JSONP函式，

// index.html
function jsonp({ url, params, callback }) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script')
    window[callback] = function(data) {
      resolve(data)
      document.body.removeChild(script)
    }
    params = { ...params, callback } // wd=b&callback=show
    let arrs = []
    for (let key in params) {
      arrs.push(`${key}=${params[key]}`)
    }
    script.src = https://www.cnblogs.com/xzsj/p/`${url}?${arrs.join('&')}`
    document.body.appendChild(script)
  })
}
jsonp({
  url: 'http://localhost:3000/say',
  params: { wd: 'Iloveyou' },
  callback: 'show'
}).then(data =https://www.cnblogs.com/xzsj/p/> {
  console.log(data)
})

上面這段代碼相當于向http://localhost:3000/say?wd=Iloveyou&callback=show這個地址請求資料，然后后臺回傳show('我不愛你')，最后會運行show()這個函式，列印出'我不愛你'

// server.js
let express = require('express')
let app = express()
app.get('/say', function(req, res) {
  let { wd, callback } = req.query
  console.log(wd) // Iloveyou
  console.log(callback) // show
  res.end(`${callback}('我不愛你')`)
})
app.listen(3000)

5) jQuery的jsonp形式

JSONP都是GET和異步請求的，不存在其他的請求方式和同步請求，且jQuery默認就會給JSONP的請求清除快取，

$.ajax({
url:"http://crossdomain.com/jsonServerResponse",
dataType:"jsonp",
type:"get",//可以省略
jsonpCallback:"show",//->自定義傳遞給服務器的函式名，而不是使用jQuery自動生成的，可省略
jsonp:"callback",//->把傳遞函式名的那個形參callback，可省略
success:function (data){
console.log(data);}
});

2.cors

CORS 需要瀏覽器和后端同時支持，IE 8 和 9 需要通過 XDomainRequest 來實作，

瀏覽器會自動進行 CORS 通信，實作 CORS 通信的關鍵是后端，只要后端實作了 CORS，就實作了跨域，

服務端設定 Access-Control-Allow-Origin 就可以開啟 CORS， 該屬性表示哪些域名可以訪問資源，如果設定通配符則表示所有網站都可以訪問資源，

雖然設定 CORS 和前端沒什么關系，但是通過這種方式解決跨域問題的話，會在發送請求時出現兩種情況，分別為簡單請求和復雜請求，

1) 簡單請求

只要同時滿足以下兩大條件，就屬于簡單請求

條件1：使用下列方法之一：

  • GET
  • HEAD
  • POST

條件2：Content-Type 的值僅限于下列三者之一：

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

請求中的任意 XMLHttpRequestUpload 物件均沒有注冊任何事件監聽器； XMLHttpRequestUpload 物件可以使用 XMLHttpRequest.upload 屬性訪問，

2) 復雜請求

不符合以上條件的請求就肯定是復雜請求了，
復雜請求的CORS請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢"請求,該請求是 option 方法的，通過該請求來知道服務端是否允許跨域請求，

我們用PUT向后臺請求時，屬于復雜請求，后臺需做如下配置：

// 允許哪個方法訪問我
res.setHeader('Access-Control-Allow-Methods', 'PUT')
// 預檢的存活時間
res.setHeader('Access-Control-Max-Age', 6)
// OPTIONS請求不做任何處理
if (req.method === 'OPTIONS') {
  res.end() 
}
// 定義后臺回傳的內容
app.put('/getData', function(req, res) {
  console.log(req.headers)
  res.end('我不愛你')
})

接下來我們看下一個完整復雜請求的例子，并且介紹下CORS請求相關的欄位

// index.html
let xhr = new XMLHttpRequest()
document.cookie = 'name=xiamen' // cookie不能跨域
xhr.withCredentials = true // 前端設定是否帶cookie
xhr.open('PUT', 'http://localhost:4000/getData', true)
xhr.setRequestHeader('name', 'xiamen')
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      console.log(xhr.response)
      //得到回應頭，后臺需設定Access-Control-Expose-Headers
      console.log(xhr.getResponseHeader('name'))
    }
  }
}
xhr.send()

//server1.js
let express = require('express');
let app = express();
app.use(express.static(__dirname));
app.listen(3000);

//server2.js
let express = require('express')
let app = express()
let whitList = ['http://localhost:3000'] //設定白名單
app.use(function(req, res, next) {
  let origin = req.headers.origin
  if (whitList.includes(origin)) {
    // 設定哪個源可以訪問我
    res.setHeader('Access-Control-Allow-Origin', origin)
    // 允許攜帶哪個頭訪問我
    res.setHeader('Access-Control-Allow-Headers', 'name')
    // 允許哪個方法訪問我
    res.setHeader('Access-Control-Allow-Methods', 'PUT')
    // 允許攜帶cookie
    res.setHeader('Access-Control-Allow-Credentials', true)
    // 預檢的存活時間
    res.setHeader('Access-Control-Max-Age', 6)
    // 允許回傳的頭
    res.setHeader('Access-Control-Expose-Headers', 'name')
    if (req.method === 'OPTIONS') {
      res.end() // OPTIONS請求不做任何處理
    }
  }
  next()
})
app.put('/getData', function(req, res) {
  console.log(req.headers)
  res.setHeader('name', 'jw') //回傳一個回應頭，后臺需設定
  res.end('我不愛你')
})
app.get('/getData', function(req, res) {
  console.log(req.headers)
  res.end('我不愛你')
})
app.use(express.static(__dirname))
app.listen(4000)

上述代碼由http://localhost:3000/index.html向http://localhost:4000/跨域請求，正如我們上面所說的，后端是實作 CORS 通信的關鍵，

3.postMessage

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是為數不多可以跨域操作的window屬性之一，它可用于解決以下方面的問題：

  • 頁面和其打開的新視窗的資料傳遞
  • 多視窗之間訊息傳遞
  • 頁面與嵌套的iframe訊息傳遞
  • 上面三個場景的跨域資料傳遞

postMessage()方法允許來自不同源的腳本采用異步方式進行有限的通信，可以實作跨文本檔、多視窗、跨域訊息傳遞，

otherWindow.postMessage(message, targetOrigin, [transfer]);

  • message: 將要發送到其他 window的資料，
  • targetOrigin:通過視窗的origin屬性來指定哪些視窗能接收到訊息事件，其值可以是字串"*"（表示無限制）或者一個URI，在發送訊息的時候，如果目標視窗的協議、主機地址或埠這三者的任意一項不匹配targetOrigin提供的值，那么訊息就不會被發送；只有三者完全匹配，訊息才會被發送，
  • transfer(可選)：是一串和message 同時傳遞的 Transferable 物件. 這些物件的所有權將被轉移給訊息的接收方，而發送一方將不再保有所有權，

接下來我們看個例子： http://localhost:3000/a.html頁面向http://localhost:4000/b.html傳遞“我愛你”,然后后者傳回"我不愛你"，

// a.html
  <iframe src="http://localhost:4000/b.html" frameborder="0" id="frame" onl oad="load()"></iframe> //等它加載完觸發一個事件
  //內嵌在http://localhost:3000/a.html
    <script>
      function load() {
        let frame = document.getElementById('frame')
        frame.contentWindow.postMessage('我愛你', 'http://localhost:4000') //發送資料
        window.onmessage = function(e) { //接受回傳資料
          console.log(e.data) //我不愛你
        }
      }
    </script>

// b.html
  window.onmessage = function(e) {
    console.log(e.data) //我愛你
    e.source.postMessage('我不愛你', e.origin)
 }

4.websocket

Websocket是HTML5的一個持久化的協議，它實作了瀏覽器與服務器的全雙工通信，同時也是跨域的一種解決方案，WebSocket和HTTP都是應用層協議，都基于 TCP 協議，但是 WebSocket 是一種雙向通信協議，在建立連接之后，WebSocket 的 server 與 client 都能主動向對方發送或接收資料，同時，WebSocket 在建立連接時需要借助 HTTP 協議，連接建立好了之后 client 與 server 之間的雙向通信就與 HTTP 無關了，

原生WebSocket API使用起來不太方便，我們使用Socket.io，它很好地封裝了webSocket介面，提供了更簡單、靈活的介面，也對不支持webSocket的瀏覽器提供了向下兼容，

我們先來看個例子：本地檔案socket.html向localhost:3000發生資料和接受資料

// socket.html
<script>
    let socket = new WebSocket('ws://localhost:3000');
    socket.onopen = function () {
      socket.send('我愛你');//向服務器發送資料
    }
    socket.onmessage = function (e) {
      console.log(e.data);//接收服務器回傳的資料
    }
</script>

// server.js
let express = require('express');
let app = express();
let WebSocket = require('ws');//記得安裝ws
let wss = new WebSocket.Server({port:3000});
wss.on('connection',function(ws) {
  ws.on('message', function (data) {
    console.log(data);
    ws.send('我不愛你')
  });
})

5. Node中間件代理(兩次跨域)

實作原理：同源策略是瀏覽器需要遵循的標準，而如果是服務器向服務器請求就無需遵循同源策略，
代理服務器，需要做以下幾個步驟：

  • 接受客戶端請求 ，
  • 將請求 轉發給服務器，
  • 拿到服務器 回應 資料，
  • 將 回應 轉發給客戶端，

我們先來看個例子：本地檔案index.html檔案，通過代理服務器http://localhost:3000向目標服務器http://localhost:4000請求資料，

// index.html(http://127.0.0.1:5500)
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
      $.ajax({
        url: 'http://localhost:3000',
        type: 'post',
        data: { name: 'xiamen', password: '123456' },
        contentType: 'application/json;charset=utf-8',
        success: function(result) {
          console.log(result) // {"title":"fontend","password":"123456"}
        },
        error: function(msg) {
          console.log(msg)
        }
      })
     </script>

// server1.js 代理服務器(http://localhost:3000)
const http = require('http')
// 第一步：接受客戶端請求
const server = http.createServer((request, response) => {
  // 代理服務器，直接和瀏覽器直接互動，需要設定CORS 的首部欄位
  response.writeHead(200, {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Allow-Headers': 'Content-Type'
  })
  // 第二步：將請求轉發給服務器
  const proxyRequest = http
    .request(
      {
        host: '127.0.0.1',
        port: 4000,
        url: '/',
        method: request.method,
        headers: request.headers
      },
      serverResponse => {
        // 第三步：收到服務器的回應
        var body = ''
        serverResponse.on('data', chunk => {
          body += chunk
        })
        serverResponse.on('end', () => {
          console.log('The data is ' + body)
          // 第四步：將回應結果轉發給瀏覽器
          response.end(body)
        })
      }
    )
    .end()
})
server.listen(3000, () => {
  console.log('The proxyServer is running at http://localhost:3000')
})

// server2.js(http://localhost:4000)
const http = require('http')
const data = https://www.cnblogs.com/xzsj/p/{ title:'fontend', password: '123456' }
const server = http.createServer((request, response) => {
  if (request.url === '/') {
    response.end(JSON.stringify(data))
  }
})
server.listen(4000, () => {
  console.log('The server is running at http://localhost:4000')
})

上述代碼經過兩次跨域，值得注意的是瀏覽器向代理服務器發送請求，也遵循同源策略，最后在index.html檔案列印出{"title":"fontend","password":"123456"}

6.nginx反向代理

實作原理類似于Node中間件代理，需要你搭建一個中轉nginx服務器，用于轉發請求，

使用nginx反向代理實作跨域，是最簡單的跨域方式，只需要修改nginx的配置即可解決跨域問題，支持所有瀏覽器，支持session，不需要修改任何代碼，并且不會影響服務器性能，

實作思路：通過nginx配置一個代理服務器（域名與domain1相同，埠不同）做跳板機，反向代理訪問domain2介面，并且可以順便修改cookie中domain資訊，方便當前域cookie寫入，實作跨域登錄，

先下載nginx，然后將nginx目錄下的nginx.conf修改如下:

// proxy服務器
server {
    listen       80;
    server_name  www.domain1.com;
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 當用webpack-dev-server等中間件代理介面訪問nignx時，此時無瀏覽器參與，故沒有同源限制，下面的跨域配置可不啟用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #當前端只跨域不帶cookie時，可為*
        add_header Access-Control-Allow-Credentials true;
    }
}

最后通過命令列nginx -s reload啟動nginx

// index.html
var xhr = new XMLHttpRequest();
// 前端開關：瀏覽器是否讀寫cookie
xhr.withCredentials = true;
// 訪問nginx中的代理服務器
xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
xhr.send();

// server.js
var http = require('http');
var server = http.createServer();
var qs = require('querystring');
server.on('request', function(req, res) {
    var params = qs.parse(req.url.substring(2));
    // 向前臺寫cookie
    res.writeHead(200, {
        'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:腳本無法讀取
    });
    res.write(JSON.stringify(params));
    res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');

7.window.name + iframe

window.name屬性的獨特之處：name值在不同的頁面（甚至不同域名）加載后依舊存在，并且可以支持非常長的 name 值（2MB），

其中a.html和b.html是同域的，都是http://localhost:3000;而c.html是http://localhost:4000

 // a.html(http://localhost:3000/b.html)
  <iframe src="http://localhost:4000/c.html" frameborder="0" onl oad="load()" id="iframe"></iframe>
  <script>
    let first = true
    // onl oad事件會觸發2次，第1次加載跨域頁，并留存資料于window.name
    function load() {
      if(first){
      // 第1次onload(跨域頁)成功后，切換到同域代理頁面
        let iframe = document.getElementById('iframe');
        iframe.src = 'http://localhost:3000/b.html';
        first = false;
      }else{
      // 第2次onload(同域b.html頁)成功后，讀取同域window.name中資料
        console.log(iframe.contentWindow.name);
      }
    }
  </script>

b.html為中間代理頁，與a.html同域，內容為空，

 // c.html(http://localhost:4000/c.html)
  <script>
    window.name = '我不愛你'  
  </script>

總結：通過iframe的src屬性由外域轉向本地域，跨域資料即由iframe的window.name從外域傳遞到本地域，這個就巧妙地繞過了瀏覽器的跨域訪問限制，但同時它又是安全操作，

8.location.hash + iframe

實作原理： a.html欲與c.html跨域相互通信，通過中間頁b.html來實作， 三個頁面，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通信，

具體實作步驟：一開始a.html給c.html傳一個hash值，然后c.html收到hash值后，再把hash值傳遞給b.html，最后b.html將結果放到a.html的hash值中，
同樣的，a.html和b.html是同域的，都是http://localhost:3000;而c.html是http://localhost:4000

 // a.html
  <iframe src="http://localhost:4000/c.html#iloveyou"></iframe>
  <script>
    window.onhashchange = function () { //檢測hash的變化
      console.log(location.hash);
    }
  </script>

 // b.html
  <script>
    window.parent.parent.location.hash = location.hash 
    //b.html將結果放到a.html的hash值中，b.html可通過parent.parent訪問a.html頁面
  </script>

 // c.html
 console.log(location.hash);
  let iframe = document.createElement('iframe');
  iframe.src = 'http://localhost:3000/b.html#idontloveyou';
  document.body.appendChild(iframe);

9.document.domain + iframe

該方式只能用于二級域名相同的情況下，比如 a.test.com 和 b.test.com 適用于該方式，
只需要給頁面添加 document.domain ='test.com' 表示二級域名都相同就可以實作跨域，

實作原理：兩個頁面都通過js強制設定document.domain為基礎主域，就實作了同域，

我們看個例子：頁面a.zf1.cn:3000/a.html獲取頁面b.zf1.cn:3000/b.html中a的值

// a.html
<body>
 helloa
  <iframe src="http://b.zf1.cn:3000/b.html" frameborder="0" onl oad="load()" id="frame"></iframe>
  <script>
    document.domain = 'zf1.cn'
    function load() {
      console.log(frame.contentWindow.a);
    }
  </script>
</body>

// b.html
<body>
   hellob
   <script>
     document.domain = 'zf1.cn'
     var a = 100;
   </script>
</body>

三、總結

  • CORS支持所有型別的HTTP請求，是跨域HTTP請求的根本解決方案
  • JSONP只支持GET請求，JSONP的優勢在于支持老式瀏覽器，以及可以向不支持CORS的網站請求資料，
  • 不管是Node中間件代理還是nginx反向代理，主要是通過同源策略對服務器不加限制，
  • 日常作業中，用得比較多的跨域方案是cors和nginx反向代理

作者：浪里行舟
鏈接：九種跨域方式實作原理（完整版）
來源：github
著作權歸作者所有，商業轉載請聯系作者獲得授權，非商業轉載請注明出處，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/253453.html

標籤：JavaScript

上一篇：CSS奇思妙想 -- 使用 CSS 創造藝術

下一篇：九種跨域方式實作原理（完整版）

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入，國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求，通過反向代理或者負載均衡將請求轉發到后端，后端Transfer-Encoding優先級較高，以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差，然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成：導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議，高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計，高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz，更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置，該裝置以M國全球定位系統（GLOBAL POSITIONING SYSTEM,縮寫為GPS）或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小，只要企業想省錢，那么企業的某些服務就一定會采用外包的形式，然而看似美好又經濟的策略，其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的，最常見的就是話務/客服這種需要大量重復性、無技術性的服務，或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊，通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里，當然也會發生在其它地發，如登錄框等等也會存在注入，只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參，引數為exp 經過三層過濾執行 第一層過濾偽協議，第二層過濾帶引數的函式，第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式，相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了！

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過？就是它的諸多怪異的設定讓你每每用的時候，都可能不小心踩坑。造成程式意外出錯，卻一下子找不到問題出處，那叫一個煩透了…… 下面，我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果，首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下： 實作代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中，有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子： 1、可選鏈運算子（optional chaining operator） ?.是可選鏈運算子（optional chaining operator）。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位，它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思，中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px，即默認情況下： 1rem = 16px rem布局原理：根據CSS媒體查詢功能，更改根標簽的字體尺寸，實作rem單位隨螢屏尺寸的變化，如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標：計算屬性是如何實作的？計算屬性快取原理以及洋蔥模型的應用？在初始化Vue實體時，我們會給每個計算屬性都創建一個對應watcher，我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more

Copyright © 2010-2020 有解無憂