聊一下 Chrome 新增的可信类型(Trusted types)


Chrome 即将在 83 版本新增一个可信类型(Trusted types),其号称这一特性可以全面消除 DOM XSS,为此我连夜分析了一波,下面我就带大家来具体看一下这个特性:

DOM XSS


多年来,DOM XSS 一直是最普遍且最危险的 Web 安全漏洞之一。根据去年发布的 Imperva 报告,XSS 漏洞是 2014 年、2015 年、2016 年和 2017 年最普遍的基于 Web 的攻击形式。2018 年的漏洞冠军被 SQL 注入拿到了,XSS 漏洞仍然排在第二位。

平时大家也经常忽略 XSS 漏洞,因为它们并不总是对访问站点的用户造成直接损害。然而,它们往往是复杂的漏洞利用程序中的第一个踏脚石,可以促进更具破坏性的攻击。在许多情况下,消除 XSS 攻击可以使用户免受更复杂的攻击。

XSS 有两种不同的类型,某些 XSS 漏洞是由服务器端代码导致的,这些代码不安全地创建了构成网站的 HTML 代码。其他问题则在客户端上导致的,比如开发者接收用户可以控制的内容来调用一些危险的 JavaScript 函数。

为了防止服务器端 XSS ,不要通过连接字符串来生成 HTML ,而是使用安全的上下文自动转义模板库。当你避免不了使用这种方式时,可以使用 nonce-based 的安全策略来对其进行额外的防御。

现在,浏览器可以使用 Trusted Types 来防御客户端 XSS

API 简介

Trusted Types 的工作方式就是锁定以下危险函数的接收参数,如果是不安全的,就直接阻止。


您可能已经有所耳闻,因为出于安全原因,浏览器和 Web 框架已经开始建议你远离下面这些功能。

  • 脚本操作:

  • <script src> 和设置 <script> 元素的文本内容。

  • 从字符串生成 HTML

  • innerHTML,outerHTML,insertAdjacentHTML, <iframe> srcdoc, document.write,document.writeln,和DOMParser.parseFromString

  • 执行插件内容:

  • <embed src>,<object data>和<object codebase>

  • 运行 JavaScript 代码的编译:

  • eval,setTimeout,setInterval,new Function()


Trusted Types 为开发者提供了一个内容安全策略,你可以在你的 CSP 配置中增加下面的配置:

Content-Security-Policy: trusted-types;

当你开启这个配置之后,如果你页面中执行了下面这样的代码,浏览器将引发 TypeError 并阻止将 DOM XSS 接收器与字符串一起使用 :

document.innerHTML  = '<img src=code秘密花园.jpg>';

如果你用下面这种安全的方式创建了 DOM,浏览器则不会抛出错误:

el.textContent = '';
const img = document.createElement('img');
img.src = 'code秘密花园.jpg';
el.appendChild(img);

或者,这个危险的 innerHTML 方法可以接受一个受信任的类型字符串,浏览器也不会报错,下面我们来看看如何使用 Trusted Types 创建受信任的字符串:

创建受信任的字符串

使用库

一些库已经生成了可传递给接收器函数的可信类型。例如,您可以使用 DOMPurify 过滤 HTML 代码段:

import DOMPurify from 'dompurify';
el.innerHTML = DOMPurify.sanitize(html, {RETURN_TRUSTED_TYPE: true);

DOMPurify 支持可信类型,并将返回包装在 TrustedHTML 对象中的经过过滤的 HTML ,以使浏览器不会产生冲突。

使用 Trusted Type 策略

如果你的浏览器支持了 trustedTypes ,你可以使用 trustedTypes 创建一个合适的过滤策略,这个策略就是创建信任字符串的工厂,你可以在这个策略上实现你自己的安全规则:

if (window.trustedTypes && trustedTypes.createPolicy) { 
  const escapeHTMLPolicy = trustedTypes.createPolicy('conardEscapePolicy', {
    createHTML: string => string.replace(/\</g, '&lt;')
  });
}

这段代码创建了一个称为 conardEscapePolicy 的策略 ,可以通过 createHTML() 函数创建受信任的字符串。定义的规则将使用 HTML 转义 < 字符,以防止创建新的 HTML 元素。

const escaped = escapeHTMLPolicy.createHTML('<img src=x onerror=alert(1)>');
console.log(escaped instanceof TrustedHTML);  // true
el.innerHTML = escaped;  // '&lt;img src=x onerror=alert(1)>'

同样的,你可以在你的 CSP 配置中指定你实现的信任策略,未被指定的策略同样会被浏览器阻止:

Content-Security-Policy: trusted-types <policyName>;
Content-Security-Policy: trusted-types <policyName> <policyName> 'allow-duplicates'; 

有时你无法更改有问题的代码。例如,从 CDN 加载第三方库,在这种情况下可以使用默认策略:

if (window.trustedTypes && trustedTypes.createPolicy) {
  trustedTypes.createPolicy('default', {
    createHTML: (string, sink) => DOMPurify.sanitize(string, {RETURN_TRUSTED_TYPE: true});
  });
}

谨慎使用这个默认策略,因为它并不一定适用于你的过滤场景,尽量实现自己的安全规则。

兼容性


不过大家先别着急用,这个特性最早将于不久后的 Chrome 83 版本和大家见面,因此目前大部分浏览器还尚未支持。不过,具有较大的 XSS 风险的站点建议大家都支持一波~

CSP 上报

不过这个 CSP 配置一定要谨慎的开启,你的第一次更改不一定是全面的,如果你直接开启了可能会导致大量代码被浏览器阻止,所以建议还是先开启 Report-Only,这样被浏览器阻止的代码就会先被上报上来,你可以根据上报的日志不断完善你代码中的安全规则:

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //csp.reporter.example

比如,你可能会看到下面格式的上报结果:

{
"csp-report": {
    "document-uri": "https://csp.reporter.example",
    "violated-directive": "require-trusted-types-for",
    "disposition": "report",
    "blocked-uri": "trusted-types-sink",
    "line-number": 39,
    "column-number": 12,
    "source-file": "https://csp.reporter.example/script.js",
    "status-code": 0,
    "script-sample": "Element innerHTML <img src=x"
  }
}

这表示在 https://csp.reporter.example/script.js39innerHTML 中以 <img src=x 开头的字符串被阻止调用 。

Chrome 81 正式发布 !消灭混合内容最后一步~

Chrome 81 于前天正式发布了,这个版本其实最初是计划在 3 月 17 号 发布的,但由于冠状病毒(COVID-19)爆发而导致推迟到了现在。Chrome 81 的延迟也扰乱了 Google 正常的六周发布时间表。因此 Google 此前也宣布,下一个版本将直接跳过 Chrome 82 ,直接发布 Chrome 83。 下面我就来带大家看看 Chrome 81 有哪些重要的更新。

发布于:6月以前  |  658次阅读  |  详细内容 »

当浏览器全面禁用三方 Cookie

苹果公司前不久对 Safari 浏览器进行一次重大更新,这次更新完全禁用了第三方 Cookie,这意味着,默认情况下,各大广告商或网站将无法对你的个人隐私进行追踪。而微软和 Mozilla 等也纷纷采取了措施禁用第三方 Cookie,但是由于这些浏览器市场份额较小,并没有给市场带来巨大的冲击。

发布于:6月以前  |  614次阅读  |  详细内容 »

H5 直播的疯狂点赞动画是如何实现的?

直播有一个很重要的互动:点赞。 为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞通常有两个特殊需求: 点赞动作无限次,引导用户疯狂点赞 直播间的所有疯狂点赞,都需要在所有用户界面都动画展现出来(广播用户使用websocket消息)

发布于:6月以前  |  631次阅读  |  详细内容 »

探索 Serverless 中的前端开发模式

最近关于 Serverless 的讨论越来越多。看似与前端关系不大的 Serverless,其实早已和前端有了渊源,并且将对前端开发模式产生变革性的影响。本文主要就根据个人理解和总结,从前端开发模式的演进、基于 Serverless 的前端开发案例以及 Serverless 开发最佳实践等方面,与大家探讨 Serverless 中的前端开发模式。本人也有幸在 QCon2019 分享了这一主题。

发布于:6月以前  |  690次阅读  |  详细内容 »

前端需要了解的9种设计模式

设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题,毕竟这是前人无数经验总结成的最佳实践,而代码实现则是对加深理解的辅助。

发布于:6月以前  |  628次阅读  |  详细内容 »

为什么你的网页需要 CSP?

内容安全策略(CSP)是一个 HTTP Header,CSP 通过告诉浏览器一系列规则,严格规定页面中哪些资源允许有哪些来源, 不在指定范围内的统统拒绝。

发布于:6月以前  |  636次阅读  |  详细内容 »

10 种跨域解决方案(附终极方案)

嗯。又来了,又说到跨域了,这是一个老生常谈的话题,以前我觉得这种基础文章没有什么好写的,会想着你去了解底层啊,不是很简单吗。但是最近在开发一个 「vscode 插件」 发现,当你刚入门一样东西的时候,你不会想这么多,因为你对他不熟悉,当你遇到不会的东西,你就是想先找到解决方案,然后通过这个解决方案再去深入理解。

发布于:6月以前  |  877次阅读  |  详细内容 »

移动 Web 最佳实践(干货长文,建议收藏)

笔者在公司用 web 技术开发移动端应用已经有一年多的时间了,开始主要以 vue 技术栈配合 native 为主,目前演进成 vue + react native 技术架构,vue 主要负责开发 OA 业务,比如报销、出差、crm 等等,react native 主要负责即时通信部分,是在 mattermost-mobile的基础上修改的(mattermost 是一个开源的即时通讯方案)。

发布于:6月以前  |  671次阅读  |  详细内容 »

不可错过的实用前端工具

给大家整理了 25 个前端相关的学习网站和一些靠谱的小工具,包括一些小游戏、教程、社区网站和博客,以及一些资源网站,希望可以帮助到大家!

发布于:6月以前  |  627次阅读  |  详细内容 »

理解 WebView

我们通常使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器来浏览网页。你也许正在使用其中一种浏览器阅读本文!虽然浏览器对于访问互联网内容的任务来说非常流行,它们还有一些我们从未过多关注过的竞争对手。这些竞争对手以 WebView 的形式被我们所熟知。这片文章将讲解 WebView 的神秘之处以及为什么它这么棒。

发布于:6月以前  |  634次阅读  |  详细内容 »

Facebook 前端技术栈重构分享

当我们考虑如何构建一个新的网络应用—一个为现代浏览器设计的、具有用户对Facebook(我们已知的)所有期望的功能,我们现有的技术栈无法支持我们所需要的类似于桌面应用的感觉和性能。

发布于:6月以前  |  609次阅读  |  详细内容 »

最多阅读

为Electron程序添加运行时日志 1年以前  |  7327次阅读
Node.js下通过配置host访问URL 1年以前  |  2924次阅读
js动态创建类和实例化 1年以前  |  2519次阅读
初探 React 组件 1年以前  |  2516次阅读
wordpress标签页的制作 1年以前  |  2439次阅读
500行PHP代码搞定富文本安全过滤 1年以前  |  2380次阅读
22个HTML5的初级技巧 1年以前  |  2295次阅读
使用 SRI 增强 localStorage 代码安全 1年以前  |  2244次阅读
浅谈浏览器的原生拖拽事件 1年以前  |  2236次阅读
第三版主题上线 1年以前  |  2219次阅读
CSS清除浮动 1年以前  |  2219次阅读
利用服务器返回header来传输数据 1年以前  |  2176次阅读
【译】V8 团队眼中的 ES6、ES7及未来 1年以前  |  2166次阅读
获取元素的计算的样式 1年以前  |  2158次阅读
2014年度总结 1年以前  |  2119次阅读