Tuesday, December 27, 2011

Filezilla 550 Error

So I was working on some stuff to prepare moving my server and setting up stuff via ftp on a friends server for a temporary placeholder for my website while the server is down and I needed to clean out old stuff from when I had previously used his server. Deleting was going smoothly until 550 Remove directory operation failed. I had gotten this error before but never paid much attention to it, but now I wanted to just figure out how to deal with it. After a little bit of searching, I found the problem.

FTP will not delete a directory if there is a file still in it, and sometimes there are hidden files. So it did not see any files, but there were some. So show hidden files, then delete, problem solved. To enable this on Filezilla, on version 2.x, under the "View" menu is "Show hidden files" option and on 3.x the option is under "Server" and says "Force showing hidden files".

Friday, December 23, 2011

Javascript setTimeout stop (clearTimeout)

I noticed a search query pointing to my site looking for how to stop a javascript setTimeout, and this is something I always forget. Here's the thing, when working with a timer, it emulates some form of multithreading/concurrency. Problems that can arise from this if you do things like timed animations on a triggered event are that if you don't stop a timer, you get multiple timers. This means at each trigger, you spawn a new timer to run with this emulated concurrency creating weird effects.

So to combat this, you want to use the method clearTimeout. This will take the argument of the integer returned when you call setTimeout. So when using this, you will also need to make sure you track that value.

var x = setTimeout(function() {
    alert("");
}, 1000);
clearTimeout(x);

This will appear not to do anything, but what it actually does is set the timer then clear it out. Now when you store the value, you can trigger an event to call the clearTimeout or you can initiate another setTimeout to have the clearTimeout run at some arbitrary time without a triggered event, like mathematically calculate a time to end some arbitrary animation without interrupting the main javascript code being executed or some such things. This method can also be called inside the timed function so long as it can clear the write variable, so make sure the scope is correct.

Thursday, December 22, 2011

Javascript Basic Animations (part 2 Events)

The cool thing about javascript is it reacts to events. Some of these events are element dependent but include things like onclick, onmouseover, onmouseout, onfocus (forms), onblur (forms), onload, onunload, event listeners for keyboard input and access keys, timing and any custom events you can make yourself. So as you can see, lots of events to choose to listen to. Now the big thing when you're going to listen for an event openly, is filtering. If you make a menu that lets numbers quickly change the page, don't let that listen for input when the person is trying to type in a form or else they can't type the number without changing the page.

To do this, you want to use javascript's addEventListener and removeEventListener for some things. This dynamic adding and removing of events can lead to less filtering needs as the even listening will only be up when the code adds it. Also, when attaching events using these, the argument that will be passed to it includes the event with no need for mentioning of arguments when calling the function. So document.addEventListener("keydown", eventHandlerFunction, false); would be the same as <body onkeydown="eventHanderFunction(event);">. It should also be noted that for older Internet Explorer versions, attachEvent and detachEvent.

For a full list of event types, you can check out dottoro. For a quick reference, here is a list of all the ones included in all browsers (js/html attribute : event.type):
  • blur/onblur : Event (IE: Focus Event)
  • change/onchange : Event
  • click/onclick : MouseEvent
  • contextmenu/oncontextmenu : MouseEvent
  • dbclick/ondbclick : MouseEvent
  • DOMCharacterDataModified/- : MutationEvent
  • DOMNodeInserted/- : MutationEvent
  • DOMNodeRemoved/- : MutationEvent
  • error/onerror : Event
  • focus/onfocus : Event (IE: FocusEvent)
  • hashchange/onhashchange : Event
  • input/oninput : Event
  • keydown/onkeydown : KeyboardEvent
  • keypress/onkeypress : KeyboardEvent
  • keyup/onkeyup : KeyboardEvent
  • load/onload : Event
  • message/onmessage : MessageEvent
  • mousedown/onmousedown : MouseEvent
  • mousemove/onmousemove : MouseEvent
  • mouseout/onmouseout : MouseEvent
  • mouseover/onmouseover : MouseEvent
  • mouseup/onmouseup : MouseEvent
  • readystatechange/onreadystatechange : Event
  • reset/onreset : Event
  • resize/onresize : Event (IE: UIEvent)
  • scroll/onscroll : Event (IE: UIEvent)
  • select/onselect : Event (IE: UIEvent)
  • submit/onsubmit : Event
  • unload/onunload : Event
Contained in each one of those events is a lot of information, there is a lot of data to handle and use for whatever you want whether it be games or analytical information or just making it easier for a user to navigate and move around. One thing to remember though is to never use them for security, security should all be handled server side. Also be aware older browsers might handle some of these differently or contain different information so running sanity checks are in order when collecting and organizing the data before processing it. For more in-depth analysis of each event type and its containing information, see the link associated with the list.

Now the ways you might implement these event listeners is to have things like when focus on a form or blur, add or remove event listeners to allow typing and movement without triggering something that may get in the way. Or perhaps all the event data is going to the same handler and you wish to filter it that way. In this case, there are a few ways you can filter it. You can filter it with checking the event.type, the event.constructor or by checking what data values it contains and seeing if they are relevant, but only do that if the handler needs to handle a wide array of so moany events dumped into it.

Now for a demonstration, I've worked up a small live capture. You can check out the full version here. Now for the quick code sample.
<script type="application/javascript">
// Some global variables because I'm lazy
var currEvent = null;
var prevEvent = null;
var eventOut = null;
var hisLen = 10;

// Some more laziness handling
function init() {
  // These are the events we're listening for
  var eventList = ["keypress", "keyup", "keydown", "click", "dbclick", "mousedown", "mouseup", "mousemove", "contextmenu"];
  // Add the events
  for (var i = 0; i < eventList.length; i++){
    if (document.addEventListener) {
      document.addEventListener(eventList[i], eventHandler, false);
    }
    // For old IE, Opera also supports this and the previous method
    else if (document.attachEvent){
      document.attachEvent(eventList[i], eventHandler);
    }
  }
}

// Handling the event
function eventHandler(evt) {
  // Store it
  currEvent = evt;
  // Because I declare all variables first
  var cl;
  // So we don't splurge the same events everywhere
  if(currEvent.type != prevEvent){
    eventOut = document.createElement("p");
    eventOut.className = "events";
    cl = document.getElementsByClassName("events");
    document.getElementById("evtrep").insertBefore(eventOut, cl[0]);
    // Limit the list length so we don't flood the page
    if (cl.length>hisLen) {
      for (var i = hisLen; i < cl.length; i++){
        document.getElementById("evtrep").removeChild(cl[hisLen]);
      }
    }
  }
  // Tell what type of event and when
  var d = new Date();
  eventOut.innerHTML = "(" + d.toLocaleTimeString() + ") " + String(currEvent.constructor) + " " + currEvent.type;
  // If it's a mouse event
  if (String(currEvent.constructor).match(/MouseEvent/i)){
    eventOut.innerHTML += " clientX=" + currEvent.clientX + ", clientY=" + currEvent.clientY;
  }
  // Or a keyboard event
  else if (String(currEvent.constructor).match(/KeyboardEvent/i)){
    eventOut.innerHTML += " charCode=" + currEvent.charCode + " keyCode=" + currEvent.keyCode;
  }
  // And for keypress, show the key (as an html char)
  if(currEvent.type == "keypress") {
    eventOut.innerHTML += " char=&#" + currEvent.charCode + ";";
  }
  // Save it so we don't overwrite the same event multiple times
  prevEvent = currEvent.type;
}
init();
</script>
<p id="title">Event Reporting</p>
<pre id="evtrep"></pre>
The main walkthrough of this code is attempted in the code's comments. So here's the brief summary. First we set up some global variables to store everything because I did not feel like setting up an object and if you want to make it object oriented, you can go right ahead, but this is a quick and dirty that's supposed to be easy to read and follow. Then we have a function that I wrote to set up each event listener to the document in a compressed manner, not the cleanest means but for this purpose it suits fine for a nice condensed version. When an event it is set to listen for is triggered, it gets sent to the eventHandler function to be processed. This is where the filtering happens. First thing we do is store the event globally, the only purpose behind this is so you can manually probe it with a console or DOM inspector, firebug will show it to you. Then it handles setting up displaying it, the part I'm going to focus on is the filtering and processing. The constructor is displayed as a string, and the event.type as well. The constructor is then processed as a string with regex. Reason for this is it seemed like the easiest way for me to group together events without checking for data existence, not something I'm a fan of doing unless necessary.

Pretty simple filtering method, a rather quick and dirty setup. To apply to graphics, simply take the numbers, do a little math and CSS magic and you've got yourself some event driven animation. Add some bounds checking and the like and you can build a game. I'll leave it here for now, hopefully you can begin seeing some frameworks of ideas starting up in your head of ways to apply events.

Saturday, December 17, 2011

Javascript Basic Animations (part 1 movement)

When I first looked into javascript animations, I found most tutorials covered the basics of what you can do with CSS then left the rest up for your imagination. After playing around with it, I realize it needs to be apparent the javascript is just waiting for timing and events to manipulate the CSS which will emulate an animation. You may see some things changed with javascript, or perhaps using the CSS pseudo class, :hover. This will emulate a simple onmouseover event able to change the css specific to that element, reverting it when it goes back, simplifying javascript where you would need an onmouseover and onmouseout to make sure everything is set as you want it to be in both states. Where CSS fails is for more complicated animations where you might alter attributes as well or CSS of other elements or setup movement and timing and the like.

So let's start with some simple movement.
<script type="text/javascript">
// Storing variables in an object
var ani_js_var = {
  // Frames per second
  fps: 32,
  // Pixels per second
  speed: 60,
  // Keep track of offset
  offset: 0,
  // How far it can go
  distance: 100,
  // Which way it's going
  direction: 1
};
// The function to animate this
function ani_js_fun() {
  // Find the element
  var x = document.getElementById("ani_js_elem");
  // Check bounds and change direction if applicable
  if (ani_js_var.offset > ani_js_var.distance || ani_js_var.offset < 0) {
    ani_js_var.direction *= -1;
  }
  // Set the offset based on speed and time passed relative to estimate
  ani_js_var.offset += ((ani_js_var.direction*ani_js_var.speed)/(1000/ani_js_var.fps));
  // Move the element
  x.style.left = Math.round(ani_js_var.offset)+"px";
  // Pause until next "frame"
  setTimeout(ani_js_fun, Math.round(1000/ani_js_var.fps));
}
ani_js_fun();
</script>
<!-- Make sure this is relative -->
<img src="http://anarchy46.net/favicon.ico" id="ani_js_elem" alt="" style="position: relative;" />

Live it will look like this.

Now using a similar idea, you can use this to mess with opacity, height, width, top or really any number attribute to create timed animations and transitions pretty quickly and easily. The main hard part is trying to set up timing to be smooth and consistent. The reason this is so hard is because javascript is processed on a single thread so it can lag causing some hiccups so it would be best to make sure your scripts include sanity checks and the possibility things may change at any moment, like a number suddenly throwing a NaN for no apparent reason as has happened to me before and I could not even recreate how it happened.

The quick rundown of this is we setup a bunch of variables to track information like speed, offset, all the stuff noted in the comments. The function then gets the element, preforms calculations to see what direction it should move in then how far. It then moves the element and pauses to wait for the next frame. The reason for frames is to allow smooth movement without too much processing.

For an even quicker way to make simpler animations and transitions, I highly recommend jQuery, but only after understanding some of the basic how-to's yourself.

Hopefully the example gives a little more insight into javascript animations and you can step into some basic or perhaps more advanced ones.

Monday, December 12, 2011

Javascript Exploit: setTimeout

When I was messing around with some javascript animation, I came across a rather strange exploit in javascript that can be taken advantage of to cause a little havoc on browsers. A quick explanation of javascript, when using an alert or other popup, that popup will pause the execution of the script until it is dealt with. However, setTimeout spawns another. This means using setTimeout, you can spawn multiple alert boxes or other such things that will pause and wait for input.

So then the question is how to use this to an exploit. A quick rough version would be something like
while (1){
  setTimeout(function (){
    alert("");
  }, 0);
}
This will create an infinite loop that will spawn alert boxes really fast, and probably freeze up or crash a browser. However due to browsers keeping javascript "sandboxed" for protection, there is a chance it will just say the script stopped responding and suspend it. This sandbox effect is to keep scripts from being able to interact with any other tabs or windows the user might have open as well as personal data stored, while not perfect, it can prevent certain exploits from causing damage.

Now alternatively, we could create a fork bomb. A fork bomb will multiply processes exponentially as apposed to what we have setup where it just increases directly. That will end up looking something like this.
function fork() {
  while (1){
    alert("");
    setTimeout(fork, 0);
  }
} fork();
This will then keep doubling but the effect will most likely be it just stops responding faster due to the sandbox setup. This could also have uses as this will fake multithreading by faking concurrency. So fake multithreading exploit is the bottom line.

Saturday, December 10, 2011

3D Computing

Ever looked at a movie and saw a computer interface and thought "computers aren't like that," because I know plenty of people that say things like that. Remember in Jurassic park, the "it's a Unix system" scene? Well, that was actually an experimental file browser at the time, not just Hollywood cinematic interpreting computing. The program is called FSN. There is also a Linux version of this called FSV, which is almost the exact same, but it is a little different. There are videos floating around youtube of people using it.

I've actually been playing around on a 3D file browser and found a list of 3D computing programs that allow you to do various tasks and monitoring in 3D environments. So you too can compute like in the movies. The only restrictions are the requirements for the programs, but there are some cool things out there.

I've been using TDFSB which is a Linux 3D file browser that lets you walk through your file system. The controls are kinda weird, but for how cool it looks, totally worth it. Something you would probably want to run in xterm. This program is available in the Ubuntu and Debian repositories.

You can find more 3D stuff at nooface. I will summarize the programs below.

3D File System Browsers
3D Process Visualization
3D Window Managers
3D Search Interfaces
3D Browsers

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tag Cloud

.NET (1) A+ (2) addon (6) Android (3) anonymous functions (5) application (10) arduino (1) artificial intelligence (2) bash (4) c (7) camera (1) certifications (4) cobol (1) comptia (4) computing (2) css (2) customize (16) encryption (2) error (19) exploit (17) ftp (3) funny (2) gadget (2) games (2) Gtk (1) GUI (5) hardware (6) haskell (15) help (8) HTML (6) irc (2) java (5) javascript (21) Linux (19) Mac (4) malware (2) math (8) network (9) objects (2) OCaml (1) perl (4) php (9) plugin (7) programming (42) python (24) radio (1) regex (3) security (25) sound (1) speakers (1) ssh (3) story (1) Techs from the Crypt (2) telnet (2) tools (14) troubleshooting (5) Ubuntu (4) Unix (4) virtualization (1) web design (14) Windows (7) wx (2)