跨域資源請求 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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類