Prevent html Injections with Javascript/Typescript

Question

So I have a simple app where a user can insert a URL into an iframe window. Problem is this allows for html injection which screws up the display.

Is there a simple way to prevent this from happening? Like a regex escape function etc?

TS/JS code for iframe window:

public renderPlot(): void {
    let ht: string = '';

    let url: string = this.configPBg[EConfigPKeys.IFrameAddress];

    if (url == undefined || url.length === 0) {
        this.renderWarningMessage('No valid address configured');
        return;
    }

    // auto stream with url like this : https://www.youtube.com/embed/jdnhfg?&autoplay=1&mute=1
    ht += '<iframe width="' + this.chartWindowSize.width + '" height="' + this.chartWindowSize.plotHeight + '" ';
    ht += 'src="' + url + '" ';
    ht += 'frameborder="0" ';
    ht += '>';
    ht += '</iframe>';

I tried adding this but failed to catch anything:

url.replace(/</g, "&lt;").replace(/>/g, "&gt;");

the URL entry form looks like this:

In addition to using [the sandbox attribute](https://caniuse.com/#search=sandbox), you probably don't want to build your iframe content from string, but using DOM manipulation functions where you create an `iframe` element and then assign it content using DOM building functions and property assignment as much as possible? — Mike 'Pomax' Kamermans, Aug 07 '19 at 16:38
Checkout DOMPurify library for sanitizing the elements https://github.com/cure53/DOMPurify — Dusan Malusev, Aug 07 '19 at 19:34

score 0 · Accepted Answer · 2019-08-07T22:54:51.430

0

I would strip all html from the URL variable:

url = url.replace( /<(?:(?:(?:(script|style|object|embed|applet|noframes|noscript|noembed)(?:\s+(?:"[\S\s]*?"|'[\S\s]*?'|(?:(?!\/>)[^>])?)+)?\s*>)[\S\s]*?<\/\1\s*(?=>))|(?:\/?[\w:]+\s*\/?)|(?:[\w:]+\s+(?:"[\S\s]*?"|'[\S\s]*?'|[^>]?)+\s*\/?)|\?[\S\s]*?\?|(?:!(?:(?:DOCTYPE[\S\s]*?)|(?:\[CDATA\[[\S\s]*?\]\])|(?:--[\S\s]*?--)|(?:ATTLIST[\S\s]*?)|(?:ENTITY[\S\s]*?)|(?:ELEMENT[\S\s]*?))))>/g,
             "");

https://regex101.com/r/qwEyED/1

Then do a validation on the URL:

var patURL = /^(?!mailto:)(?:(?:https?|ftp):\/\/)?(?:\S+(?::\S*)?@)?(?:(?:(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))|localhost)(?::\d{2,5})?(?:\/[^\s]*)?$/;

var res = patURL.test( url );
if ( res != true )
    // bad url

edited Aug 07 '19 at 22:54

answered Aug 07 '19 at 22:49

Thanks, this almost works but ends up looking like this when I enter `"` into the URL field: [link](https://imgur.com/h6tRKly) How do I tell the regex to also match when the first occurrence of the character `"` then replace with nothing? – dragonfury2 Aug 08 '19 at 09:29
`Thanks, this almost works but ends up looking like this when I enter " into the URL` Well buddy, that's why I put this link in my answer https://regex101.com/r/qwEyED/1 so nobody can come back and say what I just quoted you as saying. Cool, huh ? – Aug 08 '19 at 21:19
Sorry I dont understand. The problem I'm having is the `"` character I enter at the start in the user input field closes the ` – dragonfury2 Aug 09 '19 at 11:31
@dragonfury2 - You don't understand, html will be _STRIPPED_ the *** out of your input. And your question is about what, a double quote ? – Aug 09 '19 at 20:13

Prevent html Injections with Javascript/Typescript

1 Answers1