草庐IT

一个奇怪的 Bug

阿_兵 2023-03-28 原文

一个奇怪的 Bug

非常感谢小赵同学给我反馈的这个 Bug ??

在开始讲解前先考考你们 Javascript 基础,单看代码你觉得它会输出什么内容?答案后面揭晓。

'Hello'.replace('ello', '#$&%')

话说某一天我突然收到一封邮件,一位同学跟我说我的站点炸代码了,吓得我突然就从床上翻了个身——感觉充电线有点勒脖子我又翻了回去……

一波详询过后我了解到是我的自建博客站点,也就是现在在写文章的这个,它在某个页面上会显示一部分代码在页面的下方。像这样:

心情突然就不好了——死去的 Bug 突然又回来攻击我了。。

这个问题其实之前出现过,但我后来给修好了,今天又出现了我第一时间就抓紧复现,但发现我自己访问好像没啥问题,定位到最后发现是我的服务端的渲染脚本的问题。所以如果你是直接进入站点再浏览文章是不会遇到的,多半我之前就是这样才以为它修复了吧。复现的方式也很简单:你得直接由某个链接进入到某一篇博文才会触发,这就很有意思啦!基本可以说明它是由于数据的原因才会触发的。

因为我这个服务端渲染是自己用 Express 写的,不是用的现成的框架,所以有的地方可能是会有问题的也正常。在一波探索之后定位到一处代码块,调试的结果非常奇怪。大致就是:

// 我的页面模板
const template = fn();

// 渲染出来的页面样式
const css = fn();

// 当前访问页面所用到的 React state
const state = fn();

// 将所有内容由不同的锚点定位,替换到模板中去,每个锚点有且只有一个
const page = template
  .replace('css anchor', css)
  .replace('state anchor', state)

console.log(template.includes('state anchor'))
// true
console.log(page.includes('state anchor'))
// true
console.log(state.includes('state anchor'))
// false

见鬼了!页面中的描点在替换后还是存在?然后我就在后面又给加了另外一条测试:

const page = template
  .replace('css anchor', css)
  .replace('state anchor', state)
  .replace('state anchor', 'f*** me')

console.log(template.includes('state anchor'))
// true
console.log(page.includes('state anchor'))
// false
console.log(state.includes('state anchor'))
// false

就挺奇怪的,我再替换了一次它就舒服了不见了。。接着我顺着描点替换的位置找去,最终发现它在某段文本中的这个位置:

" Use <Space-E> to open explorer
" Using Coc-explorer
noremap <space>e :CocCommand explorer<CR>
" Close Coc-explorer if it is the only window
autocmd BufEnter * if (&ft == 'coc-explorer' && winnr("$") == 1) | q | endif

这段是我之前讲 Vim 和 Coc 的文章。重点注意这个 winnr("$"),由于页面在渲染中做了转义处理,所以拿到的数据其实是 &quot;$&quot;. 也就是两个引号给替换成 &quot; 了。而我上面用的是 replace 去替换的内容。而在 replace 方法的替换文本中你猜怎么着?$& 代表的是匹配内容本身!所以我的实际替换结果会是:winnr(&quot;f*** mequot;)...

开始讲解咯 ~

其实 Javascript 中字符串的 replace 函数,在传入参数为字符串时是有特定的转义字符(变量名)的。比如上面的,如果你写 '$&' 那它就会把你的查找符给替换进去。类似的还有其他一些:

$$
是插入一个 "$"。

$&
是插入匹配的子串。

$`
是插入当前匹配的子串左边的内容。

$'
是插入当前匹配的子串右边的内容。

$n
假如第一个参数是 RegExp 对象,并且 n 是个小于 100 的非负整数,
那么插入第 n 个括号匹配的字符串。提示:索引是从 1 开始。如果不存在第 n 个分组,
那么将会把匹配到到内容替换为字面量。比如不存在第 3 个分组,就会用“$3”替换匹配到的内容。

$<Name>
这里 Name 是一个分组名称。如果在正则表达式中并不存在分组(或者没有匹配),
这个变量将被处理为空字符串。只有在支持命名分组捕获的浏览器中才能使用。

当然你也可以不传字符串传函数进去。这就不展开了,可以到这里仔细了解:MDN - String.prototype.replace()

换到实际情况就是因为我插入状态的锚点是个 script 标签,所以 Html 的内容就给截断了。跟跨站攻击(XSS)的原理有点像吧,所以它才只是页面下方出现了被断开的代码块而正文的显示是正常的。

知道是什么问题就好修了嘛!自己写一个不会被任何字符串转义的替换函数就好了嘛。

具体怎么写你可以自己想想看 ?

然后就是开篇的问题,现在知道答案是什么了吗?

'Hello'.replace('ello', '#$&%')
// 'H#ello%'

好了今天就聊到这儿了~

有关一个奇怪的 Bug的更多相关文章

  1. ruby - 使用 Vim Rails,您可以创建一个新的迁移文件并一次性打开它吗? - 2

    使用带有Rails插件的vim,您可以创建一个迁移文件,然后一次性打开该文件吗?textmate也可以这样吗? 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件,这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails,您可以创建一个新的迁移文件并一次性打开它吗?,我们在StackOverflow上找到一个类似的问题: https://sta

  2. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前,我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它,但这似乎不是“ruby方式”,我将需要在不久的将来访问更多模型。这可能会变得很脏,是否有针对这种情况的任何技术?注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展,本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向,这似乎很麻烦。最终从任何

  3. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller,client和test_client。客户端Controller已经构建,我想创建一个test_clientController,我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集,然后呈现客户端Controller的索引View,以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  4. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象,为什么它会起作用? - 2

    如果您尝试在Ruby中的nil对象上调用方法,则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而,有一个tryRails中的方法,如果它被发送到一个nil对象,它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常? 最佳答案 像Ruby中的所有其他对象

  5. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串? - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串?SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复?

  6. ruby-on-rails - Rails - 从另一个模型中创建一个模型的实例 - 2

    我有一个正在构建的应用程序,我需要一个模型来创建另一个模型的实例。我希望每辆车都有4个轮胎。汽车模型classCar轮胎模型classTire但是,在make_tires内部有一个错误,如果我为Tire尝试它,则没有用于创建或新建的activerecord方法。当我检查轮胎时,它没有这些方法。我该如何补救?错误是这样的:未定义的方法'create'forActiveRecord::AttributeMethods::Serialization::Tire::Module我测试了两个环境:测试和开发,它们都因相同的错误而失败。 最佳答案

  7. ruby - 用 Ruby 编写一个简单的网络服务器 - 2

    我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不,不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本,提供另一个脚本,它将在其标准输入上获取请求,并在其标准输出上返回完整的响应。到目前为止一切顺利,但事实证明这真的很脆弱,因为它在第二个请求上中断并出现错误:/usr/b

  8. ruby - 一个 YAML 对象可以引用另一个吗? - 2

    我想让一个yaml对象引用另一个,如下所示:intro:"Hello,dearuser."registration:$introThanksforregistering!new_message:$introYouhaveanewmessage!上面的语法只是它如何工作的一个例子(这也是它在thiscpanmodule中的工作方式。)我正在使用标准的ruby​​yaml解析器。这可能吗? 最佳答案 一些yaml对象确实引用了其他对象:irb>require'yaml'#=>trueirb>str="hello"#=>"hello"ir

  9. ruby - Rails 关联 - 同一个类的多个 has_one 关系 - 2

    我的问题的一个例子是体育游戏。一场体育比赛有两支球队,一支主队和一支客队。我的事件记录模型如下:classTeam"Team"has_one:away_team,:class_name=>"Team"end我希望能够通过游戏访问一个团队,例如:Game.find(1).home_team但我收到一个单元化常量错误:Game::team。谁能告诉我我做错了什么?谢谢, 最佳答案 如果Gamehas_one:team那么Rails假设您的teams表有一个game_id列。不过,您想要的是games表有一个team_id列,在这种情况下

  10. ruby - 将一个超薄文件包含在另一个超薄文件中 - 2

    我在一个静态网站上工作(因此没有真正的服务器支持),我想在另一个网站中包含一个小的细长片段,可能会向它传递一个变量。这可能吗?在rails中很容易,虽然是render方法,但我不知道如何在slim上做(显然load方法不适用于slim)。 最佳答案 Slim包含Include插件,允许在编译时直接在模板文件中包含其他文件:require'slim/include'includepartial_name文档可在此处获得:https://github.com/slim-template/slim/blob/master/doc/incl

随机推荐