javascript - 数据 URI 方案和 CORS

Question

我认为数据URI方案不是跨域请求，但我发现firefox和chrome的行为方式非常不同。

我知道这样做有点奇怪。问题不是为什么要对 data:text/json;、URI 发出请求？，而是这可能吗？

http://jsfiddle.net/Zn4Rv/1/

$.get('data:text/json;,{"foo":"bar"}',function(data){
   alert(JSON.stringify(data));
})

Firefox 可以，而 Chrome 则不行。

Answer 1

根据The Web Origin Concept (RFC 6454) ，常规来源由三元组(uri-scheme、uri-host、uri-port)组成。由于数据 URI 方案与 HTTP URI 方案不同，并且它描述的 URI 肯定不具有与您的 Web 应用程序相同的主机和端口，因此很明显您的数据 URI 具有不同的来源。

我在 php 中创建了示例代码:

<强> http://test.loc/
在 HTTP 响应中返回 aaa。

aaa

<强> http://test.loc/x.html
发送 GET http://test.loc/ 并在正文中显示 aaa(如果未被 CORS 阻止)。

<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', "http://test.loc", true);
xhr.onreadystatechange = function (){
    if (xhr.readyState==4)
        document.body.innerHTML = xhr.responseText;
};
xhr.send();
</script>

<强> http://test.loc/y.php
从数据 URI 加载 http://test.loc/x.html 脚本。

<object
    data="data:text/html;base64,<?php echo base64_encode(file_get_contents('x.html')); ?>"
></object>

结果:

• msie 目前不支持数据 URI
• firefox 始终显示 aaa
• 仅当我设置 Access-Control-Allow-Origin: null 时，chrome 才会显示 aaa，否则它会在沙箱中运行脚本，并隐藏其中的 XHR 响应

结论:

目前，只有 Chrome 以正确的方式支持带有数据 URI 的 CORS。我们应该发送 bug report到 mozilla，因为这是一个安全问题。在数据 URI 中发送的 Javascript 可以避免常规的 js 过滤器...

3年后:

根据我的 Firefox 错误报告，规范已更改，因此他们修复了此问题。因此，数据 URI 现在在每个支持它们的浏览器上都需要允许原始 header 。