How did Facebook block crypter?

[burtonator]

How did the block technically work?

Did they block ALL encrypted messages or did they somehow just block the extension? How are they blocking the extension when it isn't included on their site?

[maxisme]

A change in the DOM.

The input where one writes their message used to be a <textarea> and now it is an editable <div>. Before I was able to take the data out of the <textarea> and replace it with the encrypted version. Now doing that does not work. And I am having to automate the keypress of an editable <div>.

Auto-Encrypt
Before I was able to manipulate(encrypt) the message before it was sent to Facebook on the Enter keypress. Now I have to prevent the code being submitted and then encrypt it. But I still need to be able to submit the message automatically after encrypting it by simulating the enter press.

[burtonator]

Is it possible to bring up a local textarea or use the extension to generate a text area, then edit it there, then write it to he div encrypted?

Interesting attempt at a block. Seems eventually possible to get past.

[maxisme]

Yes, it is! Someone mentioned that using an <iframe> to my server which has a <textarea> might even be a good idea! But I can't do any of that until I am able to automate an Enter keydown! 👎

Yes I think it will be but I need help!

[sadreck]

Hi Max,

I think you might be over-complicating this a bit. I'm the author of a similar tool (exactly for facebook) and it has been working for the past 2 years (the main difference between our implementations is that my doesn't use a preset password).

I assume you made it into a Chrome extension because you couldn't add an event listener to the ENTER key before the event listeners that Facebook adds itself. Having said this, I don't see the reason why you are using this to prevent the default event bubbling. Why not just replace the inner plain text with the encrypted one like this and then let Facebook handle everything else?

[burtonator]

@maxisme

Ah.. ok. Well I have a work around / potential solution for you. What you can do is generate a raw event and fire it which generates the keyboard event. I have some that does this for phantomjs and it works for DOM across the board. I can try to pull it out of mothballs if you like but it might take me a while.

Long story short, you re-create the actual DOM event and make a synthetic one and send it.. works fine.

[maxisme]

Hello Pavel,

Thank you for getting in touch!

Yes I think I probably am... Haha. Oh awesome. Have you tested it in the last couple of days? From what I can see that seems to be the method I used to have before facebook changed their DOM.

I have tried your method by replacing this with $(node).val(encrypted); (what I was doing before facebook changed everything) and removing the "preventing default" stuff. But no luck 👎

[sadreck]

Hi Max,

That's kinda weird. I haven't tested the last couple of days (I'm on holiday - yay!) but will do this weekend and let you know.

[maxisme]

@burtonator Sounds brilliant. That would be so useful, if you don't mind! I am having a problem finding the actual DOM event though!?

[maxisme]

@sadreck Oh nice! Hope you are having nice time. Yes please let me know. Hopefully will have a fix by then and I will let you know!!

[maxisme]

@sadreck we both live in Brighton... Weird.

[sadreck]

@maxisme it's where all great ideas are born! haha

[burtonator]

@maxisme What you should do is to set a breakpoint in your code and then look at the event that was created. Then you just duplicate it.

Here's something similar. I think I'm doing this for mouse events but this should be a good starting point for you:

    var event = document.createEvent('MouseEvent');

    // NOTE: it turns out that we don't need to use bounding rect because we're
    // calling element.dispatchEvent which places the event directly on the
    // element we're interested in regardless of the position of the mouse
    // pointer.  I want this disabled because there are some race conditions
    // and setting this to left=0, top=0 means that I don't need to worry about
    // issues like the page elements being redrawn and shifted.
    var useBoundingRect = false;

    var rect = { left: 0, top: 0 };

    if ( useBoundingRect ) {
        rect = element.getBoundingClientRect();
    }

    // this method has a large number of parameters but for our usage
    // its pretty simple.  We only really care about the last param,
    // the element
    event.initMouseEvent(
        eventName, //event type : click, mousedown, mouseup, mouseover, mousemove, mouseout.
        true, //canBubble
        false, //cancelable
        window, //event's AbstractView : should be window
        1, // detail : Event's mouse click count
        rect.left, // screenX
        rect.top,  // screenY
        rect.left, // clientX
        rect.top,  // clientY
        false, // ctrlKey
        false, // altKey
        false, // shiftKey
        false, // metaKey
        0, // button : 0 = click, 1 = middle button, 2 = right button
        element // relatedTarget : Only used with some event types (e.g. mouseover and mouseout). In other cases, pass null.
    );

    element.dispatchEvent( event );

[maxisme]

@burtonator Thank you! Is setting a breakpoint in the code supposed to help me find out the function that facebook use?

[maxisme]

@burtonator I have tried the equivalent to this with no luck!

[burtonator]

@maxisme Sorry. I meant to say you can add an event listener for [enter] then set a break point, look at the event that is sent. Then you can create a synthetic one and use it with dispatchEvent.