网页开发者工具中发现的Ruffle脚本注入解析

当在浏览器开发者工具中发现未曾手动添加的脚本（特别是与Ruffle相关的Flash模拟代码）被注入到网页头部时，这通常是由浏览器扩展、网站依赖或本地开发环境中的特定工具引起的。本文将详细解析这段代码的含义、Ruffle库的作用及其出现的原因，并提供相应的理解和排查思路，帮助开发者识别并理解这种“异常”现象。

1. 异常脚本注入现象描述

在使用浏览器（如Firefox）的开发者工具检查网页时，有时会发现在HTML文档的

标签内，出现一段看似“陌生”的<script>代码块。这段代码并非由开发者主动编写或引入，却赫然显示在DOM结构中。其内容通常包含RuffleMimeType、RufflePlugin等类的定义，并最终通过install_plugin(FLASH_PLUGIN)调用，模拟Flash插件的行为。<p>以下是这类注入脚本的典型示例：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&lt;script&gt;(function(){class RuffleMimeType{constructor(a,b,c){this.type=a,this.description=b,this.suffixes=c}}class RuffleMimeTypeArray{constructor(a){this.__mimetypes=[],this.__named_mimetypes={};for(let b of a)this.install(b)}install(a){let b=this.__mimetypes.length;this.__mimetypes.push(a),this.__named_mimetypes[a.type]=a,this[a.type]=a,this[b]=a}item(a){return this.__mimetypes[a]}namedItem(a){return this.__named_mimetypes[a]}get length(){return this.__mimetypes.length}}class RufflePlugin extends RuffleMimeTypeArray{constructor(a,b,c,d){super(d),this.name=a,this.description=b,this.filename=c}install(a){a.enabledPlugin||(a.enabledPlugin=this),super.install(a)}}class RufflePluginArray{constructor(a){this.__plugins=[],this.__named_plugins={};for(let b of a)this.install(b)}install(a){let b=this.__plugins.length;this.__plugins.push(a),this.__named_plugins[a.name]=a,this[a.name]=a,this[b]=a}item(a){return this.__plugins[a]}namedItem(a){return this.__named_plugins[a]}get length(){return this.__plugins.length}}const FLASH_PLUGIN=new RufflePlugin(&quot;Shockwave Flash&quot;,&quot;Shockwave Flash 32.0 r0&quot;,&quot;ruffle.js&quot;,[new RuffleMimeType(&quot;application/futuresplash&quot;,&quot;Shockwave Flash&quot;,&quot;spl&quot;),new RuffleMimeType(&quot;application/x-shockwave-flash&quot;,&quot;Shockwave Flash&quot;,&quot;swf&quot;),new RuffleMimeType(&quot;application/x-shockwave-flash2-preview&quot;,&quot;Shockwave Flash&quot;,&quot;swf&quot;),new RuffleMimeType(&quot;application/vnd.adobe.flash-movie&quot;,&quot;Shockwave Flash&quot;,&quot;swf&quot;)]);function install_plugin(a){navigator.plugins.install||Object.defineProperty(navigator,&quot;plugins&quot;,{value:new RufflePluginArray(navigator.plugins),writable:!1}),navigator.plugins.install(a),0&lt;a.length&amp;&amp;!navigator.mimeTypes.install&amp;&amp;Object.defineProperty(navigator,&quot;mimeTypes&quot;,{value:new RuffleMimeTypeArray(navigator.mimeTypes),writable:!1});for(var b=0;b&lt;a.length;b+=1)navigator.mimeTypes.install(a[b])}install_plugin(FLASH_PLUGIN);})();&lt;/script&gt;</pre></div><p>这段代码的核心目的是在浏览器中模拟Flash Player的存在，以便能够运行或识别Flash内容。<h3>2. Ruffle：Flash Player的现代替代方案<p>这段被注入的脚本实际上是<a href="https://www.php.cn/link/bbe0c3bf910dea29774c3926f51b7f91" rel="nofollow" target="_blank" >Ruffle库的一部分。Ruffle是一个用Rust语言编写的开源Flash Player<a style="color:#f60; text-decoration:underline;" title= "模拟器"href="https://www.php.cn/zt/45416.html" target="_blank">模拟器，旨在将Flash内容带回现代网络，使其能够在没有Adobe Flash Player插件的情况下运行。<p>自2020年底Adobe终止对Flash Player的支持以来，许多依赖Flash的旧网站和内容都变得无法访问。Ruffle的出现正是为了解决这一问题，它通过在浏览器中提供一个兼容层，使得浏览器能够“看到”并尝试执行Flash（SWF）文件。<h3>3. Ruffle脚本为何会被注入？<p>Ruffle脚本的出现通常不是因为您直接在项目中引入了它（除非您明确需要Flash兼容性）。更常见的原因是：<ul><li><strong>浏览器扩展或插件： 许多浏览器扩展为了提供某种特定功能（例如，访问旧版网站、内容归档或媒体播放）可能会集成Ruffle。当这些扩展被激活时，它们会将Ruffle脚本注入到您正在访问的网页中，以检测并处理潜在的Flash内容。<li><strong>网站自身的依赖： 某些网站为了兼容性考虑，可能会在服务器端或通过其自身的JavaScript代码动态地将Ruffle加载到页面中。这在一些仍然托管Flash内容的网站上较为常见。<li><strong>本地开发环境/工具： 如果您正在使用某些特定的本地开发服务器、代理工具或构建工具，它们可能为了某种目的（如测试旧版内容）而集成了Ruffle，并在提供网页服务时将其注入。<h3>4. 功能与目的<p>注入的Ruffle脚本主要执行以下操作：<ul><li><strong>模拟浏览器API： 它创建了RuffleMimeType、RufflePlugin等类，并修改navigator.mimeTypes和navigator.plugins对象，使其看起来像浏览器安装了“Shockwave Flash”插件。<li><strong>注册Flash MIME类型： 脚本注册了Flash相关的MIME类型（如<a style="color:#f60; text-decoration:underline;" title= "app"href="https://www.php.cn/zt/16186.html" target="_blank">application/x-shockwave-flash），使得浏览器在遇到这些类型的内容时，能够将其与Ruffle模拟的插件关联起来。<li><strong>启用Flash内容： 最终目的是让浏览器能够识别并尝试通过Ruffle来播放或显示页面中的Flash（.swf）内容，而无需实际的Adobe Flash Player。<h3>5. 注意事项与排查<ul><li><strong>安全性： Ruffle本身是一个开源且广受认可的项目，旨在安全地模拟Flash。因此，其代码本身通常是安全的。然而，如果注入Ruffle的来源是一个恶意扩展或被篡改的网站，那么潜在的风险可能来自注入行为的载体，而非Ruffle本身。<li><strong>性能影响： 注入额外的脚本可能会对页面加载和运行时性能产生轻微影响，尽管Ruffle的代码量相对较小。<li><strong>排查来源：<ul><li><strong>禁用浏览器扩展： 尝试禁用所有浏览器扩展，然后逐一重新启用，以确定是哪个扩展导致了脚本注入。这是最常见的排查方法。<li><strong>在不同浏览器中测试： 在其他浏览器（如Chrome、Edge）中打开同一页面，看是否存在相同的注入。如果只在特定浏览器中出现，可能与该浏览器的配置或扩展有关。<li><strong>检查网站源代码： 使用开发者工具的“网络”面板，检查页面加载了哪些外部脚本。有时，Ruffle脚本会作为独立文件加载。<li><strong>隐私模式/无痕模式： 在浏览器的隐私模式或无痕模式下测试，因为这些模式通常会禁用大部分扩展。<h3>6. 总结<p>当您在开发者工具中看到类似Ruffle的Flash模拟脚本被注入时，不必过于恐慌。这通常是浏览器扩展或网站为了兼容旧版Flash内容而采取的措施。理解其来源和目的，可以帮助您更好地管理浏览器环境，并在必要时进行排查。如果确认是由某个扩展引起且您不需要Flash兼容性，可以选择禁用该扩展以保持页面的纯净性。</script>

以上就是网页开发者工具中发现的Ruffle脚本注入解析的详细内容，更多请关注php中文网其它相关文章！