Is is possible, on the client side, to manipulate the HTML sent from a site when you are not the owner of the site, and have no access to the code?
Yes. There are many ways.
HTTP proxies such as Fiddler or Burp can break on all requests and then manipulate the response before it reaches the browser.
Video explaining how this is done in Fiddler.
There are also several browser plugins like Tampermonkey (Chrome) and Greasemonkey (Firefox) that allow you to execute custom JavaScript on page load automatically.
There are built-in DOM manipulation extensions for all browsers, like this one :
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
Related
I have the problem, that my website acts different if I call it via the https protocol. To be more precise it looks like it handles the CSS in a different way.
What I want (and how it actually works via http) is kind of a navigation with different tabs. Here is an image of the navigation part:
http navigation
And here is an image of how it looks like when it's called via https:
https navigation
I have also created a fiddle with this part of my website although it does not proper work inside the fiddle. (maybe because the jsfiddle site is also via https protocol?)
Fiddle
However, please have a look at the current website to see the difference:
This is the website via http:
http website
and here how it looks like when it's called via https:
https website
You guys ever had a similar problem or any idea how to solve it?
I was the opinion that the protocol should not make a difference.
Take a look at your console.
You should see a lot of Mixed Content errors or warnings if you are using Chrome.
When a website is served over HTTPS, all its resources must be served over HTTPS too. When a resource is not loaded over HTTPS, the browser will block it because otherwise it defeats the whole purpose of using a HTTPS.
When one resource is blocked, the content from these resources won't get executed. Maybe that is the reason why your layout breaks because something is not being executed properly.
So try to change your resources into HTTPS protocol. If you are using APIs and those API does not provide HTTPS link, then you should look for another API.
In your case
This is the culprit.
http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic
You can find it in head section.
Your font should be in Source Sans Pro but because it was blocked, Helvetica or Arial was used instead. Thus breaking the layout.
Change it to HTTPS and it should be fine.
I don't know much about HTTP requests, but I can tell you two things:
- The browser cascades and parses CSS in different ways. HTTPS requests are processed in different ways. Maybe check you cascade.
- That website looks nice
I have an application that uses Google Drive for document storage and preview functionality, but recently the iFrames that the documents are loading into are not displaying anything. Upon inspection of the console, Chrome declares that it blocked the fram from running insecure content, and that is why the file preview did not load.
The initial call to preview this file is to a url that looks like this:
https://docs.google.com/document/d//preview
There is a redirect along the way that takes the following form but because it uses http instead of https, Chrome blocks the content from loading.
http://www.google.com/url?sa=p&q=https://www.google.com/accounts/ServiceLogin?service%3Dwise%26passive%3Dtrue%26go%3Dtrue%26continue%3Dhttps://docs.google.com/document/d//preview?pref%253D2%2526pli%253D1
Is there any way around this issue? It is blocking a core functionality of my application currently, so any advice would be appreciated. I can provide a screenshot of the full stack of network loads in necessary, but this is the only URL that is not http compliant.
Thanks in advance for your help.
Hacked that. Add a "?pli=1" without quotes at the end of the URL to avoid redirect (after "/preview" or "/edit") and land directly to the document.
When I request a webpage, I actually make lots of requests for imgs, banners, javascripts (js can include others js and so on), iframes, css, plugins, activex, applets,...
How can I get the url's list I'm actually downloading from?
Easiest way is to use your browser's built-in development tools. Generally look for the "network" tab.
(Google Chrome's Network Panel)
You can also use a tool such as Fiddler, which acts as a proxy server and shows you all web requests, even HTTP from other applications.
I have page where RSS icon is present. I want that when user clicks on RSS icon it will check in chrome browser that, whether that RSS reader chrome extension is installed or not
I am trying to achieve this by using chrome extension methods, mentioned here.
I tried something like this but it is not working:
var port = chrome.extension.connect("nlbjncdgjeocebhnmkbbbdekmmmcbfjd");
To use this API you need to be either an extension or a web application having the necessary permissions - normal web pages cannot access it. However, detecting whether an extension is installed in Chrome is still easy:
<script src="chrome-extension://nlbjncdgjeocebhnmkbbbdekmmmcbfjd/manifest.json"
onload="alert('installed')" onerror="alert('not installed')"></script>
This uses the fact that the extension's manifest.json file is located under a predictable URL and that web pages are allowed to load this URL. Of course, this isn't an officially documented approach but rather a loophole and a privacy issue. So be prepared for it to stop working in some future Chrome version. At the moment it works however.
In Firefox, I view my site and get no warnings about insecure mixed content.
Using FireBug, I can see that every request is https.
In Chrome, I get the https crossed out in the address bar.
I viewed source in Chrome and then ran this regex /http(?!s)/ but the only things it found were the href attributes for some external links and the doc type and http-equiv meta tags.
Using Chrome's Resource Tracking revealed all requests were https too.
This includes Google Analytics, jQuery from Google's CDN and Facebook like scripts.
Is there any specific tool I can use to show non https requests, or anything further I can try?
I found that I get the "mixed content"-warning in Chrome even when there is no mixed content, if sometime during the session mixed content was already encountered on the domain.
(Also mentioned here: Why is Chrome reporting a secure / non secure warning when no other browsers aren't?)
In Chrome's Developer Tools, the Console tab shows the resources that it won't load because they unsecure.
You can add the "scheme" column to the Chrome developer tools network tab to show which requests were sent over http or https:
Press F12 to show the developer tools
Switch to the Network tab
Right click in the column headers and select "Scheme"
Reload the page to show which elements are loaded over http or https
In situations like this where it's helpful to see exactly which protocol is being used to load resources, I would recommend Fiddler2 as a browser-agnostic solution that can show you exactly what traffic is occurring on each request.
From the site:
Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and "fiddle" with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.
Edit: In-browser debugging tools are becoming really good so this third-party tool may not be as useful as it was when this answer was first written.
Open up the Web Inspector and find the yellow triangle (warning) in the top right. Click on it and it will display all security issues.
In 48-th version of chrome they added a security panel. Using it you can quickly identify the mixed content resources:
Do you have the HttpFox plugin for FireFox? That'd work, I think.
Among other things, it reports on the URL, Method, Result Code, and bytes of all the assets that a web page requests. It's what I've used to trap the occasional non-HTTPS graphic, etc. I'm sure the other suggested tools would do the same...
You can use SslCheck
It's a free online tool that crawls a website recursively (following all internal links) and scans for nonsecure includes - images, scripts and CSS.
(disclaimer: I'm one of the developers)
I know this post is old, but I ran across it and had the same issue. I clicked on the Chrome menu (top right corner), scrolled down to Tools> and selected Developer Tools. Clicked on the Console tab and it told me exactly what the problem was... the favicon was served over http, not https, but of course it was not in the page source code. Corrected the problem in my CMS, which loads the favicon without code in the page... and no more error!
Note that 'mixed content' and 'mixed scripting' are detected seperatly. Check this site for the meaning of the icons in Chrome: https://support.google.com/chromebook/answer/95617?p=ui_security_indicator&rd=1 (click 'see details' link).
Grey icon = mixed content, red icon = mixed scripting.