草庐IT

js原型链污染详解

F12-blog 2023-03-28 原文

前言

之前打某湖论剑，两道js的题，给我整懵逼了，发现以前都没对js做过多少研究，趁着被毒打了，先研究一波js原型链，未雨绸缪。

基础

protype

首先我们研究js原型链，得搞明白原型是什么，这里借用p神的举的一个例子：
在javascript中，我们定义一个类，需要以定义“构造函数”的方式来定义：

function Foo() {
    this.bar = 1
}

new Foo()

Foo()函数的内容就是构造函数的内容，this.bar是Foo的一个属性，学过c++的应该很容易理解，而且后面对原型链的利用也可以仿造c++类的思想来理解。

一个类必然有方法，我们可以在构造函数里定义方法：

function Foo() {
    this.bar = 1
    this.show = function() {
        console.log(this.bar)
    }
}

在js里，这样定义有一个特点，就是这个方法并不是绑定在类上，而是每创建一个对象，这个方法就会定义一次，这样就很浪费资源，我们要让它只定义一次，就需要用到原型prototype,这个prototype可以认为是一个类的属性，通过类创建的对象都将"继承"prototype的内容。

function Foo() {
    this.bar = 1
}

Foo.prototype.show = function show() {
    console.log(this.bar)
}

__proto__

那么__proto__是干什么用的？原来由类实例化的对象是无法直接访问到类的原型也就是prototype,我们可以看到foo没有prototype

这时__proto__就是对象访问类原型的媒介了

以上大概就是原型的内容，读者把原型的概念弄懂后再去看原型链污染会有不一样的结果

原型链继承

以上讲的prototype在js里其实主要是用来实现继承机制，这个继承跟c++的继承不太一样，js的继承可以改掉Object类导致原型链污染，而c++的继承是可以对父类的方法进行进行重写或重载，但不会直接就把父类给改写了，因为这个特性，这才有了原型链污染的诞生。这里举个例子：

function Father() {
    this.first_name = 'Donald'
    this.last_name = 'Trump'
}

function Son() {
    this.first_name = 'Melania'
}

Son.prototype = new Father()

let son = new Son()
console.log(`Name: ${son.first_name} ${son.last_name}`)

这里Son继承了Father的last_name

这里通过__proto__给Object添了个last_name

这里推导一下：
son.__proto__ == Son.prototype
son.__proto__.__proto__ == Father.prototype
son.__proto__.__proto__.__proto__ == Object
所以后面我们new的a，它有一个last_name是继承Object的，这里有趣的是，改写了Object后，Father.last__name == john，但是son.last_name == Trump，直接看Father函数，其实它的last_name并没有变化

这就有趣了,但重新new Father，它的last_name其实也是没变的

但我们还是成功污染了的，Object多了个last_name属性，此后新建的类都将继承这个属性，在某些地方是会造成危害的

原型链污染实例

在什么地方我们可以使用原型链污染？其实当有我们可以控制的"键名"，并存在有赋值修改操作的地方，我们可以实现这个操作，这里举个js的merge函数经典例子：

function merge(target, source) {
    for (let key in source) {
        if (key in source && key in target) {
            merge(target[key], source[key])
        } else {
            target[key] = source[key]
        }
    }
}

以上是一个简单的合并函数，我们可以看到target[key] = source[key]，其实这个地方就存在原型链污染,如果key是__proto__的话，是不是就能修改到Object，这里给个例子：

let o1 = {}
let o2 = {a: 1, "__proto__": {b: 2}}
merge(o1, o2)
console.log(o1.a, o1.b)

o3 = {}
console.log(o3.b)

这里我们合并成功了，但是并没有污染到Object，原因是__proto__没有被当成键名,而是当成原型,也就是遍历键名的时候只有a,b是键名。

为了让__proto__也被当成键名，我们可以把o2的值设置成json的格式，遍历json的时候，__proto__就会被当成键名，从而改写Object,例子如下:

let o1 = {}
let o2 = JSON.parse('{"a": 1, "__proto__": {"b": 2}}')
merge(o1, o2)
console.log(o1.a, o1.b)

o3 = {}
console.log(o3.b)

成功改写Object，导致o3有了b属性

总结

以上就是js原型链的基础内容，把基础打好，之后遇见原型链的题将会成长很快。

详解原型code2746479proto网络安全

有关js原型链污染详解的更多相关文章

  1. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  2. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  3. node.js - 如何在 Travis CI 上的一个项目中运行 Node.js 和 Ruby 测试 - 2

    我有一个包含多个组件的存储库，其中大部分是用JavaScript(Node.js)编写的，一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread，目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标，所以maketest在每

  4. 物联网MQTT协议详解 - 2

    一、什么是MQTT协议MessageQueuingTelemetryTransport：消息队列遥测传输协议。是一种基于客户端-服务端的发布/订阅模式。与HTTP一样，基于TCP/IP协议之上的通讯协议，提供有序、无损、双向连接，由IBM（蓝色巨人）发布。原理：（1）MQTT协议身份和消息格式有三种身份：发布者（Publish）、代理（Broker）（服务器）、订阅者（Subscribe）。其中，消息的发布者和订阅者都是客户端，消息代理是服务器，消息发布者可以同时是订阅者。MQTT传输的消息分为：主题（Topic）和负载（payload）两部分Topic，可以理解为消息的类型，订阅者订阅（Su

  5. Tcl脚本入门笔记详解（一） - 2

    TCL脚本语言简介•TCL（ToolCommandLanguage）是一种解释执行的脚本语言（ScriptingLanguage）,它提供了通用的编程能力：支持变量、过程和控制结构；同时TCL还拥有一个功能强大的固有的核心命令集。TCL经常被用于快速原型开发，脚本编程，GUI和测试等方面。•实际上包含了两个部分：一个语言和一个库。首先，Tcl是一种简单的脚本语言，主要使用于发布命令给一些互交程序如文本编辑器、调试器和shell。由于TCL的解释器是用C\C++语言的过程库实现的，因此在某种意义上我们又可以把TCL看作C库，这个库中有丰富的用于扩展TCL命令的C\C++过程和函数，所以，Tcl是

  6. jquery - 在 Rails 中从原型(prototype)切换到 jquery，助手呢？ - 2

    我目前从prototype切换到jquery主要是为了支持简单的ajax文件上传。我使用:https://github.com/indirect/jquery-rails95%的javascript代码是由railshelper编写的，例如:-remote_function-render:updatedo|page|-page.replace_html'id',:partial=>'content'-page['form']['name']=something-page.visual_effect:highlight,'head_success'...我知道我必须为Jquery重写5%

  7. node.js - 从未编写过任何自动化测试，我应该如何开始行为驱动开发？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。多年来，我一直在使用多种语言进行编程，并且认为自己总体上相当擅长。但是，我从未编写过任何自动化测试:没有单元测试，没有TDD，没有BDD，什么都没有。我已经尝试开始为我的项目编写适当的测试套件。我可以看到在进行任何更改后能够自动测试项目中所有代码的理论值(value)。我可以看到像RSpec和Mocha这样的测试框架应该如何使设置和运行所述测试变得相当容易

  8. ruby-on-rails - 将 Angular JS 与 Rails 集成 - 2

    我需要一些指导来了解如何将Angular整合到rails中。选择Rails的原因:我喜欢他们偏执的做事方式。还有迁移，gem真的很酷。使用angular的原因:我正在研究和寻找最适合SPA的框架。Backbone似乎太抽象了。我不得不在Angular和Ember之间做出选择。我首先开始阅读Angular，它对我来说很有意义。所以我从来没有去读过关于ember的文章。使用Angular和Rails的原因:我研究并尝试使用小型框架，例如grape、slim(是的，我也使用php)。但我觉得需要坚持项目的长期范围。我个人喜欢用Rails的方式做事。这就是我需要帮助的地方，我在Rails4中有

  9. node.js - 如何比较图像并确定哪个内容更多？ - 2

    目标:我想从动画GIF中抓取最佳帧并将其用作静态预览图像。我相信最好的帧是显示最多内容的帧-不一定是第一帧或最后一帧。以这张动图为例:--这是第一帧:--这是第28帧:很明显，第28帧很好地代表了整个GIF。我如何以编程方式确定一帧是否比另一帧具有更多像素/内容？如果您能向我指出任何想法、想法、包/模块或文章，我们将不胜感激。 最佳答案 实现此目的的一种直接方法是估计entropy每个图像的帧，并选择具有最大熵的帧。在信息论中，熵可以被认为是图像的“随机性”。单一颜色的图像是非常可预测的，分布越平坦，越随机。这与Arthur-R描述

  10. 【详解】Docker安装Elasticsearch7.16.1集群 - 2

    开门见山|拉取镜像dockerpullelasticsearch:7.16.1|配置存放的目录#存放配置文件的文件夹mkdir-p/opt/docker/elasticsearch/node-1/config#存放数据的文件夹mkdir-p/opt/docker/elasticsearch/node-1/data#存放运行日志的文件夹mkdir-p/opt/docker/elasticsearch/node-1/log#存放IK分词插件的文件夹mkdir-p/opt/docker/elasticsearch/node-1/plugins若你使用了moba，直接右键新建即可如上图所示依次类推创建

随机推荐