React 集成jsoneditor后，password格式保护json数据的敏感信息

1.集成jsoneditor到React

2.修改代码

(1).添加Option

(2).修改Node.js文件

(3).修改util.js文件

3.扩展：

1.集成jsoneditor到React

关于怎样将jsoneditor集成到React中，请参考文章：https://blog.csdn.net/wdquan19851029/article/details/115869264，本文只讲怎样修改jsoneditor源码，使用password格式保护json敏感信息。

从github下载源代码：https://github.com/josdejong/jsoneditor

2.修改代码

我们得考虑，真正使用的时候，我们一般只是需要保护部分敏感信息，没有必要保护所有信息，那样根本什么信息都看不到，所以我们只考虑保护部分信息。

看我们的json数据，其中有需要保护的数据 "sensitive-data".

        const initialJson = {"Array": [1, 2, 3],"Boolean": true,"Null": null,"Number": 123,"Object": {"a": "b", "c": "d"},"MultiLevel":{"multi":{"e": "f","h": "h"}},"String": "Hello World","sensitive-data": {"sensitive1": "sensitive1","sensitive2": "sensitive2","sensitive3": "sensitive3"}}

(1).添加Option

需要保护的信息，我们设计以option的形式传进去。我们自己添加一个新的参数sensitiveDataLabel ，设置其值为"sensitive-data"

        const options = {mode: 'tree',sensitiveDataLabel: 'sensitive-data',onChangeJSON: (data)=>{console.log('JSONeditor:change:',data);}}

(2).修改Node.js文件

然后修改Node.js的_createDomValue ()函数：其中注释为"新增的代码"，是我做的修改，主要是判断parent node的name是不是与我们传进来的option sensitiveDataLabel 相等，如果相等，那么就创建一个input标签，type为password，用来保护敏感信息。

  /*** Create an editable value* @private*/_createDomValue () {let domValueif (this.type === 'array') {domValue = document.createElement('div')domValue.textContent = '[...]'} else if (this.type === 'object') {domValue = document.createElement('div')domValue.textContent = '{...}'} else {if (!this.editable.value && isUrl(this.value)) {// create a link in case of read-only editor and value containing an urldomValue = document.createElement('a')domValue.href = this.valuedomValue.innerHTML = this._escapeHTML(this.value)} else {// create an editable or read-only div//新增的代码let isSensitiveData = false//判断是否敏感数据方式1,只看当前node的parent，这是不合适的，因为可能有嵌套//if(this.parent) {//let sensitiveDataLabel = ""//if(this.editor.options.sensitiveDataLabel) sensitiveDataLabel = this.editor.options.sensitiveDataLabel//if(this.parent.getName() && this.parent.getName() == sensitiveDataLabel){//isSensitiveData = true//}//}//判断是否敏感数据方式2，因为敏感数据也有可能嵌套，所以不能只看当前node的parent，而要看其所有的json路径let nodePaths = this.getNodePath()let sensitiveDataLabel = ""if(this.editor.options.sensitiveDataLabel) sensitiveDataLabel = this.editor.options.sensitiveDataLabelfor(var i = 0; i < nodePaths.length; i++) {if(nodePaths[i].field && nodePaths[i].field == sensitiveDataLabel){isSensitiveData = truebreak;}}if(isSensitiveData){//新增的代码domValue = document.createElement('input')domValue.type = "password"domValue.placeholder=""domValue.autocomplete = "new-password" //防止自动填充保存过的登录密码domValue.style.border = "none" //去掉输入框的边框domValue.contentEditable = this.editable.valuedomValue.spellcheck = falsedomValue.value = this._escapeHTML(this.value)}else{domValue = document.createElement('div')domValue.contentEditable = this.editable.valuedomValue.spellcheck = falsedomValue.innerHTML = this._escapeHTML(this.value)}}}return domValue}

重新编译源代码，并导入React工程之后，可以看到效果：

(3).修改util.js文件

但是当进行修改的时候，发现修改无效，头疼，继续修改代码，修改util.js文件中的getInnerText (element, buffer)函数。

注释为"新增的代码"部分，就是我做的修改，将用户在上面界面的修改，赋给child这个Node，因为以前都是用<div>标签去显示value，现在改成了<input>，按照以前的方式，是用innerHTML属性获取值，但是现在需要使用value属性去获取值。

export function getInnerText (element, buffer) {const first = (buffer === undefined)if (first) {buffer = {_text: '',flush: function () {const text = this._textthis._text = ''return text},set: function (text) {this._text = text}}}// text node//console.log("Debug: getInnerText() -> element.nodeValue : " + element.nodeValue)if (element.nodeValue) {// remove return characters and the whitespace surrounding return charactersconst trimmedValue = element.nodeValue.replace(/\s*\n\s*/g, '')if (trimmedValue !== '') {return buffer.flush() + trimmedValue} else {// ignore empty textreturn ''}}// divs or other HTML elementsif (element.hasChildNodes()) {const childNodes = element.childNodeslet innerText = ''for (let i = 0, iMax = childNodes.length; i < iMax; i++) {const child = childNodes[i]//新增的代码if(element.type == "password" && element.value){child.nodeValue = element.value;}if (child.nodeName === 'DIV' || child.nodeName === 'P') {const prevChild = childNodes[i - 1]const prevName = prevChild ? prevChild.nodeName : undefinedif (prevName && prevName !== 'DIV' && prevName !== 'P' && prevName !== 'BR') {if (innerText !== '') {innerText += '\n'}buffer.flush()}innerText += getInnerText(child, buffer)buffer.set('\n')} else if (child.nodeName === 'BR') {innerText += buffer.flush()buffer.set('\n')} else {innerText += getInnerText(child, buffer)}}return innerText}// br or unknownreturn ''
}

3.扩展：

如果除了"sensitive-data"数据，还有别的数据需要保护，怎么办？其实非常简单，传参数的时候，传入一个数组 sensitiveDataLabel: ['sensitive-data', 'sensitive-data1', 'sensitive-data2']，然后在Node.js中判断的时候，将if(nodePaths[i].field && nodePaths[i].field == sensitiveDataLabel) 改为if(nodePaths[i].field && sensitiveDataLabel.indexOf(nodePaths[i].field) > -1)，大体就是这样子，有需要的话，请自己进行修改。