图像加载上的访问控制允许来源问题

Posted 2023-03-04

【中文标题】图像加载上的访问控制允许来源问题

【英文标题】：access-control-allow-origin issue on Image load

【发布时间】：2017-11-27 23:37:47

【问题描述】：

为什么当我们有 img 标签时我们没有得到 access-control-allow-origin 问题 src=urlOfdifferentDomain元素指向不同的域

类似案例：1

<img src="urlOfdifferentDomain" />

但是当我们做案例 2 时我们会得到同样的错误

//creating image element
a=new Image();
// image on load function
a.onload=function()

// assigning src function
a.src=urlOfdifferentDomain

我只想知道这两种方法有什么区别。 我还将网络服务器中的 csp img-src 分配给 self 然后在案例 1 中也从不同域加载图像

【参考方案1】：

案例 1 是可以的，因为在 html 中使用图像不会将资源（来自其他域）暴露给 javascript，因此不会导致安全问题。

情况2会报错，因为Image对象的使用确实会给Canvas编辑等一些操作带来安全风险，因为它将其他域的资源暴露给JavaScript。

更新：此错误是由浏览器安全检查引起的。 Web 服务器不知道请求是来自 html 标签还是来自 javascript 调用，并且无论如何都会返回资源 - 您可以检查浏览器中的网络调试面板，看到资源已下载，状态为 200。资源被下载并暴露给 JavaScript 操作。浏览器会检查对资源的 JavaScript 操作是否存在漏洞。如果是，如果服务器没有开启CORS，会报Access-Control-Allow-Origin错误。

【讨论】：

但它应该依赖于 webserver 而不是 javascript，我的意思是当跨域调用在案例 1 中时，它将转到 webserver 并且 webser 不会从 html 标签调用 r，它应该提供跨域.关于“我还将网络服务器中的 csp img-src 分配给 self 然后在案例 1 中还从不同域加载图像”

@SudhanshuAgarwal 网络服务器不知道请求是来自 html 标签还是来自 javascript 调用，并且无论如何都会返回资源 - 您可以检查浏览器中的网络调试面板，并查看资源已下载，状态为 200。资源下载后，浏览器将检查获取的资源是否会暴露给 JavaScript。如果是，并且该资源的JavaScript操作存在漏洞，如果服务器未启用CORS，则会报Access-Control-Allow-Origin错误。

@SudhanshuAgarwal 如果CSP设置为img-src 'self';会报错：Refused to load the image ... because it violates the following Content Security Policy directive: "img-src 'self'".