Twitter bootstrap js被同源策略阻止，但非bootstrap是n't.为什么

Twitter bootstrap js getting blocked by Same Origin Policy, but non-bootstrap isn't. Why?

本文关键字：bootstrap 为什么 但非 js 策略 Twitter      更新时间：2023-09-26

我一直试图把一个网站，需要从另一个网站获得xml数据。到目前为止，只使用html和javascript(没有twitter bootstrap)，我可以访问网站XML并填充一个选择下拉菜单。下面是非bootstrap的html代码:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/getXML.js"></script>
</head>
<body>
    <h1>Test App</h1>
    <button id="button1">submit</button>
    <select id="selectState"></select>
</body>
</html>
下面是bootstrap的HTML代码: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- jQuery and JavaScript files -->    
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
     <script type="text/javascript" src="js/getXML.js"></script> 
     <script src="js/bootstrap.min.js"></script>   
  </head>
  <div class="container-fluid">
    <div class="row-fluid">
        <div class="span4 col-xs-3">
            <form class = "well">
                <h2 class="page-header">Inputs</h2>
                    <label class="control-label" for="selectState">Select State:</label>
                    <select id="selectState"></select>
                <button type="submit" class="btn btn-default" id="button1" >submit</button>
          </form>
       </div>
    </div>
  </div>
</html>
下面是getXML.js脚本: 
var HttpClient = function() {
    this.get = function(aUrl, aCallback) {
        anHttpRequest = new XMLHttpRequest();
        anHttpRequest.onreadystatechange = function() { 
            if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
                aCallback(anHttpRequest.responseText);
        }
        anHttpRequest.open( "GET", aUrl, true );            
        anHttpRequest.send( null );
    }
}
$(document).ready(function(){
    $( "#button1" ).click(function () {         
        aClient = new HttpClient();
        aClient.get('http://www.waterqualitydata.us/Station/search?characteristicName=Caffeine&mimeType=xml&bBox=-92.8,44.2,-88.9,46', function(data) {
            xmlDoc = $.parseXML( data ),
            $xml = $( xmlDoc ),
            $LocName = $xml.find( "MonitoringLocationName" );
            var arr = [];
            $.each($LocName,function() {
                arr.push( $(this).text() );
            });
            for ( var i = 0; i < arr.length; i = i + 1 ) { 
                $('#selectState').append('<option>'+arr[i]+'</option>');
            }
            alert( "success" );
        });
    });
});

现在，当我尝试使用Twitter bootstrap html时，由于同源策略，我得到了跨源请求块。

为什么不使用Twitter Bootstrap的脚本可以绕过SOP，而Twitter Bootstrap版本却不能?

修改Bootstrap脚本以包含' type'属性，如下所示:

<script src="js/bootstrap.min.js" type="text/javascript"></script>

这里的'type'参数是关键-它允许远程请求发生。CSS和JS被允许做这种跨域链接，因为它被W3C判定为低安全风险(至少我最近检查过)。

查看这些链接以获取更多关于CORS的信息:

  • IE的解释:http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx
  • Mozilla的想法:https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

好的，我想我找到问题了。我把<button>放到了<form>元素中。这显然引发了SOP阻塞。不含<form>元素，不产生SOP块。

我没有看到这背后的确切原因，但也许它与<form>元素的安全特性有关，因为<form>元素可以用来传递敏感信息(密码等)?

相关文章：