img设置维基链接为src时出现SameSite跨站Cookie报错如何处理
报错产生原因
该警告是现代浏览器内置的跨站Cookie安全防护机制触发的,核心触发逻辑:
- 你在页面中用
<img>标签引用维基百科域名下的图片资源时,请求属于跨站请求范畴——当前你本地练习的页面域名和维基百科的域名不属于同一站点,浏览器发起资源请求时默认会尝试携带维基百科域名下已存储的用户Cookie - 自2020年起,Chrome、Firefox等主流浏览器全面强制推行
SameSiteCookie规则:所有跨站请求中携带的Cookie,必须由服务端明确声明SameSite属性值,指定Cookie在跨站场景下的发送权限,以此防范CSRF攻击、用户隐私数据泄露等风险 - 这个警告不是你的HTML代码存在错误,是维基百科服务端返回图片响应时,附带设置的Cookie没有按浏览器要求配置合法的
SameSite属性,浏览器按规则抛出的安全提示。
可行解决方法
根据不同的开发场景,可以选择对应处理方案:
- 基础练习场景:直接忽略该控制台警告即可。只要图片可以正常渲染显示,这个警告不会对你的页面功能、JS/CSS代码运行逻辑产生任何影响,不影响基础开发练习。
- 本地静态开发场景:将需要使用的维基百科图片下载到本地项目的静态资源文件夹,通过本地相对路径作为
<img>标签的src属性值,完全避免跨站请求,就不会触发该警告。 - 跨站联调测试场景:如果确实需要调试跨站资源加载逻辑,可以临时修改本地浏览器的安全配置(仅建议开发环境使用,日常浏览网页时不要修改该配置):以Chrome浏览器为例,地址栏输入
chrome://flags/#same-site-by-default-cookies,将对应配置项设置为Disabled后重启浏览器即可关闭该强制校验,注意该操作会降低浏览器安全防护等级,仅适合本地开发临时使用。
内容的提问来源于stack exchange,提问作者Parham Alijani
相关产品推荐
相关产品推荐

