Ssl and Mixed Content Due to CSS Background Images

What exactly are the rules for avoiding the mixed content warning in IE due to background images?

Using the fully-qualified URI will avoid the problem of IE8 and below incorrectly creating a bogus URI like about:/relative/file.png that triggers the mixed content warning. This problem was fixed in IE9.

If I use an API from a non-SSL website, are browsers required to give a mixed content error?

Yes you will get a mixed-content error. Any insecure context
request/response is mixed content:

A request is mixed content if its url is not a priori authenticated, and the context responsible for loading it requires prohibits mixed security contexts.

A response is mixed content if it is an unauthenticated response, and the context responsible for loading it requires prohibits mixed security contexts.

The and the context responsible for loading it requires prohibits mixed security contexts just means the requesting context is secure context—basically, a document with an https origin.

See also the Active content examples section of the MDN Mixed content article:

• <script> (src attribute)
• <link> (href attribute) (this includes CSS stylesheets)
• <iframe> (src attribute)
• XMLHttpRequest requests
• All cases in CSS where a url value is used (@font-face, cursor, background-image, and so forth).
• <object> (data attribute)

Notice that the list includes XMLHttpRequest requests. (It should be updated to also include fetch() requests).

See also the example at https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content#an_xmlhttprequest_example

Mixed Content Warning with SSL on Concrete5

I fixed it! What I did, if anyone runs into the same problem, is I changed the Canonical URL settings in the dashboard to have the Canonical URL be the https version, the Canonical SSL URL be the https one, and have the redirect to canonical URL unchecked and it seems to be working now.

Just got a SSL certificate but there is still a insecure localhost image

The insecure reference is in the div id="rev_slider_1_1", value for CSS property background-image:url.

<div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullscreen-container" style="padding:0px;">
<!-- START REVOLUTION SLIDER 4.6.93 fullscreen mode -->
    <div id="rev_slider_1_1" class="rev_slider fullscreenbanner" style="display:none;background-image:url(http://localhost/Proiecte/GIT/kleo/wp-content/uploads/);background-repeat:no-repeat;background-fit:cover;background-position:center top;">
<ul>    <!-- SLIDE  -->

---

Related Topics