即使有一个概念调用相同的原始政策,我们如何加载图像？

Question

我正在使用HTML和JavaScript 构建小型离线 Web应用程序.CSV文件用于存储数据.

要读取CSV(使用jquery-csv库)文件,我使用以下代码.

<script>
    $(document).ready(function(){

        var filepath = 'data.csv';
        var data_string = $.get(filepath);
    });

</script>

但由于跟随错误,我无法阅读它.

XMLHttpRequest无法加载file:/// C:/Users/Nimal/Desktop/javascript-csv/data.csv.交叉源请求仅支持协议方案:http,数据,chrome,chrome-extension,https

---

然后我可以了解相同的原产地政策概念.

然后,我从这里找到了许多相关的文章.

1. "只有HTTP支持跨源请求." 加载本地文件时出错
2. XMLHttpRequest无法加载文件.仅支持HTTP的跨源请求
3. 如何规避同源政策

来自维基百科,

在计算中,同源策略是Web应用程序安全模型中的一个重要概念.根据该策略,Web浏览器允许第一个Web页面中包含的脚本访问第二个Web页面中的数据,但前提是两个Web页面具有相同的源.

但我有一个问题.

如果我使用<img src="abc.jpg">我可以加载图像.

为什么图像有例外？

我们如何加载图像,但我们无法加载其他文件类型？

我认为相同的原始政策应该应用所有文件类型,包括图像.

或者我是否错误地理解了同一个orgin-policy？

Answer 1

要理解这个问题，您必须了解同源策略（以下称为sop）及其处理方式。在编写允许用户浏览万维网的应用程序时，这是一个重要的概念。在这个概念出现之前，已经发生了许多安全违规行为。

简而言之，您可以将 sop 视为包含三个元素的元组：(scheme,host,port)。

• 方案：协议。HTTP 和 HTTPS 是不同的。
• host : 方案后的 url。stackoverflow.com 与 google.com 不同
• 端口：https://stackoverflow.com与https://stackoverflow.com:9876/question不同（原因：默认端口通常是80）

当您访问带有从多个 URL 获取信息的脚本的页面时。此页面上的元组是例如。tuple_main。如果脚本从另一个 URL 加载内容，则会从 URL 生成一个元组：tuple_request。这里可能会出现两种情况：

1) tuple_main == tuple_request
 ===> OK  => get content

2) tuple_main != tuple_request
 ===> NOK => do not get content and show that sop is being violated.

最初，sop 的发明是为了保护 DOM 中的内容免受恶意攻击。多年来，这一范围不断扩大，以保护浏览器正在处理的信息的其他部分。一个最值得注意的例子是全局 JavaScript 变量。十多年前，开发人员开始在 JavaScript 中存储敏感信息，就像var foo在全球空间中一样。恶意对手很容易获得并滥用它......

多年来，还添加了其他扩展来保护 Adob​​e Flash、MS Silverlight 插件、javascript 机制（如 XMLHttpRequest）等。sop 确保您正在访问的网页内容不会泄露给恶意对手（主要是XSS）

现在，您的问题最初是（这是问题的描述）：

要读取 CSV（使用 jquery-csv 库）文件，我使用以下代码。

<script>
    $(document).ready(function(){

      var filepath = 'data.csv';
      var data_string = $.get(filepath);
    });
</script>

但由于以下错误，我无法阅读它。

XMLHttpRequest 无法加载文件:///C:/Users/Nimal/Desktop/javascript-csv/data.csv。仅协议方案支持跨源请求：http、data、chrome、chrome-extension、https

由于元组不同，因此您违反了标准。所以你当然会收到这条消息。

但你的主要问题是

如果我使用<img src="abc.jpg">我可以加载图像。

为什么图像有例外？

为了回答这个问题，这里使用了另一个概念和（呃......）一些历史（旧的 IE 时代）。为了让开发人员能够使用不同 sop 位置的资源，cross-origin添加了一个概念。从这个概念来看，存在三种机制（来源）：

1. 跨域写入。

在这里，我们讨论的是指向其他站点的链接、HTTP 重定向和表单提交。

2. 跨域读取

“从其他来源阅读”是不鼓励的。但您可以通过嵌入它来解决它。这引出了最后一个机制：

3. 跨源嵌入

这就是您在加载 csv 文件时所做的事情。添加此机制是为了允许 Web 开发人员使用来自其他来源的内容，例如样式表、脚本、图像......您可以将此视为“同源策略原则的例外”。

如果您正在构建网页并且想要使用 jQuery（脚本），那么浏览器将加载该脚本。但嵌入式。您可以运行脚本，但不能读取标签的内容<script>。

这就是图像中发生的情况。当通过标签加载图像时<img>，浏览器只是读取图像。它无法访问内容（描述整个图像的文件名后面的字节信息）。因此，您可以在正在查看的页面上看到图像。

如果您想在元素中加载图像<canvas>，那么它将无法这样做，因为它违反了规则。您的脚本正在尝试访问该文件名后面的字节信息。这是不允许的。

我为什么要谈论 IE 的历史？嗯，很久以前，IE 是主流浏览器。自从许多公司开始“上线”以来，他们已经构建了使用 IE 来完成其业务任务的应用程序。例如，一位财务员工正在使用 IE 来获取每月的销售摘要。

但同源政策并没有像现在这样延伸。从其他域加载源“不是问题”。公司开始使用第三方脚本（当时大量使用 Ext js）、第三方样式表和“第三方”图像来设置网站。万维网上有一些免费使用的图像（由tinypic、imageshack 等网站托管）。许多公司已将这些图像用于他们的网站。

如果不实施这些例外，那么许多遗留网站就会崩溃。图像无法加载。脚本无法运行。修复它的经济成本将是巨大的。因此，为了预见到这一点，添加了这种嵌入机制。

个人说明：我很高兴这个异常的存在，否则维护网站将是开发人员的噩梦。如果 sop 按预期严格，那么您必须下载脚本和图像并从您的服务器托管它。这样，您的网站就可以访问这些并使用它们。如果脚本有更新，您必须下载它并覆盖您的本地脚本...

您正在尝试读取 csv 文件的内容，这违反了嵌入机制背后的安全措施。由于它包含不应泄露给恶意对手的明智信息，因此浏览器会通知您无法加载它。只是为了防止您遇到一些安全问题。

如果你想在本地工作，你必须使用CORS。或者启动没有sop限制的浏览器（尽管我不推荐）。