安全地将html字符串注入 <pre> 标记保持语法突出显示完整

Question

I have string containing json data built dynamically with some html inserted for syntax highlighting.

console.log(highlightedJson);
{
    <span class="key">"time":</span> <span class="string">"11:09:09 PM"</span>,
    <span class="key">"milliseconds_since_epoch":</span> <span class="number">1406070549038</span>,
    <span class="key">"date":</span> <span class="string">"07-22-2014"</span>
}

Styling to be applied to classes:

pre {
    outline: 1px solid #ccc; 
    padding: 5px; 
    margin: 5px; 
    white-space: pre-wrap;       
    white-space: -moz-pre-wrap;  
    white-space: -pre-wrap;      
    white-space: -o-pre-wrap;    
    word-wrap: break-word;       
}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }

Trying to inject this as html into a <pre> dom element ..

var pre = document.createElement('pre');

// also tried this, but again, syntax highlighting is not rendered
//pre.appendChild(highlightedJson));

pre.appendChild(document.createTextNode(highlightedJson))
document.getElementById("body").appendChild(pre);

When this code runs, the string is appended to <pre> , but syntax highlighting is not showing.

• I know using pre.innerHTML = highlightedJson; gets the result I'm after but this html injection method is discouraged in firefox addons.
  
• Project is not using jquery

Can anyone suggest an approach?

Answer 1

You can try this which is used for innerHTML problems with IE. It might also be useful for this situation.

function stringToHTML(str){
    var frag = document.createDocumentFragment(),
        div = document.createElement('div');
    div.innerHTML = str;
    while(div.firstChild){
        frag.appendChild(div.firstChild);
    }
    return frag;
}

var pre = document.createElement('pre');
pre.appendChild(stringToHTML(highlightedJson));
document.getElementById("body").appendChild(pre);

This is my suggestion because of your requirement of a string being converted to render-able html. Because you can't just have html from a string innerHTML is the best bet, but because of security implications I see this as an alternative. If you need to you can run checks in the while loop to exclude tags you don't want, or just white list your span tags.

If you really need the security try html parser then. Google about this stuff.

Answer 2

var htmlStr = '<div><span style="color:#FF0;">h</span>ello</div>';
var range = document.createRange();
var anyElement = document.body;
range.selectNode(anyElement);
var docFrag = range.createContextualFragment(htmlStr);
document.body.appendChild(docFrag);

http://jsfiddle.net/KD2RR/