3

Wouldn't ask if I really couldn't find an answer. So here is my problem. A website I use, uses a loophole around uBlock, it uses a script to overlay a random generated element class such as:

<div class="lcelqilne1471483619510ttupv"></div>
<div class="xgdxts1471483770461tkbfjhcr"></div>

The string changes every time, so selecting it makes it impossible on a constant basis. This class overlays the website, forcing you to click it and receive a popup/ad, that some how uses Base64 exploit or something to bypass and display a working popup/newtab. However it does have CSS variables that in theory can select the class/ID. I however have no Idea how to do it with javascript/jQuery(with greasemonkey). The popup is also invisible.

display: block !important;
visibility: visible !important;
top: 0px !important;
left: 0px !important;
position: absolute !important;
z-index: 999999 !important;

To simplify what I am asking, I would like to select this element based on its CSS attributes and not the name of the element, then hide/block it. http://prntscr.com/c7474u

Improve this question
5
  • Just a side comment: Have you considered selecting it based on its location in the DOM tree? Or is that random too (i.e. sometimes a direct child of body, sometimes a direct child of main, sometimes nested somewhere else)? Commented Aug 18, 2016 at 1:52
  • not sure how to do that either, but no that isn't random, screenshot: prntscr.com/c7474u Commented Aug 18, 2016 at 1:56
  • I'd put that markup in your OP :) Commented Aug 18, 2016 at 2:06
  • Is the .length of the className the same at each new document? Do other classNames contain only lowercase letters and numbers? Commented Aug 18, 2016 at 2:07
  • It is, I just checked, thanks. I haven't studied it long enough to know if its only lowerclass, but the length of the random generations appear to be the same. Commented Aug 18, 2016 at 2:11

3 Answers 3

Reset to default
6

You can use .filter() to check the computed style for the settings you want.

$("div[class]").filter(function() {
    if (this.className.length != 27) { // skip the expensive style check if we don't have a random-looking class
        return false;
    }
    var style = getComputedStyle(this);
    return (style.visibility == 'visible' && style.top == '0px' && style.left == '0px' && style.position == 'absolute' && style.zIndex == 999999);
}).hide();

I suspect this will be pretty expensive. If you can narrow down the selector it would help.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Ill try that thank you very much, but I would still love to know how to do it with jQuery. :)
This is jQuery. If you mean using a jQuery selector, it's not possible. Selectors can only access DOM attributes, not CSS.
ok thanks very much Barmar. if anyone has any other answers, feel free to post.
pretty taxing, but i dont think theres any other way around
I updated the question, and have noticed each random generation is the same length as the next. Which im sure code could also be used to select an element based on its length. Wish I knew how to do that as well.
|
2

You can check element className for .length equaling 27, and containing lowercase letters followed by digits followed by lowercase letters using document.querySelectorAll("[class]") , Array.prototype.filter(), RegExp.prototype.test() .

var filter = [].filter.call(document.querySelectorAll("[class]")
               , function(el) {
                   return el.className.length === 27 
                          && /[a-z]+[0-9]+[a-z]+/.test(el.className)
});    
console.log(filter);
// do stuff
filter[0].style.color = "blue";
<div class="xgdxts1471483770461tkbfjhcr">xgdxts1471483770461tkbfjhcr</div>
<div class="abc456wyx">abc</div>
<div class="123def789">123</div>

Improve this answer

6 Comments

a little funky but I like how lightweight it is :)
still shows on 'run code snippet', guess its broken on stack.
@computerguy "still shows on 'run code snippet', guess its broken on stack." Not certain what you mean? See jsfiddle.net/v49ftLuk
when i run the code snippet, it doesn't hide the class its suppose to. @Assimilater has the same issue.
@computerguy in his example he just made it blue. You can make it not display by doing .style.display = "none !important" or similar
|
1

A CSS solution you might consider given the markup you posted in the screenshot:

body > div:last-child {
    display: none !important;
}

This works since body > div:last-child is more specific than .xgdxts1471483770461tkbfjhcr (I'm making an assumption about how the selector is applied since that wasn't included in your original post)

Example:

.xgdxts1471483770461tkbfjhcr {
	display: block !important;
	visibility: visible !important;
	top: 0px !important;
	left: 0px !important;
	position: absolute !important;
	z-index: 999999 !important;
}
body > div:last-child {
	display: none !important;
}
<body>
    <div id="fb-root"></div>
    <div style="display:none"></div>
    <div class="xgdxts1471483770461tkbfjhcr">Hello</div>
</body>

Improve this answer

4 Comments

I don't think the position of the element changes in the html tree, ill give it a try as well, screenshot: prntscr.com/c74d9r
Side remark: I've tested this in Firefox and Chrome and it appears to work on a standalone page but when running the snippet on SO it shows "hello" which it shouldn't. I'm not sure what that's about....
@computerguy if your problem is solved you might consider marking an answer ;) (Maybe you're wanting to give the other solutions a chance though :) )
yes, yours works and i will probably in due time, but i am giving the others a chance. I up voted yours for now.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.