-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.htm
164 lines (135 loc) · 8.5 KB
/
index.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<html>
<head>
<title>Ice Buddha</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<!-- jQuery -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="./jquery.hotkeys.js"></script>
<script src="./jquery.cookie.js"></script>
<link rel="stylesheet" type="text/css" href="./contextmenu/jquery.contextmenu.css" />
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<script>
if (!$.browser.webkit && !$.browser.mozilla) {
alert("You must use firefox or chrome for this site to work");
}
</script>
<div id="container">
<div id="header">
<b><a href="./index.htm">IceBuddha</a></b> - <a href="./projects.htm">Projects</a> - <a href="./about.htm">About</a>
</div>
<div id="dialog-message" title="Loading">
</div>
<form id="appmenu" style="margin:0px; padding:0px">
<input type="file" id="fileSelect">
</form>
<div id="content">
<noscript>
<h1 style="color:#f00; font-size: 800%;">Javascript must be enabled for this page to work!
<br><br><br><br><br></h1>
</noscript>
<div id="drop_zone">
Drop file here
</div>
<div id="about">
<a href="https://github.com/0xdabbad00/icebuddha"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<p>
<img src="./tutorial.png">
<div id="myad" style="background-color: #EEF; width:600px; border: 1px solid #000; margin:0 auto; padding:5px; position:relative; text-align:center; font-weight:bold;">
<p>Check out Summit Route for end-point protection.
<br>
<a href="https://SummitRoute.com">
<span style=" position:absolute;width:100%;height:100%;top:0;left: 0;z-index: 1;"></span>
<img height="43" src="./summit_route_logo.png" style="margin-top:10px;">
</a>
</div>
<h3>About</h3>
IceBuddha is an open-source (MIT license) hex viewer and generic binary file parser that runs in the browser.
<p>
See an <a href="./index.htm?test=1">example</a>.
<p>
<h3>Why?</h3>
I wanted to test the limits of what was possible in the browser from a static site. Because all the files are static (no database, and no server-side functionality) IceBuddha is hosted on <a href="http://0xdabbad00.github.io/icebuddha/">github pages</a>.
<h4>Ridiculous things IceBuddha does</h4>
<ol>
<li>"Submitted" files are not uploaded anywhere. Everything happens in your browser locally.
<br>If you're concerned, you can clone and host this project locally by running it in a simple web server,
such as using "python -m SimpleHTTPServer" in the folder you clone the repo to.
<li>Files are parsed via <a href="https://github.com/0xdabbad00/icebuddha/tree/gh-pages/parse_scripts">>Python scripts</a> that define the structure of the files.
The python is converted to Javascript in your browser via the <a href="http://www.skulpt.org/">skulpt</a> library.
By clicking on the "Parse as" tab when you drop a file, you can see this Python code.
You can then edit it, and your file will parsed again immediately using your new code.
Again, this is all happening entirely in your browser without hitting the server.
<li>You can take your python parse scripts, and run them directly on files to generate JSON data, without using your browser, as explained <a href="http://0xdabbad00.com/2013/04/01/extracting-miniduke-files-from-gifs-using-icebuddha-parse-scripts/">here</a>
</ol>
<h3>Similar projects/products</h3>
<a href="http://www.sweetscape.com/010editor/">010 editor</a>: Windows & Mac (commercial), odd format for binary templates to parse files, but looks similar to C structs and is often referenced.
<br><a href="http://www.synalysis.net/">Synalize It!</a>: Mac only (commercial); XML based grammar format which means limited capability for more advanced binary file formats.
<p>
<h3>File parsing</h3>
IceBuddha can parse a few of the main structures in the following file types:
<ol>
<li>PE files (.exe, .dll, .sys)
<li>GIF image files
<li>Mach-O (Mac OS X files)
</ol>
<h4>Expanding and adding your own file parsing</h4>
File types are automatically identified in drop.js via the function "ChooseParseScript". Look at <a href="https://github.com/0xdabbad00/icebuddha/blob/gh-pages/parse_scripts/pe.py">pe.py</a> to see an example of how files are parsed.
<ol>
<li>Change the <code>PE</code> in the line <code>ib = icebuddha.IceBuddha(filedata, "PE")</code> to be name of your file type.
<li>The line <code>imageDosHeader = ib.parse(0, "IMAGE_DOS_HEADER", """</code> creates a structure at offset <code>0</code> with name <code>IMAGE_DOS_HEADER</code>.
Then the next lines in that file describe what is in that structure.
<li>Known variable types are:
<ol>
<li><code>BYTE</code>, <code>CHAR</code>, and anything unknown: 1 byte
<li><code>WORD</code>: 2 bytes
<li><code>DWORD</code>: 4 bytes
<li><code>ULONGLONG</code>: 8 bytes
</ol>
You can also create arrays such as <code>WORD e_res2[10];</code>
<li><code>ib</code> is the root object, so we then append <code>imageDosHeader</code> to that. Later we append objects to <code>imageDosHeader</code>
<li>The line <code>e_lfanew = imageDosHeader.getInt("e_lfanew")</code> gets the value of <code>PE.IMAGE_DOS_HEADER.e_lfanew</code> in the file it parses, and sets the variable <code>e_lfanew</code> which is then used as the offset in the next line.
<li>Usually you can specify an offset simply by using something like <code>imageNtHeader.end()</code> to specify the end of the previous object.
<li>To describe a bit field, you can look at what I did for <code>dllCharacteristics</code>.
<li>Finally, you just need to return everything with the lines <code>return ib.getParseTree()</code> and <code>parser = Parse()</code>
<li>You can have loops, other functions, and other logic in your code, as shown in <a href="https://github.com/0xdabbad00/icebuddha/blob/gh-pages/parse_scripts/gif.py">gif.py</a>.
<li>You can also describe what a value means as shown with the function <code>setMeaningFromConstants</code> in the file <a href="https://github.com/0xdabbad00/icebuddha/blob/gh-pages/parse_scripts/mach_o.py">mach_o.py</a>
<li>You can set the endianness as shown with <code>setBigEndian</code> in the file <a href="https://github.com/0xdabbad00/icebuddha/blob/gh-pages/parse_scripts/mach_o.py">mach_o.py</a>
</ol>
<p>
<h3>Project status</h3>
IceBuddha is mostly abandoned (last update on 2014-11-13). It does a lot of stuff, but a lot of things are impossible for a webapp based on static files (ex. saving files).
<p>This was my first javascript project. The codebase is not pretty.
</div>
</div>
<div id="footer">
Code on <a href="https://github.com/0xdabbad00/icebuddha">github</a>.
</div>
</div>
<!-- jqTree -->
<script type='text/javascript' src="./jqtree/tree.jquery.js"></script>
<link rel="stylesheet" href="./jqtree/jqtree.css">
<!-- jQuery Waypoints -->
<script type='text/javascript' src="./waypoints.min.js"></script>
<!-- jQuery scrollTo -->
<script type='text/javascript' src="./jquery.scrollTo.min.js"></script>
<!-- jQuery contextMenu -->
<script type="text/javascript" src="./contextmenu/jquery.contextmenu.js"></script>
<!-- Peg.js -->
<script type='text/javascript' src="./peg.min.js"></script>
<!-- Ace editor -->
<script src="./ace/ace.js" type="text/javascript" charset="utf-8"></script>
<!-- Download file -->
<script src="./BlobBuilder.js" type="text/javascript" charset="utf-8"></script>
<script src="./FileSaver.js" type="text/javascript" charset="utf-8"></script>
<!-- Skulpt -->
<script src="skulpt.js" type="text/javascript"></script>
<script src="builtin.js" type="text/javascript"></script>
<!-- IceBuddha -->
<script type="text/javascript" src="./drop.js"></script>
</body>
</html>