"Don't serve content over HTTP" - what does this mean, exactly?

It means to always use the SSL layer when serving pages. Links don't need to be absolute, but traffic received on port 80 without SSL should be redirected to port 443 with SSL. The rest of the magic is in avoiding attacks where the user doesn't visit the SSL site first and the redirect is hijacked using something like SSLstrip. That is covered in this question: Options when defending against SSLstrip?

It means that all content and resources should be served over HTTPS (not HTTP). Local scripts, stylesheets, and images should be referenced with a URL that will ultimately load the resource over HTTPS, not HTTP.

One way to achieve this is to make sure that all URLs are absolute and fully qualified, and start with https:.

Alternatively, you can continue to use relative URLs, as long as you verify they will ultimately resolve to a https: URL.

For example, suppose you have a page https://example.com/foo.html. Here are some examples of snippets that are OK / not OK to include in that page:

• OK: <IMG SRC="https://example.com/pic.png">

• OK: <IMG SRC="/pic.png">

• OK: <IMG SRC="https://elsewhere.com/pic.png">

• OK: <IMG SRC="//elsewhere.com/cats.png"> (this is a relative URL, which uses the same protocol as the containing page, but a different host)

• Bad: <IMG SRC="http://example.com/pic.png">

• OK: <IFRAME SRC="https://example.com/bar.html">

• OK: <IFRAME SRC="https://elsewhere.com/blah.html">

• OK: <SCRIPT SRC="https://example.com/jquery.js">

• OK: <LINK HREF="https://example.com/mystyle.css">

• Bad: <SCRIPT SRC="http://somewhere.com/jquery.js">

• Bad: <SCRIPT SRC="https://somewhere.com/jquery.js"> (unless you also control somewhere.com)

• Bad: <LINK HREF="http://somewhere.com/mystyle.css">

• Bad: <IFRAME SRC="http://somewhere.com/blah.html">

I hope this makes sense.