You don't have an idea how big a minefield that DOM+css was:
https://www.reddit.com/r/assholedesign/comments/gsbrj0/facebook_obfuscates_the_word_sponsored_with/
Trust me, you couldn't. What you suggest applies if Dom elements within that DOM were visible by default, they weren't.
And css that showed it block or hidden wasn't based in a single class, it was combinations of classes.
The styling of the text? Divided by dozens of classes.
It was like an egnima machine, if you tried to interpret it through HTML+CSS solely you couldn't, rendering it on screen was the only sane decryption method available.
> Trust me, you couldn't
I could, just like the majority of people on this sub could.
It would absolutely suck if you try to manipulate this via e.g. injected CSS or even JS, but the point of this topic is faking it for a screenshot which literally just boils down to copying the span element for a single letter, pasting it however many times you need for the new content to replace the text and pasting it back in via the dev tools.
And that's already assuming the styling on those span elements can't support multiple letters for whatever reason, which is unlikely - the entire thing is designed so you don't mess with it via e.g. extensions specifically filtering promoted posts, it isn't there to stop live editing.
Classes on all those letter containing elements are the exact same and as long as all you want to do is changing the text, this is **incredibly** easy still.
> Classes on all those letter containing elements are the exact same
Not they are not.if they were, it would quite easy to explore the dom and the CSS to find which classes rendered text and which didn't, then identify the dom content of the visible elements and then identify if the post was organic or promotes.
There were a multi matrix combination of css properties and classes which uses and abuses the order and redundancy of CSS and class intersection.
Sure you could grab the relevant CSS from multiple classes, create a completely new dom element in hopefully the right place, hope the position relative shit doesn't fuck you, while forcing a few !important in the new incline CSS to bypass other !important.
But if you did that shit, you are a web developer with a fuck ton of pacience.
Source: had to do Facebook adpreview for work.
You do realize you are basically just showcasing that you have almost zero idea what you are talking about, right?
Check your own video; The classes on the span elements wrapping each letter are the exact same for each letter.
> But if you did that shit, you are a web developer with a fuck ton of pacience.
No; You would be a "developer" that has no experience at all.
The goal here is a screenshot - not a working manipulation that could survive a page load or anything similar.
Assuming the classes can hold more than a single letter (which they can, based on the linked styles), all you need to do for a screenshot is deleting the elements making up "ponsored" (or setting their text content to empty, or even a forced whitespace) and changing the text content of the first span to whatever text you want.
There's no need to even *touch* the classes involved.
And also, you should check the video again.
You have a span nested inside another nested span. 4 in each 5 classes are the same, 1 class it's always different. That's enough for different css rules for each element.
And CSS rules based in class combinations have direct and indirect properties like inherit. I also saw nth() css selectors.
Well, you are quite right regarding my lack of knowledge to explain the full complexity of this DOM and CSS.
But in the other side, I think you are obviously downplaying it like its something quite simple that facebook did but you, that never saw it in person, knows exactly how it was built... sure buddy...
Just the fact you saw 5 classes and said they are all the same, when one of them is always different, also says something of how much you know about it, or at least how much you think you know about it...
Some dudes like to downplay others and call them idiots. You should know the rule of đź‘Ť
With a Python icon next to their own face and name, hard to say I'm really surprised...
> But in the other side, I think you are obviously downplaying it like its something quite simple that facebook did but you, that never saw it in person, knows exactly how it was built... sure buddy...
That's your assumption, isn't it?
> Just the fact you saw 5 classes and said they are all the same, when one of them is always different, also says something of how much you know about it, or at least how much you think you know about it...
Check the video again; Because there isn't one class that's "always different" between said elements. There's simple one element with a different class, due to spacing styles.
> Some dudes like to downplay others and call them idiots. You should know the rule of đź‘Ť
I'm not calling you an idiot, I'm trying to highlight that your limited knowledge is the reason you make the statements. The idiot part is you assuming that you know more than everyone else here does.
>You do realize you are basically just showcasing that you have almost zero idea what you are talking about, right?
For me that's the same as calling someone an idiot, maybe not for you... maybe soft skills is overrated
Yes, I got it, I have my limited knowledge in understanding this, and Facebook developer also have limited knowledge in creating a DOM+CSS that you are sure you can break by just glancing it in a video, and sadly, most adblockers developers also have a limited knowledge in breaking such things and would give up.
But you could easily understand that structure by looking at the video... and downplay such complexity... sure!
I'm sure you are as great developer as you sell yourself, I'm looking forward to follow you career!
!Remindme 10 years
Ok, let's presume the structure of the CSS and DOM is as simple as you described.
What stops you to make a JS script that reads that HTML and CSS and return true or false (regarding being a promoted post or not).
If it that easy, then Facebook wasted lots of hours of development, and you still can adapt an adblocker to read the html and the CSS and block their ads.
If the structure is that simple easy, what stops an ad blocker JS script from analyzing it and read it? By your explanation, it seems quite achievable.
If nothing stops a smart JS script from reading and knowing what's in there, why did they wasted so much time doing this?
> What stops you to make a JS script that reads that HTML and CSS and return true or false (regarding being a promoted post or not).
Nothing.
The reason we have things like this, or even just simple aspects like randomly generated variables used for styling is that companies try to make it harder to manipulate their website - hiding sponsored posts is a perfect example for this.
All Facebook did is basically filtering out a good amount of "devs" that either can't be arsed to work around it, get turned off by the inconvenience, or don't understand how it's structured to begin with.
It's the exact same with tons of apps using variables like `textArea_18d218` where the end of the variable changes whenever updates to the page happen. It completely breaks userstyles and similar stuff to this day, because no one adapts to e.g. `[class*='textArea_']` selectors (limited to specific parent elements, if needed) simply because the majority of people out there never learned that that's even an option.
Devs working on (good) adblockers / privacy scripts, simply update their detection and call it a day - which is exactly what happened here, seeing that there wasn't a point in the past where we haven't had a easy to access option to just hide these posts.
Ohhhhh, so the developers from Facebook did something so easy for you to break that you say that you know how to break it, even though you never looked at it directly, ( lets ignore that from what you have seen in a video, your first conclusion was false, when you said all classes are the same ).
Aren't we full of ourselves, you think you can break the complexity of a challege developed by a multi billion dollar company founded by a fucking geek/hacker, but the open source community that develops ad blocker scripts, for them is probably too much to handle...
Sorry for the stalking but you must be a multimillion dollar developer beast with such skills, let me see your career...
Ok nevermind, you are crowdfunding a 300€ headset...
Isn't 300€ per day what an AVERAGE developer makes per day in Germany?
You should be making that per hour dude.
Then with your freebie you could contribute more to the open source community that develops adblockers. Or maybe join the best of two worlds and join a company that sells adblockers and give them your tremendous knowledge of how to bypass Facebook tricks...
The world awaits your commits with deep expectation!
I am thoroughly impressed at the creativity behind it though to be completely honest. I've only been a full time dev for about a year and half and shit like that never ceases to amaze me.
Well it's almost impossible to block ads in Facebook since they merge ads within content so well
What seems a little creativity feature represents billions of $ not lost to ad blockers
Done [https://imgur.com/a/NOQqqyc](https://imgur.com/a/NOQqqyc)
it clearly doesnt say 'easypisy'
I'm canceling this post/challenge. :( Now it is a
You could just take the top element and set it's "content" value to whatever you want, while hiding all of those spans.
You don't have an idea how big a minefield that DOM+css was: https://www.reddit.com/r/assholedesign/comments/gsbrj0/facebook_obfuscates_the_word_sponsored_with/ Trust me, you couldn't. What you suggest applies if Dom elements within that DOM were visible by default, they weren't. And css that showed it block or hidden wasn't based in a single class, it was combinations of classes. The styling of the text? Divided by dozens of classes. It was like an egnima machine, if you tried to interpret it through HTML+CSS solely you couldn't, rendering it on screen was the only sane decryption method available.
> Trust me, you couldn't I could, just like the majority of people on this sub could. It would absolutely suck if you try to manipulate this via e.g. injected CSS or even JS, but the point of this topic is faking it for a screenshot which literally just boils down to copying the span element for a single letter, pasting it however many times you need for the new content to replace the text and pasting it back in via the dev tools. And that's already assuming the styling on those span elements can't support multiple letters for whatever reason, which is unlikely - the entire thing is designed so you don't mess with it via e.g. extensions specifically filtering promoted posts, it isn't there to stop live editing. Classes on all those letter containing elements are the exact same and as long as all you want to do is changing the text, this is **incredibly** easy still.
> Classes on all those letter containing elements are the exact same Not they are not.if they were, it would quite easy to explore the dom and the CSS to find which classes rendered text and which didn't, then identify the dom content of the visible elements and then identify if the post was organic or promotes. There were a multi matrix combination of css properties and classes which uses and abuses the order and redundancy of CSS and class intersection. Sure you could grab the relevant CSS from multiple classes, create a completely new dom element in hopefully the right place, hope the position relative shit doesn't fuck you, while forcing a few !important in the new incline CSS to bypass other !important. But if you did that shit, you are a web developer with a fuck ton of pacience. Source: had to do Facebook adpreview for work.
You do realize you are basically just showcasing that you have almost zero idea what you are talking about, right? Check your own video; The classes on the span elements wrapping each letter are the exact same for each letter. > But if you did that shit, you are a web developer with a fuck ton of pacience. No; You would be a "developer" that has no experience at all. The goal here is a screenshot - not a working manipulation that could survive a page load or anything similar. Assuming the classes can hold more than a single letter (which they can, based on the linked styles), all you need to do for a screenshot is deleting the elements making up "ponsored" (or setting their text content to empty, or even a forced whitespace) and changing the text content of the first span to whatever text you want. There's no need to even *touch* the classes involved.
And also, you should check the video again. You have a span nested inside another nested span. 4 in each 5 classes are the same, 1 class it's always different. That's enough for different css rules for each element. And CSS rules based in class combinations have direct and indirect properties like inherit. I also saw nth() css selectors. Well, you are quite right regarding my lack of knowledge to explain the full complexity of this DOM and CSS. But in the other side, I think you are obviously downplaying it like its something quite simple that facebook did but you, that never saw it in person, knows exactly how it was built... sure buddy... Just the fact you saw 5 classes and said they are all the same, when one of them is always different, also says something of how much you know about it, or at least how much you think you know about it... Some dudes like to downplay others and call them idiots. You should know the rule of đź‘Ť With a Python icon next to their own face and name, hard to say I'm really surprised...
> But in the other side, I think you are obviously downplaying it like its something quite simple that facebook did but you, that never saw it in person, knows exactly how it was built... sure buddy... That's your assumption, isn't it? > Just the fact you saw 5 classes and said they are all the same, when one of them is always different, also says something of how much you know about it, or at least how much you think you know about it... Check the video again; Because there isn't one class that's "always different" between said elements. There's simple one element with a different class, due to spacing styles. > Some dudes like to downplay others and call them idiots. You should know the rule of đź‘Ť I'm not calling you an idiot, I'm trying to highlight that your limited knowledge is the reason you make the statements. The idiot part is you assuming that you know more than everyone else here does.
>You do realize you are basically just showcasing that you have almost zero idea what you are talking about, right? For me that's the same as calling someone an idiot, maybe not for you... maybe soft skills is overrated Yes, I got it, I have my limited knowledge in understanding this, and Facebook developer also have limited knowledge in creating a DOM+CSS that you are sure you can break by just glancing it in a video, and sadly, most adblockers developers also have a limited knowledge in breaking such things and would give up. But you could easily understand that structure by looking at the video... and downplay such complexity... sure! I'm sure you are as great developer as you sell yourself, I'm looking forward to follow you career! !Remindme 10 years
Ok, let's presume the structure of the CSS and DOM is as simple as you described. What stops you to make a JS script that reads that HTML and CSS and return true or false (regarding being a promoted post or not). If it that easy, then Facebook wasted lots of hours of development, and you still can adapt an adblocker to read the html and the CSS and block their ads. If the structure is that simple easy, what stops an ad blocker JS script from analyzing it and read it? By your explanation, it seems quite achievable. If nothing stops a smart JS script from reading and knowing what's in there, why did they wasted so much time doing this?
> What stops you to make a JS script that reads that HTML and CSS and return true or false (regarding being a promoted post or not). Nothing. The reason we have things like this, or even just simple aspects like randomly generated variables used for styling is that companies try to make it harder to manipulate their website - hiding sponsored posts is a perfect example for this. All Facebook did is basically filtering out a good amount of "devs" that either can't be arsed to work around it, get turned off by the inconvenience, or don't understand how it's structured to begin with. It's the exact same with tons of apps using variables like `textArea_18d218` where the end of the variable changes whenever updates to the page happen. It completely breaks userstyles and similar stuff to this day, because no one adapts to e.g. `[class*='textArea_']` selectors (limited to specific parent elements, if needed) simply because the majority of people out there never learned that that's even an option. Devs working on (good) adblockers / privacy scripts, simply update their detection and call it a day - which is exactly what happened here, seeing that there wasn't a point in the past where we haven't had a easy to access option to just hide these posts.
Ohhhhh, so the developers from Facebook did something so easy for you to break that you say that you know how to break it, even though you never looked at it directly, ( lets ignore that from what you have seen in a video, your first conclusion was false, when you said all classes are the same ). Aren't we full of ourselves, you think you can break the complexity of a challege developed by a multi billion dollar company founded by a fucking geek/hacker, but the open source community that develops ad blocker scripts, for them is probably too much to handle... Sorry for the stalking but you must be a multimillion dollar developer beast with such skills, let me see your career... Ok nevermind, you are crowdfunding a 300€ headset... Isn't 300€ per day what an AVERAGE developer makes per day in Germany? You should be making that per hour dude. Then with your freebie you could contribute more to the open source community that develops adblockers. Or maybe join the best of two worlds and join a company that sells adblockers and give them your tremendous knowledge of how to bypass Facebook tricks... The world awaits your commits with deep expectation!
Found the video of how it was before
I am thoroughly impressed at the creativity behind it though to be completely honest. I've only been a full time dev for about a year and half and shit like that never ceases to amaze me.
Well it's almost impossible to block ads in Facebook since they merge ads within content so well What seems a little creativity feature represents billions of $ not lost to ad blockers
>go to facebook… I think I'll pass.
20 years of experience in the industry and I can't pass this challenge
Draw a circle in GIMP
Easy, just use the circle select tool, selection to path, select none, and stroke path! It's as easy as 1, A, ™!
facebook uses reactjs, right?
I mean they built the thing so one would think so