跨域資源請求 JSONP CORS

来源:https://www.cnblogs.com/badboyh2o/archive/2019/04/13/10700710.html
-Advertisement-
Play Games

1.什麼是跨域資源請求？ https://www.cnblogs.com/niuli1987/p/10252214.html 如果兩個頁面的協議，埠（如果有指定）和功能變數名稱都相同，則兩個頁面具有相同的源。 1.1 同源策略 瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資 ...


1.什麼是跨域資源請求？

https://www.cnblogs.com/niuli1987/p/10252214.html

同源： 如果兩個頁面的協議，埠（如果有指定）和功能變數名稱都相同，則兩個頁面具有相同的源。

 

1.1 同源策略 :  瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源。用於隔離潛在惡意文件的重要安全機制。

　　同源策略限制了從同一個源載入的文檔或腳本如何與來自另一個源的資源進行交互。

　　使用js腳本讀寫非同源的資源會被拒絕的（跨域資源的引入是可以的，使用js讀寫則受限制），因此 XMLHttpRequest 受同源策略限制。

 

1.2 不受同源策略限制的（跨域資源的引入是允許的）

　　1.2.1 頁面中的鏈接，重定向以及表單提交是不會受到同源策略限制的。

　　　　　　如嵌入到頁面中的<script src="..."></script>，<img>，<link>，<iframe>等。

 

 ps:  跨域限制都是對瀏覽器端來說的，伺服器端是不存在跨域安全限制。

 

 

2.如何解決 跨域資源請求 限制

　　　　　https://www.cnblogs.com/niuli1987/p/10252214.html

 

2.1 JSONP （不推薦）

例子：跨域資源位於  http://localhost:8066/file/jsonp

## springboot 工程

    @RequestMapping(value="/jsonp", method=RequestMethod.GET )
    public String jsonp(@RequestParam("callback") String callback,  HttpServletRequest request) { 
        
        // 處理正確的jsonp請求， 返回： callback方法名(json字元串)
        if(callback != null && !callback.equals("")) {
            return callback + "(" + "{\"key\": \"hello\"}" + ")";
        }
        
        //不是jsonp請求
        return "hello";
    }

 

 

2.1.1  使用ajax出現 跨域請求限制

###   XMLHttpRequest發起了請求，但是響應中獲取不到值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax 跨域請求（不能成功）</title>
</head>
<body>
    <div id="mydiv">
        <button id="btn">點擊</button>
    </div>
</body>
<script type="text/javascript">
    window.onload = function() {

    var oBtn = document.getElementById('btn');

    oBtn.onclick = function() {

        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                    // 處理響應
                    alert( xhr.responseText );
            }
        };
        // 跨域請求
        xhr.open('get', 'http://localhost:8066/file/jsonp?callback', true);
        xhr.send(); 
    };
};
</script>
</html>

 

 

 

2.1.2 使用JSONP 避免跨域請求限制

原理：利用 <script src="..."></script> 中src 引入跨域資源（不受同源策略限制），瀏覽器收到響應後，通知回調函數處理該跨域資源。

缺點：只能通過是get請求引入跨域資源。

### 在頁面插入帶有src 屬性的 <script>標簽，src 地址即跨域資源地址；

### 服務端對於 JSONP請求的 響應格式是： callback函數名(JSON字元串) 。 （非標準協議）

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP實現跨域（只支持get請求）</title>
</head>
<body>
    <div id="mydiv">
        <button id="btn">點擊</button>
    </div>
</body>

<script type="text/javascript">
    // 回調函數，處理響應
    function handleResponse(response){
            console.log(response);
            alert(JSON.stringify(response));    //將json對象轉為  字元串

    }
</script>

<script type="text/javascript">
    window.onload = function() {
    var oBtn = document.getElementById('btn');

    oBtn.onclick = function() {     
        // 創建一個script標簽
        var script = document.createElement("script");
              
        //設置script標簽的src
        script.src = "http://localhost:8066/file/jsonp?callback=handleResponse";        
        
        //在頁面插入一個script標簽,將會發起src請求
        document.body.insertBefore(script, document.body.firstChild);   
    };
};
</script>

</html>

 

#####

 

 

 

 

 

 

 

2.2 CORS （推薦）

 

CORS是一個W3C標準，全稱是"跨域資源共用"（Cross-origin resource sharing）。它允許瀏覽器向跨源伺服器，發出XMLHttpRequest請求，從而剋服了AJAX只能同源使用的限制。

CORS需要瀏覽器和伺服器同時支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低於IE10。

 整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對於開發者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。

因此，實現CORS通信的關鍵是伺服器。只要伺服器實現了CORS介面，就可以跨源通信。

 

ps:  Cookie 依然遵循“同源策略”，只有用目標伺服器功能變數名稱設置的 Cookie 才會上傳，而且使用 document.cookie 也無法讀取目標伺服器功能變數名稱下的 Cookie。

 

### 例如 : https://api.github.com/  支持跨域請求

響應頭中含有   Access-Control-Allow-Origin ；      它的值要麼是請求時Origin欄位的值，要麼是一個*，表示接受任意功能變數名稱的請求。

 

 

 

2.2.1 springboot 後臺服務 配置 支持  CORS

##  配置 WebMvcConfigurerAdapter

##  增減配置後，則可提支持 站外Ajax請求訪問的跨域資源

 

2.2.1.1 配置後臺服務

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;


@Configuration
public class CORSConfiguration extends  WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedMethods("*")
                .allowedOrigins("*")
                .allowedHeaders("*");
    }
}

 

addMapping：配置可以被跨域的路徑，可以任意配置，可以具體到直接請求路徑。

allowedMethods：允許所有的請求方法訪問該跨域資源伺服器，如：POST、GET、PUT、DELETE等。
allowedOrigins：允許所有的請求功能變數名稱訪問我們的跨域資源，可以固定單條或者多條內容，如："http://www.baidu.com"，只有百度可以訪問我們的跨域資源。
allowedHeaders：允許所有的請求header訪問，可以自定義設置任意請求頭信息，如："X-YAUTH-TOKEN"  
2.2.1.2 可以直接使用 XMLHttpRequest 訪問跨域資源   
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax 跨域請求</title>
</head>
<body>
    <div id="mydiv">
        <button id="btn">點擊</button>
    </div>
</body>
<script type="text/javascript">
    window.onload = function() {

    var oBtn = document.getElementById('btn');

    oBtn.onclick = function() {

        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                    // 處理響應
                    alert( xhr.responseText );
            }
        };
        // 跨域請求
        xhr.open('get', 'http://localhost:8066/file/jsonp?callback', true);
        xhr.send(); 
    };
};
</script>
</html>

 

      2.3 利用nginx 反向代理解決跨域問題   　　https://www.cnblogs.com/bninp/p/5694277.html

location /apis {
　　rewrite ^.+apis/?(.*)$ /$1 break;
　　include uwsgi_params;
　　proxy_pass http://localhost:1894;
}

   

3. 跨域請求偽造 CSRF 防禦

  https://www.cnblogs.com/lailailai/p/4528092.html  

　　CORS - Cross Origin Resourse-Sharing - 跨站資源共用

　　CSRF - Cross-Site Request Forgery - 跨站請求偽造

 

 3.1 如何防止 CSRF 攻擊

https://www.bilibili.com/video/av33502871/?spm_id_from=333.788.videocard.0

 CSRF 攻擊：

　　當用戶不小心在本機訪問 fuck.com 黑客頁面的時候，黑客頁面上放了一個按鈕或者一個表單（URL/action 為 http://you.com/delete-myself，當前用戶登錄過的網站），當用戶觸發這個按鈕或表單的，瀏覽器發出 GET 或 POST 請求的時候，會帶上 you.com 的 cookie；如果you.com網站沒有做 CSRF 防禦措施，那麼這次請求在 you.com 看來會是完全合法的，但是實際上是黑客偽造的請求。

 

CSRF 防禦：

　　CSRF攻擊之所以能夠成功，是因為攻擊者可以偽造用戶的請求。（該請求中所有的用戶驗證信息都存在於Cookie中，攻擊者可以在不知道這些驗證信息的情況下直接利用用戶自己的Cookie來通過安全驗證。）

　　CSRF 主流防禦方式是，用戶每次發起請求之前，先從後端獲取隨機 token（後端同時將此 token 保存到緩存如redis中）；

　　用戶發起請求時攜帶該token，如果後端檢查到沒有 token或者提交的token和後端緩存的不一致，則請求失敗；當token校驗通過後，此toiken在緩存中被刪除以防止token被冒用。

 

 *** 如何確保獲取token的請求不是偽造的？？

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 初學node.js-npm使用（2）
    1.安裝Node封裝模塊 安裝Node封裝模塊很重要，因為開發項目中會用到各種各樣的功能，這時就需要去下載開源的模塊 使用npm install <module_name> module_name為模塊名稱，命令下Node模板到你的開發環境中，並將其放置在node_modules文件夾中， 例如下載 ...
  • jquery獲取url的方式
    (function ($) { $.getUrlParam = function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).mat ...
  • 初學node.js-nodejs安裝運行（1）
    1.Node.js中文官網http://nodejs.cn/download/下載node.js 學習node.js需要有javascript基礎,沒有基礎的可以在http://www.w3school.com.cn/js/index.asp上學習 下載好後，直接安裝。 2.開發工具 我使用的是ec ...
  • angular2-7中的變化監測
    最近做公司新項目用的angular7，中碰到了一個很頭疼的問題在綁定對象中的數據改變時，頁面視圖沒有跟新，需點擊頁面中的時間元素後才會更新。以前使用angularJs也經常碰到類似情況，這種時候一般的方式使使用臟檢查（Dirty checking）讓angularJs檢查綁定到視圖上的數據來實現對頁 ...
  • 對HTML5標簽的認識(四)
    這篇隨筆講講HTML5中的表單和表單的一些元素 一、表單的作用是什麼？ 概念：表單在網頁中主要是負責對數據信息的採取，表單一共分成三個部分： 1、表單的標簽：這裡麵包含了處理表單的數據所用CGI程式以及數據提交到伺服器的方法。 2、表單域元素：包含著文本框，和密碼框，多行文本框，覆選框，單選框，下拉 ...
  • h5實現實時時鐘
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale= ...
  • 從零開始搭建一個規範的vue-cli 3.0項目
    在這一集我們將講到如何從安裝vue-cli開始，到新建一個本地項目，再到vscode中關於eslint的配置，以及本地項目關聯公司遠程項目的基本操作。 一，初始化本地項目 1，首先，全局安裝vue-cli 3.0 2.檢查vue-cli的版本,確定是3.0以上 3，新建一個叫question-edi ...
  • JavaScript篇 深入理解JavaScript函數
    JavaScript中的函數 1. 函數的定義 兩種定義形式: 通過函數定義表達式來定義 通過函數聲明語句來定義 通過函數定義表達式來定義 通過函數聲明語句來定義 函數聲明語句定義一個函數 函數定義表達式定義一個函數 tips:以表達式方式定義的函數(特別適合用來定義那些只會用到一次的函數)，函數名 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類