Some of our users have been having css inserted into their posts without their knowledge. This css appears to be advert related and is not generated by a wordprocessor and consists of only css and no html. Below is an example:
.adslot-overlay
{
position:absolute;
font-family:arial, sans-serif;
background-color:rgba(0,0,0,0.65);
border:2px solid rgba(0,0,0,0.65);
color:#FFF!important;
z-index:2147483647;
text-decoration:none;
box-sizing:border-box;
text-align:left;
margin:0;
}
.adslot-overlay-iframed
{
top:0;
left:0;
right:0;
bottom:0;
}
.slotname
{
position:absolute;
top:0;
left:0;
right:0;
font-size:13px;
font-weight:700;
vertical-align:middle;
background-color:rgba(0,0,0,0.45);
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
padding:3px 0 3px 6px;
}
.slotname span
{
text-align:left;
text-decoration:none;
text-transform:capitalize;
}
.revenue
{
position:absolute;
bottom:0;
left:0;
right:0;
font-size:11px;
vertial-align:middle;
text-align:left;
background-color:rgba(0,0,0,0.45);
font-weight:700;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
padding:3px 0 3px 6px;
}
.revenue .name
{
color:#ccc;
}
.revenue .horizontal .metric
{
display:inline-block;
padding-right:1.5em;
}
.revenue .horizontal .name
{
padding-right:.5em;
}
.revenue .vertical .metric
{
display:block;
line-height:1.5em;
margin-bottom:.5em;
}
.revenue .vertical .name,.revenue .vertical .value
{
display:block;
}
.revenue .square .metric,.revenue .button .metric
{
display:table-row;
}
.revenue .square .metric
{
line-height:1.5em;
}
.revenue .square .name,.revenue .square .value,.revenue .button .value
{
display:table-cell;
}
.revenue .square .name
{
padding-right:1.5em;
}
.revenue .button .name
{
display:block;
margin-right:.5em;
width:1em;
overflow:hidden;
text-overflow:clip;
}
.revenue .button .name:first-letter
{
margin-right:1.5em;
}
a.adslot-overlay:hover
{
border:2px solid rgba(58,106,173,0.9);
}
a.adslot-overlay:hover .slotname
{
border-bottom:1px solid rgba(81,132,210,0.9);
background-color:rgba(58,106,173,0.9);
}
a.adslot-overlay:hover .revenue
{
border-top:1px solid rgba(81,132,210,0.9);
background-color:rgba(58,106,173,0.9);
}
div.adslot-overlay:hover
{
cursor:not-allowed;
border:2px solid rgba(64,64,64,0.9);
}
div.adslot-overlay:hover .slotname
{
border-bottom:1px solid rgba(128,128,128,0.9);
background-color:rgba(64,64,64,0.9);
}
div.adslot-overlay:hover .revenue
{
border-top:1px solid rgba(128,128,128,0.9);
background-color:rgba(64,64,64,0.9);
}
I've done a search of the internet and cannot see any explanation for this. All I get are multiple other sites with similar css such as the following:
http://www.greenbiz.com/video/2012/02/24/john-donahoe-conversation-joel-makower
http://bloggers.com/posts/tamilactressbook-47592 (every post)
It would seem that this css is injected via javascript, since so many ad scripts are js and that the posting mechanisms use a wysiwyg editor such as tinymce. It may be browser related and it may be dependent on add-ons. At this stage it is a mystery and am wondering if anyone else has come across it.
Lyndsy is correct about Google Publisher Toolbar being the culprit. GPT creates and overlay with ad stats etc, and somehow the CSS for that gets inserted into text editors. Turn it off when creating / editing posts.
You need to see if you can isolate when the CSS was injected and where all it may be found in your database. There's several scenarios. First, the blogging software in question may have an exploit which might allow it to be injected. If it's a SQL injection attack directly against the website, that CSS code might be everywhere. I worked at a company a few years back that had an exploit in one of its sites, and I have to admit, the sql code to inject was very clever. Basically, if you had any rows with any text (varchar/text) field, a javascript snippet (or part of it) would be inserted into all those fields.
If it's only being injected when the user posts, well, for all we know it might be due an innocuous that's the result of several factors.
On interesting thing that I see from the first page is that it's meta
description also contains the css:
<meta name="description" content="eBay's CEO John Donahoe explores the business case for sustainable consumption, addressing the unique opportunities and roles of big business, small business, and technology in driving this shift.
.adslot-overlay {position: absolute; ...">
content edited for brevity.
So I'm thinking we're looking at some sort of automated sql injection attack.
Now why the css? Well, I also think this has to be used in conjunction with another attack (unless somehow it's part of the same attack that I have yet to identify). We can see from the css that the .adslot-overlay is positioned absolutely, and that it's z-index is z-index: 2147483647;
which, I think is as high as it can be set. If that code actually makes it into a style tag or a linked to css file, it could be used in conjunction with content that actually has the classes used to overlay the page, making it look like the webpage is advertising Generic Viagra or whatever
Now, I have to admit I've made a bunch of assumptions here, and probably some of them aren't true. What is likely true is that:
- your blog software is exploitable,
- your database is going to require alot of cleanup once you plug the holes (sorry).
I started experiencing it yesterday. It inserts into every post as soon as I hit "publish". Looking for answers on how to fix it and came across your post. Thanks
Update: I spent hours pouring over all my files and couldn't find anything suspicious. The only thing I could think of that I had done prior to this happening was approving some comments that were "sketchy".
Unfortunately I did not take a scientific approach to the fix the problem. I closed the browser window I was using, opened my blog in another window, and moved those approved comments to the trash bin.
I ran a test post and the "garbage" is not coming up in my posts anymore. Just wanted to update for anyone else searching this problem.
I believe I have this figured out. It's caused by the Google Publisher Toolbar, a Chrome extension.
It's a bug, not an attack.
With GPT enabled, nearly every time I load jsFiddle, that CSS gets pasted in. Once I disabled it, I didn't have the problem again.
You are right ! The problem become from Google Toolbar. I try with Anonymous Chrome and the prblem desapear !
Thanks. We've had other reports of this; I'm working on a fix now that will be in 2.3 by the end of the week.