Web Tools #555 - CSS/HTML Tools, Git/CLI, ChatGPT

The Element.innerHTML property is as old as time, and most of you who have been coding JavaScript for a while have likely used it. Nowadays, the property is discouraged due to security concerns. For example, MDN states the following regarding using innerHTML to replace content:

The problem with this advice is that the setHTML() method is not currently supported by most modern browsers. According to the browser compatibility chart data, it had support in previous versions of Chromium browsers and others but support was dropped. 

I'm guessing this is (ironically) due to some type of security concern with the method somehow being exploited, so support has been dropped until the problem is resolved. So it's a good idea to keep setHTML() in the back of our minds for future use, but for now other solutions (like safely using innerHTML) will have to be relied on.

Another useful tidbit that I found on the MDN article for innerHTML is a neat little script that lets you easily create a 'view source' button for the current web page. The code looks something like this:

I've aliased the document.document­Element object to abbreviate the code a bit but that's the gist of the little script. Try it on CodePen here.

The main thing to notice is that I'm using innerHTML to replace the contents of the current document with a pair of <pre></pre> tags. Within those tags the script uses the replace() method to replace the first angle bracket of every HTML tag with its encoded equivalent. This is enough to essentially encode the HTML, as the closing angle bracket will be assumed to be encoded as well.

The only problem with the demo is that there's no way to return to the original HTML without refreshing the page. I could build a mechanism to regenerate the original DOM elements, but this simple demo should suffice.

I also noticed that adding any CSS to the <pre> element in the CSS panel won't work, so if you want to (for example) wrap the lines, you'd have add some inline styles directly onto the <pre> element in the JavaScript or else find a way to successfully inject the styles onto the newly added element.

Now on to this week's tools!