瀏覽器的同源策略及跨域解決方案

時間 2019-11-08

原文原文鏈接

同源策略

　　　　　　　　　　　　　　一個源的定義

若是兩個頁面的協議，端口（若是有指定）和域名都相同，則兩個頁面具備相同的源。css

舉個例子：html

下表給出了相對http://a.xyz.com/dir/page.html同源檢測的示例: 前端

URL	結果	緣由
`http://a.xyz.com/dir2/other.html`	成功
`http://a.xyz.com/dir/inner/another.html`	成功
`https://a.xyz.com/secure.html`	失敗	不一樣協議 ( https和http )
`http://a.xyz.com:81/dir/etc.html`	失敗	不一樣端口 ( 81和80)
`http://a.opq.com/dir/other.html`	失敗	不一樣域名 ( xyz和opq)

同源策略是什麼

同源策略是瀏覽器的一個安全功能，不一樣源的客戶端腳本在沒有明確受權的狀況下，不能讀寫對方資源。因此xyz.com下的js腳本採用ajax讀取abc.com裏面的文件數據是會被拒絕的。python

同源策略限制了從同一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。jquery

不受同源策略限制的

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

2. 跨域資源的引入是能夠的。可是js不能讀寫加載的內容。如嵌入到頁面中的<script src="..."></script>，<img>，<link>，<iframe>等。git

JSONP解決跨域問題

一、JSONP原理分析

利用瀏覽器加載靜態資源的時候不限制跨域github

<script src=""></script>

咱們使用cdn方式引用的jQuery文件也是跨域的，它就可使用。ajax

一樣是從其餘的站點拿東西，script標籤就能夠。那咱們能不能利用這一點搞點事情呢？django

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>xyz</title>
</head>
<body>
<button id="b1">點我</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
  function rion() {
    console.log("選我不後悔！");
  }
</script>
<script src="http://127.0.0.1:8002/abc/"></script>
</body>
</html>

後端返回響應　　

def abc(request):
    return HttpResponse("rion()")

這樣就利用了瀏覽器加載靜態資源的時候不限制跨域的特性，實現了跨域請求拿數據。

2.jQuery中的getJSON方法

jQuery中封裝了專門的方法實現jsonp。

示例：

點擊b1按鈕發送jsonp請求到後端，而後後端返回數據。

html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="b1">點我發送請求</button>

<script src="jquery.min.js"></script>
<script>
    // 點擊b1按鈕發送jsonp請求
    $('#b1').click(function () {
        // 使用jquery提供的getJSON方法請求獲取數據,
        // callback=? 是固定格式，會建立一個隨機的字符串做爲callback的value。
        $.getJSON('http://127.0.0.1:8000/index/?callback=?',function (data) {
            console.log(data)
        })
    })
</script>
</body>
</html>

後端項目函數：　　

def index(request):
    data = {"name": "zwq", "age": 18}
    func_name = request.GET.get('callback')
    print(func_name) # jQuery3310589826002995957_1547112594072
    return HttpResponse('{}({})'.format(func_name,json.dumps(data)))

但JSONP有必定缺陷：

1.先後端都要支持

2.只能發GET請求

CORS解決跨域問題

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

CORS須要瀏覽器和服務器同時支持。目前基本上主流的瀏覽器都支持CORS。因此只要後端服務支持CORS，就可以實現跨域。

1.簡單請求和非簡單請求介紹

瀏覽器將CORS請求分紅兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。

一個請求須要同時知足如下兩大條件才屬於簡單請求。

（1) 請求方法是如下三種方法之一：
　　　　HEAD
　　　　GET
　　　　POST

（2）HTTP的頭信息不超出如下幾種字段：
　　　　Accept
　　　　Accept-Language
　　　　Content-Language
　　　　Last-Event-ID
　　　　Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

2.簡單請求的處理方式

在跨域場景下，當瀏覽器發送簡單請求時，瀏覽器會自動在請求頭中添加代表請求來源的 Origin 字段。

咱們的後端程序只須要在返回的響應頭中加上 Access-Control-Allow-Origin 字段，而且把該字段的值設置爲跨域請求的來源地址或簡單的設置爲 * 就能夠了。

例如：咱們能夠在Django中間件中的process_response方法來給相應對象添加該字段。

from django.utils.deprecation import MiddlewareMixin


class CORSMiddleware(MiddlewareMixin):
      # 處理簡單請求的跨域請求
    def process_response(self, request, response):
        # 告訴瀏覽器來自這個源的請求是我容許的跨域請求
        # response['Access-Control-Allow-Origin'] = 'http://localhost:63342'
        # 給響應頭加上 Access-Control-Allow-Origin 字段 並簡單的設置爲 *，表示全部跨域簡單請求都放行
        response['Access-Control-Allow-Origin'] = '*'
        return response

非簡單請求的處理方式

咱們開發中經常使用到的那些請求方法是PUT或DELETE，或者Content-Type字段的類型是application/json的都是非簡單請求。

對於非簡單請求，瀏覽器一般都會在請求以前發送一次 OPTIONS 預檢請求。該請求會像後端服務詢問是否容許從當前源發送請求而且詢問容許的 請求方法 和 請求頭字段。

舉個例子：

咱們前端使用axios向後端發送PUT請求，結果：

看看發送的具體請求：

解決辦法也很簡單，咱們能夠在後端簡單的給響應對象添加上經常使用請求方法（PUT、DELETE）的支持就能夠了。

在上面Django的中間件中添加以下代碼：

class CORSMiddleware(MiddlewareMixin):
    """對全部跨域請求作放行處理"""
    def process_response(self, request, response):
        # 全部跨域簡單請求都放行
        response['Access-Control-Allow-Origin'] = '*'
        if request.method == 'OPTIONS':
             # 告訴瀏覽器你發的非簡單請求（修改了Content-type）我容許了
            response['Access-Control-Allow-Headers'] = 'Content-type'
            # 告訴瀏覽器 你發送PUT請求我也支持
            response['Access-Control-Allow-Methods'] = 'PUT, DELETE'
        return response

使用django-cors-headers

咱們這個中間件確實能解決目前的CORS跨域問題，可是咱們的方法確定是不夠嚴謹的，django有一個第三方包django-cors-headers。

安裝：

pip install django-cors-headers

註冊APP：　　

INSTALLED_APPS = [
    ...
    'app01.apps.App01Config',
    'corsheaders',  # 將 corsheaders 這個APP註冊
]

添加中間件：

必須放在最前面，由於要先解決跨域的問題。只有容許跨域請求，後續的中間件纔會正常執行。

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # 添加中間件
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

配置

能夠選擇不限制跨域訪問

CORS_ORIGIN_ALLOW_ALL = True

或者能夠選擇設置容許訪問的白名單　　

CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
    # '<YOUR_DOMAIN>[:PORT]',
    '127.0.0.1:8080'
)

更多詳細配置詳細請查看django-cors-headers項目

response

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。