整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
日发现，Chrome浏览器中的一个漏洞（已被修补），该漏洞允许攻击者通过音频或视频的HTML标记从其他网站检索敏感信息。
如果攻击者可以通过恶意广告（合法网站上嵌入广告中的恶意代码）或攻击者可以注入和执行的合法网站上的漏洞攻击恶意网站上的受害者，则可以利用旧版本Chrome中的漏洞利用此漏洞代码——例如通过存储的跨站点脚本（XSS）缺陷来进行。
Attack利用音频和视频的HTML标签
在今天早些时候发布并与Bleeping Computer共享的一篇文章中，Masas解释说，攻击场景需要恶意代码来加载来自音频和视频的HTML标签内合法站点的内容。
通过使用“进展”事件，Masas说他可以推断出他从外部网站获得的回复的大小，并猜测各种类型的信息。
在正常情况下，这是不可能的，因为CORS-Cross-Origin资源共享）——一种阻止站点从其他网站加载资源的浏览器安全功能，但是这种攻击绕过了CORS。
“从本质上讲，这个漏洞允许攻击者使用视频或音频标签来估计跨源资源的大小，”Masas今天通过电子邮件告诉Bleeping Computer。
攻击可以从其他站点检索敏感/受保护的数据
在他的测试中，他能够通过在公共Facebook帖子上激活“受众限制”设置来确定用户可能的年龄组和性别
“通过操纵像Facebook这样的网站以大或小的响应形式反映用户数据，它成为可能一致地提取有价值的数据”Masas告诉了我们。
但专门研究网络安全问题的安全研究员Mike Gualtieri表示，与从Facebook用户那里收集数据相比，攻击可以更有创意地使用。例如，通过定位企业后端，内部网和其他以企业为中心的应用程序。
“由企业IT定制的现成系统可能是这些类型攻击的最佳目标，因为攻击者可以学习系统内部，并可能影响系统的所有用户，”
Gualtieri在一次私人谈话中告诉的Bleeping Computer。
“通常情况下，基于登录用户，这些系统更加同质”他说，并补充说，攻击者可以准备攻击，专注于对存储在企业Web应用程序特定区域中的敏感数据进行exfiltrating。
API也处于危险之中
此外，Gualtieri认为攻击也可能成功对抗攻击者通常无法访问的API，但错误允许他们将请求转发。
“今天找到弱受保护的web-API的通信数据是非常可行的，”Gualtieri告诉我们。
“具有足够勤奋的攻击者可以通过登录用户计算出一组预期请求，并针对这些API响应。
“例如，假设一家假想的股票交易公司有一个暴露的API端点，它返回的内容如下：
如果用户已登录请求可能是：
“因此，根据购买的一系列库存，你可以推断，”Gualtieri说。“这个例子对许多人来说可能听起来不切实际，但我看到太多设计糟糕/暴露不好的网络。
API要知道有一些类似于网络上这个假设的例子，“他补充道。
攻击类似但不同于Wavethrough
如果Masas的攻击听起来很熟悉，那是因为它与3月份发布的漏洞非常相似，称为Wavethrough（CVE-2018-8235），这是一个影响Edge和Firefox的漏洞。
就像Masas的Chrome bug一样，Wavethrough使用音频和视频标签绕过CORS保护，从其他站点加载数据并确定其内容。
但这就是相似性停止的地方。
“Wavethrough漏洞使用服务工作者和'范围'请求来提取原始数据，”Masas告诉Bleeping Computer。另一方面，我们观察从我们的元素发出的'进展'事件来估计跨源资源大小，然后利用这些信息通过利用Facebook等网站上的限制过滤器推断出有关用户的更多信息。
发现Wavethrough的Jake Archibald也表示，这两次袭击是相当不同的，即使它们是通过音频和视频HTML标签进行的。
“它非常相似，但更多的是时间攻击，而Wavethrough却不是，”阿奇博尔德今天在一次私人谈话中告诉Bleeping Computer。 “Wavethrough是一种原始模型违规行为。”
不同之处在于Wavethrough在破坏CORS后检索它找到的任何数据，而Masas的漏洞在一系列请求试图猜测数据是什么的时候，这个漏洞在不断刺激其他网站。但是当Chrome漏洞听起来更难以利用时，它事实并非如此。
“攻击并不复杂，只需要做一些准备，”Gualtieri告诉我们，并补充说这个不断猜测的游戏并不意味着Chrome的bug只限于单独针对一个用户。
“根据目标网站，猜测游戏可用于同时定位多个用户”Gualtieri说。
除非用户希望将其网络机密泄露到网上，否则建议将Chrome更新为v68.0.3440.75或更高版本。
（作者：曲速未来安全区；本文仅代表作者观点，不代表链得得官方立场）
现在视频业务越来越流行了，播放器也比较多，作为前端工程师如何打造一个属于自己的播放器呢？最快最有效的方式是基于开源播放器深度定制，至于选择哪个开源播放器仁者见仁智者见智，可以参考开源播放器列表(https://www.awesomes.cn/subject/videos)选择适合自己业务的播放器。
我们的播放器选择了排名第一的video.js播放器，截至目前该播放器在Github拥有13,991 star, 4,059 fork，流行程度可见一斑。为了让大家更多的了解它，我们细数下优点：
免费开源
这个意味着什么就不多说了，附上项目地址(https://github.com/videojs/video.js)
兼容主流浏览器
在国内的前端开发环境往往需要支持到低级版本的IE浏览器，然后随着Flash的退化，很多公司没有配备Flash开发工程师，video.js提供了流畅的Flash播放器，而且在UI层面做到了和video的效果，实属难得，比如全屏。
UI自定义
不管开源项目在UI方面做的如何漂亮，对于各具特色的业务来说都要自定义UI，一个方便简单的自定义方式显得格外重要，更何况它还自带了编译工具，只能用一个”赞“字形容。具体怎么实现的，这里先简单描述下是使用JavaScript（es6）构建对象，通过Less编写样式规则，最后借助Grunt编译。
灵活插件机制
video.js提供一个插件定义的接口，使插件开发简单易行。而且社区论坛也提供了一些好用的插件供开发者使用。附插件列表
比较完善的文档
完善的文档对于一个稳定的开源项目是多么的重要，video.js提供了教程、API文档、插件、示例、论坛等。官方地址
项目热度
开源作者对项目的维护比较积极，提出的问题也能很快给予响应。开发者在使用过程中出现问题算是有一定保障。
书归正传，要想更自由的驾驭video.js，必然要了解内部原理。本文的宗旨就是通过核心代码演示讲解源码运行机制，如果有兴趣，不要离开，我们马上开始了……
由于源码量较大，很多同学不知道从何入手，我们先来说下它的组织结构。
其中control-bar，menu，popup，slider，tech，tracks，utils是目录，其他是文件。video.js是个非常优秀的面向对象的典型，所有的UI都是通过JavaScript对象组织实现的。
video.js是个入口文件，看源码可以从这个文件开始。
setup.js处理播放器的配置安装即data-setup属性。
poster-image.js处理播放器贴片。
plugins.js实现了插件机制。
player.js构造了播放器类也是video.js的核心。
modal-dialog.js处理弹层相关。
media-error.js定义了各种错误描述，如果想理解video.js对各语言的支持，这个文件是必看的，它是桥梁。
loading-spinner.js实现了播放器加载的标志，如果不喜欢默认加载图标在这里修改吧。
fullscreen-api.js实现各个浏览器的全屏方案。
extend.js是对node 继承 and babel's 继承的整合。
event-target.js 是event类和原生事件的兼容处理。
error-display.js 主要处理展示错误的样式设置。
component.js 是video.js框架中最重要的类，是所有类的基类，也是实现组件化的基石。
close-button.js 是对关闭按钮的封装，功能比较单一。
clickable-component.js 如果想实现一个支持点击事件和键盘事件具备交互功能的组件可以继承该类，它帮你做了细致的处理。
button.js 如果想实现一个按钮了解下这个类是必要的。
big-play-button.js 这个按钮是视频还未播放时显示的按钮，官方将此按钮放置在播放器左上角。
utils目录顾名思义是一些常用的功能性类和函数。
tracks目录处理的是音轨、字幕之类的功能。
tech目录也是非常核心的类，包括对video封装、flash的支持。
slider目录主要是UI层面可拖动组件的实现，如进度条，音量条都是继承的此类。
popup目录包含了对弹层相关的类。
menu目录包含了对菜单UI的实现。
control-bar目录是非常核心的UI类的集合了，播放器下方的控制器都在此目录中。
通过对组织结构的描述，大家可以，想了解video.js的哪一部分内容可以快速入手。如果还想更深入的了解如何正确使用这些类，请继续阅读继承关系一节。
video.js是JavaScript面向对象实现很经典的案例，你一定会好奇在页面上一个DOM节点加上data-setup属性简单配置就能生成一个复杂的播放器，然而在代码中看不到对应的HTML”模板“。其实这都要归功于”继承“关系以及作者巧妙的构思。
在组织结构一节有提到，所有类的基类都是Component类，在基类中有个createEl方法这个就是JavaScript对象和DOM进行关联的方法。在具体的类中也可以重写该方法自定义DOM内容，然后父类和子类的DOM关系也因JavaScript对象的继承关系被组织起来。
为了方便大家查阅video.js所有的继承关系，整理了两个图表，一个是完整版，一个是核心版。
完整版
核心板
video.js源码代码量比较大，我们要了解它的运行机制，首先确定它的主线是video.js文件的videojs方法，videojs方法调用player.js的Player类，Player继承component.js文件的Component类，最后播放器成功运行。
我们来看下videojs方法的代码、Player的构造函数、Component的构造函数，通过对代码的讲解基本整个运行机制就有了基本的了解，注意里面用到的所有方法和其他类对象参照组织结构一节细细阅读就可以掌握更多的运行细节。
videojs方法
Player的构造函数
Component的构造函数
这里通过主线把基本的流程演示一下，轮廓出来了，更多细节还请继续阅读。
一个完善和强大的框架都会继承插件运行功能，给更多的开发者参与开发的机会进而实现框架功能的补充和延伸。我们来看下video.js的插件是如何运作的。
插件的定义
如果之前用过video.js插件的同学或者看过插件源码，一定有看到有这句话videojs.plugin=pluginName，我们来看下源码：
不难看出，原理就是将插件（函数）挂载到Player对象的原型上，接下来看下是怎么执行的。
插件的运行
在Player的构造函数里判断是否有插件这个配置，如果有则遍历执行。
在继承关系一节中有提到video.js的所有DOM生成都不是采用的传统模板的方式，都是通过JavaScript对象的继承关系来实现的。
在Component基类中有个createEl方法，在这里可以使用DOM类生成DOM实例。每个UI类都会有一个el属性，会在实例化的时候自动生成，源代码在Component的构造函数中：
每个UI类有一个children属性，用于添加子类，子类有可能扔具有children属性，以此类推，播放器的DOM结构就是通过这样的JavaScript对象结构实现的。
在Player的构造函数里有一句代码this.initChildren();启动了UI的实例化。这个方法是在Component基类中定义的，我们来看下：
通过这段代码不难看出大概的意思是通过initChildren获取children属性，然后遍历通过addChild将子类实例化，实例化的过程会自动重复上述过程从而达到了”继承“的效果。不得不为作者的构思点赞。如果你要问并没看到DOM是怎么关联起来的，请继续看addChild方法的源码：
这段代码的大意就是提取子类的名称，然后获取类并实例化，最后通过最关键的一句话this.contentEl().insertBefore(component.el(), refNode);完成了父类和子类的DOM关联。相信inserBefore大家并不陌生吧，原生的DOM操作方法。
至此，video.js的精华部分都描述完了，不知道大家是否有收获。这里简单的总结一些阅读video.js框架源码的心得：
找准播放器实现的主线流程，方便我们有条理的阅读代码
了解框架代码的组织结构，有的放矢的研究相关功能的代码
理解类与类的继承关系，方便自己构造插件或者修改源码的时候知道从哪个类继承
理解播放器的运行原理，有利于基于Component构造一个新类的实现
理解插件的运行机制，学会自己构造插件还是有必要的
理解UI的实现原理，就知道自己如何为播放器添加视觉层面的东西了
看看我的源码解读吧，能帮一点是一点，哈哈
如今互联网时代，如果你连多媒体是什么都不知道的话，你真的白混了。多媒体是多种媒体的综合，一般包括文本，声音和图像等多种媒体形式。在互联网中，多媒体往往是指文字、图片、照片、声音、动画和影片，以及程式所提供的互动功能。相关内容，在HTML都有其对应的标签。
至今，我仍然记得，我之前一个老板跟我说过的一句话：一图胜千字。之前我还不太理解，直接他给我看一张美女照片时，我才懂了，而且是秒懂的那种。在HTML中，照片秀，用的是<img>标签，它的属性有：
src：指定图片源文件，可以是本地的，也可以是网络上的；
alt ：图片未加载成功的提示文字；
width：指定图片的宽度；
height：指定图片的高度；
border：指定图片的边框样式。
程序员最喜欢看美女，不知道是真是假？<br/>
<img src="mm.jpg" alt="图片不见了，你别伤心" width="880px" height="500px" />输出结果
在HTML5之前，想实现播放MP3等音频时，大多数是通过插件(比如 Flash)来播放的，你知道插件是要安装的，对用户来说，真是麻烦。好在HTML5补充了在网页上嵌入音频元素的标签<audio>,这才让程序员日子好过了一些。
<audio>标签，支持常见的音频格式：MP3、Ogg和Wav。<audio>使用多个<source>元素链接不同的音频文件，浏览器将使用第一个支持的音频文件，如果都不支持，那就显示提示文字。
<audio>的常用属性autoplay：自动播放；controls：显示播放/暂停按钮；loop：循环播放；muted：静音，属性切换可通过javascript进行控制。
<source>的属性用的较多的是src：音频源；type： MIME 类型。
为了测试效果，建议你在网上随便找一个mp3文件，下载或拷贝url地址都可以。
<audio controls>
<source src="niu.ogg" type="audio/ogg">
<source src="niu.mp3" type="audio/mpeg">
您的浏览器不支持直接播放音频。
</audio>输出结果
在HTML5提供了支持视频元素的标签<video> ，支持的视频格式有MP4、WebM和Ogg。相关属性除了width指定视频宽度、height指定高度之外，其他属性，同<audio>标签是一模一样的。方法也是一模一样的。
<video width="960" height="540" controls>
<source src="mv.mp4" type="video/mp4">
<source src="mv.ogg" type="video/ogg">
您的浏览器不支持直接播放视频。
</video>输出结果
好了，有关html多媒体的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。
#前端##HTML5##多媒体##程序员##视频#
*请认真填写需求信息，我们会在24小时内与您取得联系。
