为什么这个 JavaScript 调用不会破坏“同源策略”答案

【问题标题】：Why doesn't this JavaScript call break the "same origin policy"为什么这个 JavaScript 调用不会破坏“同源策略”
【发布时间】：2012-08-13 01:59:34
【问题描述】：

我正在使用 jQuery 显示一个外部 JavaScript 文件。 “同源策略”没有被破坏的原因是因为它不是 AJAX 请求吗？

http://jsfiddle.net/m7q3H/52/

小提琴代码：

HTML

<body>
  <div id="toupdate">
     <script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6343621.js"></script>
  </div>      
</body>

jQuery

$(document).ready(function() {
   console.log('HTML is '+$('#toupdate').html());
});

【问题讨论】：

这正是 JSON-P 工作和存在的原因。这是模型使用的规避。

标签： javascript jquery same-origin-policy

【解决方案1】：

哦，这里绝对没问题。您可以从任何地方引用 javascript 文件。例如，Google CDN 提供了常见的 js 文件，例如您可以使用的 jQuery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

顺便说一句，jQuery 的JSONP 实现就是这样工作的。它使用 javascript 将 <script> 标记动态注入到指向某个远程服务器端脚本的 DOM：

<script src="//remotedomain.com/script?callback=abc"></script>

此远程脚本以 Content-Type: 'application/x-javascript' 响应标头和以下正文进行响应：

abc({"foo":"bar"})

在您的域上，您只需定义 abc 函数：

<script type="text/javascript">
    function abc(data) {
        alert(data.foo);
    }
</script>

然后就是这样：跨域 AJAX 的模拟（我说模拟是因为它没有使用原生 XHR 对象，但它达到了相同的效果）。

现在你可以理解为什么 jQuery 的 JSONP 实现仅限于 GET 请求 => 因为当你注入一个 script 标签时，浏览器只向它的src 属性发送一个 GET 请求。

【讨论】：

这是否意味着，它仅限于 json。不允许返回其他类型的文件，例如 .js ？
不，<script> 标签希望您返回一个有效的 javascript 文件。任何 .js 文件都可以。
但是响应体中包含json，不能是其他类型？
您是在谈论我的示例 abc({"foo":"bar"}) 还是返回简单 JSON 的脚本：{"foo":"bar"}？如果您返回无效的 javascript，例如 {"foo":"bar"}，那么当浏览器尝试执行它时，您显然会遇到 javascript 错误。
@user470184 虽然不允许直接发送，但也可以发送包含字符串化版本的变量的 javascript，例如 html 或 xml，然后对其进行解码。

【解决方案2】：

是的。您可以使用script 标签从其他域加载脚本，但不能使用XmlHTTPRequest 对象（AJAX 请求）进行跨域请求。

【讨论】：

例如，你可以这样做：$('body').append('<script src="http://some-host.com/3rd-party-script.js"></script>') 同源策略只关心 XHR

【解决方案3】：

只要你的外部 .js 加载了

<script>

标记同源策略认为它是您信任的安全 js。

【讨论】：