CSP约束下DataURL图片可显示却无法作为Favicon加载的原因

开发者阿泽

2026-6-25

为什么Data URL作为Favicon会被CSP拦截，但作为img标签src却正常？

我开发了一款Chrome扩展，用于修改新标签页的Favicon来区分未读标签。在启用严格CSP的站点（例如MDN的HTML学习页面）上遇到异常：用Data URL设置<img>标签的src能正常显示且无CSP报错，但用<link rel="icon">设置Favicon时，会触发CSP拦截错误。

测试代码

let FAVICON_URLl =  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABQZJREFUaEPtmX0sXXcYx7+mJFI0wRLXmqDJvNz1ermk1jD1siij5i3ewtxis1l0hEZL2mjKmKtdbTo6zChTwzRVw4pttJZ6f2u5ltQqXbououvKtAzL73fiTu927z2J3LPI7vPPPfee53ee3+f3POec7/O7GuvAOraxaagB/uPsaTxvZLK9S0gNoC6hra2A+h7Y2vptffT/OwO6uroQOthLl/Hpk6fQ0tpBv4+MjGFhYUHuEltYvAhjnjE9v7K8Ak3N5+jx48cLGB0dY52aLWUgKioSZz8U02CLi4uQSKYhFDJAB718MTw8IncinV3tEAj20vNNTZcRGBhAj8kYMpatbQmguqYSXl6v0ljNzS0w4fHg4ChUCrB79wsYHLoJDQ0N6ns0LR3igg+4BdDR0cGUZBzkk1hi4hHExYpYAcTHx+L93NN03KNHvyMsNAJt7S3cAvj6vYaKilIadHV1FXy+Lb6oqWIF0NhYh1dcXejYhvpGlJSUoqOzjVuAoqJChIaF0KA9PTcQHBSK1tZmpQC7dunj9uS49GaPi30Ld+/OcgugqamJW7dHYGBgQAEyM06itLScFUBISBA+Kf6YjlteXoaVpQB79phzC+DsvB9NlxukDwpHh/2YnZ1lBVBWfgH+/n50bEdHFyIjomFjI+AW4HR2FhIS3qSTmJi4BQ93L3qsrIS0tbUxOTUGPT096p+Wmo6qqmruAfoHemFqakonIRafhTj/DCsAT08P1F66SH3X1tZga+OABw9+5RaAz7fGd993SMvH0+MgxscnWAGIC/IQExNNfQcHhuDjc4gec1pCqanJSD92lAa+d+9nOAidsL7ONHWKSoi8tIZH+mFiwqO+2dm5+KiwiHuAax2tsLW1oYHLyj5DxvET0mwoAiCaqa3tqtTXxdkN09M/cgvA4xljZHRAKgGCg8PQ032dFUBm5jG8l5xEfWdmfoLTPmfpOM5KKDZOhLy8HBqYSAC+tQArK3+yAui5/i0sLS2o7/miYpw6lc09QH19LQ64udLADQ1fIfEdZkU3TF4JmZub4WbfDamfn28A+vr6uQXQ19ejEkBbW4sGjo9LwJUrf9e0ops48d23kZXF3Ctzc3MQ7BVS/bRhnJRQUFAASi6cpzE3JIBswyIvA81Xm+DktI+OrampRUpy2jOZ4wTg09JiBAT408CdnV2ICGee58pKyMjICOMTQyD6iVh0lAjt7de4BSBtIikfoiSJkQaksrKaFUBkZDjOFTJv6qWlJSreyOdmU3kG3N3dUPdlDY1JXlp2to64f/8XVgBVFyvg7c1opa9bWiESxf9jnMoB8vNzITr8Bg08NDgMb29GTSoroakpyTNdW1JSMuou1XMLICsBcnLyUHiO0fPKAMiuQ2VlOXUjT52X+HaYn5/nFsDe3g7t3zD9KrHNEkAZwOHYGISHh1K33t4fEPA608HJmkpL6HhGOlJSjtCYshJAEYCP9yFU13wOQ0ND6nbyRBbtfTkH6O7uhJW1FY0rKwEUAZBmpeAMs1VC7GUnF9y5M8MtgJmZKfr6e6VBZSWAIoDGxiYEBwdSl8nJKRxw9fzXyZMfVVZC5LlvZmYmDUzax80SQHZGRKzt1N1Jf35Cthl3MNuMDx/+RntmeUb2lqz5TJYXF/+AZEoi11f2xJZ25lhHUaGjGkCFi8vq0uoMsFomFTqpM6DCxWV1afIPw/b+p14NwCrRqnP6CxZh0hrAol2VAAAAAElFTkSuQmCC';

// test1: load it in page
const imgg1 = document.createElement('img');
imgg1.src = FAVICON_URLl;
imgg1.style.cssText = 'position:absolute;top:0;border:2px solid black;width:80px;height:80px;z-index:99999;';
document.body.appendChild(imgg1);

// test2: load it as a favicon
const linkk = document.createElement('link');
linkk.type = 'image/png';
linkk.rel = 'icon';
linkk.href = FAVICON_URLl;
document.head.appendChild(linkk);

测试结果

test1无CSP报错，图片正常显示；test2执行document.head.appendChild(linkk)时抛出CSP错误：

拒绝加载图片'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADA.....'，因为它违反了以下内容安全策略（CSP）指令："img-src 'self' *.githubusercontent.com .googleusercontent.com .gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://.google-analytics.com https://.googletagmanager.com www.gstatic.com"。

原因分析

核心在于CSP对不同类型的DOM元素使用不同的指令进行管控：

<img>标签的src受img-src指令约束，而<link rel="icon">的href受link-src指令约束（如果站点CSP未指定link-src，则会回退到default-src规则）。
目标站点的CSP配置中，img-src允许加载Data URL（或浏览器对img标签的Data URL存在默认豁免逻辑），但link-src未将data:协议列入允许列表，因此设置Favicon时会被拦截。

需要注意的是，Data URL本身不属于'self'指令的覆盖范围，必须在对应CSP指令中显式声明data:才能被允许加载。

解决方案

作为Chrome扩展，推荐以下两种方式绕过该限制：

使用扩展内置资源：将Favicon图片打包到扩展中，通过chrome.runtime.getURL('path/to/icon.png')获取资源URL，同时在manifest.json中配置web_accessible_resources允许页面访问该资源。扩展的chrome-extension://协议资源通常不受页面CSP限制。
修改扩展权限：如果必须使用Data URL，可以尝试在扩展的manifest.json中添加"content_security_policy"字段，允许扩展上下文使用Data URL，但这只对扩展自身的代码生效，对注入页面的DOM元素可能无效，因此优先推荐第一种方案。

内容的提问来源于stack exchange，提问作者Badr Elmers

CSP约束下DataURL图片可显示却无法作为Favicon加载的原因

测试代码 #

测试结果 #

原因分析 #

解决方案 #

测试代码

测试结果

原因分析

解决方案