Question

我一直在尝试整理一个需要从其他网站获取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版本不能？

Answer 1

修改Bootstrap脚本以包含＆＃39; type'属性，如下所示：

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

＆＃39;类型＆＃39;这里的参数是关键 - 它允许远程请求发生。允许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

Answer 2

好的，我想我发现了问题。我将<button>放在<form>元素中。这显然提高了SOP块。如果没有<form>元素，则不会引发SOP块。

我还没有看到这背后的确切原因，但可能与<form>元素中的安全功能有关，因为<form>元素可用于传递敏感信息（密码等）？

Twitter引导程序js被同源策略阻止，但非引导程序不是。为什么？

2 个答案: