了解基于 CORS 的 XMLHttpRequest (responseText)

IT技术 javascript xmlhttprequest cors
2021-02-11 08:14:07

对于一个项目,我正在研究各种 HTML5 和 Javascript 元素以及它们周围的安全性,我现在正试图了解 CORS。

根据我的测试,如果我删除..

<?php
 header("Access-Control-Allow-Origin: *"); 
 header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
 ?>

..从尝试访问的页面中,我在 Chrome 的控制台日志中看到以下内容:

XMLHttpRequest cannot load http://www.bla.com/index.php. Origin http://bla2.com is not allowed by Access-Control-Allow-Origin.

我理解这是正确的,但是 Wireshark 在返回中显示 HTTP/1.1 200 OK,并且在数据中显示所请求页面的来源。那么是否只是浏览器和 Javascript 阻止了 responseText 以任何实质性方式使用,即使它实际上已被传输?

代码如下:

  function makeXMLRequest() {
  xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4) {
        alert(xmlhttp.responseText);
    }
}
xmlhttp.open("GET","http://www.bla.com/index.php",true);
xmlhttp.send();
}

提前致谢。

2个回答

对于像 GET 或 POST 这样的“简单”HTTP 动词,是的,整个页面都被获取,然后浏览器决定 JavaScript 是否可以使用这些内容。服务器不需要知道请求来自哪里;检查来自服务器的回复并确定是否允许 JS 查看内容浏览器的工作。

对于像 PUT 或 DELETE 这样的“非简单”HTTP 动词,浏览器使用 OPTIONS 请求发出“预检请求”。在这种情况下,浏览器首先通过分别检查来检查动词是否受支持(有关更多信息,请参阅HTML5 RocksCORS 页面的“处理不那么简单的请求。)预检响应还列出了允许的非简单标头,包含在.Access-Control-Allow-OriginAccess-Control-Allow-MethodsAccess-Control-Allow-Headers

这是因为允许客户端向服务器发送 DELETE 请求可能非常糟糕,即使 JavaScript 永远无法看到跨域结果——再次记住,服务器通常没有任何义务验证请求来自合法域(尽管它可能会使用Origin请求中标头来实现)。

设置 XMLHttpRequest.withCredentials 时会发生什么?如果响应不包含 Access-Control-Allow-Credentials,则不会发送凭据。这甚至需要对简单的 GET 请求进行预检,但我在服务器日志中没有看到任何内容。
2021-03-27 08:14:07

那么是否只是浏览器和 Javascript 阻止了 responseText 以任何实质性方式使用,即使它实际上已被传输?

是的。你可以用 JS 提出任何你喜欢的请求。

它是访问同源策略阻止的数据。

执行恶意操作(例如“ POST http://bank.example/give/money?to=attacker”或“” POST http://forum.example.com/post?message=spamspamspamspam")的请求称为CSRF 攻击,必须由服务器防御。

@GtiClicker :它在问题中的位置(在它被删除之前)很好
2021-03-14 08:14:07
@GtiClicker——那又怎样?问题Access-Control-Allow-Origin中的代码没有放入触及 XMLHttpRequest 的代码。(如果你有一个新问题,那就提出一个新问题。不要只评论一个相关的答案)。
2021-03-21 08:14:07
但我使用的是 fetch 而不是 XMLHttpRequest
2021-03-23 08:14:07
那么我该放在Access-Control-Allow-Origin哪里呢?
2021-04-12 08:14:07