CORS 和 Web 扩展

Question

我在 http://localhost:8080 上设置了服务器哪里http://example.com可以执行 POST 请求:

'use strict';

const express = require('express');

const app = express();
const port = 8080;

// allowing CORS for example.com
app.use('/', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://example.com');
    if (req.method === 'OPTIONS') {
        res.header('Access-Control-Allow-Methods', 'OPTIONS, POST');
        res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length');
        res.status(200).send();
    } else {
        next();
    }
});

// handling POST requests
app.use('/', function (req, res) {
    console.log('a client did a POST request');
    res.status(200);
});

app.listen(port, () => console.log ('server started on port ' + port));

它工作正常:我无法向 http://localhost:8080 发出 POST 请求来自http://localhost:8081因为同源政策。

然后我为 Firefox 编写了一个 Web 扩展，它将尝试向 http://localhost:8080 发出 POST 请求。来自任何域。

这是它的 list :

{
    "manifest_version" : 2,
    "name" : "aBasicExtension",
    "version" : "0.0.0",
    "content_scripts" : [
        {
            "matches" : ["<all_urls>"],
            "js" : ["content-script.js"]
        }
    ],
    "permissions" : ["*://*.localhost/*"]
}

及其content-script.js代码:

(() => {

    'use strict';

    const xhr = new XMLHttpRequest();

    xhr.open('POST', 'http://localhost:8080');
    xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');

    xhr.addEventListener('readystatechange', () => {
        if (xhr.readyState === XMLHttpRequest.DONE){
            if (xhr.status === 200) console.log('OK');
            else console.error('an error has occured : ' + xhr.status);
        }
    });

    xhr.send(JSON.stringify({dataName: 'some data here'}));

})();

我不明白的是它是否有效。扩展程序向 http://localhost:8080 发出请求Firefox 没有阻止它，因为 list 允许它，但是服务器 ( http://locahost:8080 ) 没有授予他的权限。

Answer 1

简短版本:CORS 是一种用于控制浏览器行为的协议(protocol)，而不是服务器的行为。并且您对插件 permissions 设置的使用绕过了同源策略和 CORS 的需要。

如果您查看 CORS 代码，您会发现它不会执行任何拒绝请求的操作；它只是在响应上设置 header 。这些 header 将指示浏览器客户端是否可以读取响应，但无论如何都会发送响应。

这一事实可能会被某些强制 CORS 预检的请求所掩盖。在这种情况下，浏览器首先发送一个特殊的 OPTIONS 请求，并且附加到该响应的 header 可以阻止浏览器发送真正的请求。这是一种向后兼容机制，并不适用于所有请求。 (有关详细说明，请参阅 this answer。)

这就是您的示例中发生的情况。您的 POST 属于需要在 CORS 下进行预检检查的类型。因此，在常规版本中，浏览器会发送预检检查，查看响应 header ，并且不会发送真正的请求。但如果它是一种不同类型的 POST，它将直接发送请求，并且服务器将执行它。

在插件版本中，您在权限设置中明确允许此域。这个bypasses the Same Origin Policy :

The extra privileges include: XMLHttpRequest and fetch access to those origins without cross-origin restrictions (even for requests made from content scripts).

因此在这种情况下不需要预检，并且直接发送请求。

如果您想拒绝服务器上来自某些域的请求(或更普遍地防止 CSRF)，则可以进行其他设置。它们是什么取决于您的网络框架。