Question

因此，我有一个简单的应用程序，用户可以在其中将URL插入iframe窗口。问题是，这允许进行html注入，从而弄乱了显示。

是否有防止这种情况发生的简单方法？像正则表达式转义功能一样？

iframe窗口的TS / JS代码：

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>';

我尝试添加此内容，但没有发现任何内容：

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

URL输入表单如下：

Answer 1

我将从网址变量中删除 all html：

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

然后在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

使用Javascript / Typescript防止html注入

1 个答案: