CSS injection should get carried out when an external content/file gets integrated with a different/3rd party(customers) website.
Like i have my company providing search accessories service in the form of a web app. which can be integrated to any customers site provided.
Now i have my own CSS/JS filed and customers site has their own.When it gets integrated, CSS file overriding/conflicts occur.To avoid that during the Testing phase external css injection can be performed.
Lets get into this simple injection
which i think every tester should play around with.
There are two sub tasks which need to
be done before practicing CSS Injection.
- Configure HTTP via apache on your Local Machine
- Add a chrome extension "CSS Inject".
Get Started:
Say for eg. I created a HTML
file("Test.html") using a external CSS file
"External_Red.css".
Test.html
<html>
<head>
<link
rel="stylesheet" type="text/css"
href="external.css">
</head>
<body
style="background-image:
url('http://www.webdesignerwall.com/wp-content/uploads/2008/10/wdw-bg-image.jpg');">
<h1>
This text is
red.
</h1>
</body>
</html>
External_red.css
h1
{
color:red;
font-size:20px;
}
This external
css field is turning the text to red which is under a header tag.
Lets crreate
another external css file "External_Yellow.css" which will
be injected.
h1
{
color:yellow;
font-size:20px;
}
Steps for
Injecting:
CSS Inject
always inject the fiel which needs to be website hosted or local
host.So we used Apache to configure http.
- Navigate to Your corresponding Apahe folder eg: C:\xampp\htdocs
- Put all the three file there to inject
- Configure the extension to inject "External_Yellow.css" into the Test Page.
- Save the setting.
- Try to access the test html page via localhost i.e localhost/Test.html from the browser
- Try to inject by hitting the pencil icon beside chrome address bar.
DONE
!!! Text will be changed to Yellow.
Next
step is yours. INJECT a external file to Google and turn the
background RED.
