Wie kann ich bei Bedarf CSS- und JS-Dateien über HTTPS einbinden?

78

Ich füge meinen Kopf- und Fußzeilen eine externe CSS-Datei und eine externe JS-Datei hinzu. Beim Laden einer HTTPS-Seite beschweren sich einige Browser, dass ich ungesicherten Inhalt lade.

Gibt es eine einfache Möglichkeit, den Browser dazu zu bringen, den externen Inhalt über HTTPS zu laden, wenn die Seite selbst HTTPS ist?

javascript html css https Nathan H.
quelle

Antworten:

124

Verwenden Sie protokollbezogene Pfade.

Also nicht

<link rel="stylesheet" href="http://example.com/style.css">
<script src="http://example.com/script.js"></script>

aber so

<link rel="stylesheet" href="//example.com/style.css">
<script src="//example.com/script.js"></script>

dann wird das Protokoll der übergeordneten Seite verwendet.

BalusC
quelle
4
Das ist ein browserspezifisches Problem. Es gibt keine andere Möglichkeit, dies auf robuste Weise zu lösen, als dies vollständig auf der Serverseite mithilfe der Funktionen der betreffenden Ansichtstechnologie zu tun.
BalusC
1
Wenn Sie sich um die richtigen Caching-Einträge in den Antwortheadern kümmern , werden diese von den Browsern bei den nachfolgenden Anforderungen erst nach Ablauf des Ablaufs heruntergeladen, einschließlich IE.
BalusC
Ich würde sagen, verwenden Sie immer https://Ressourcen, wenn diese verfügbar sind. Sie werden gut in Ihre Seite geladen, unabhängig vom Schema
Phil
@Phil: Nicht, wenn die Zielumgebung HTTPS nicht unterstützt, normalerweise während der Entwicklung bei localhost.
BalusC
@ BalusC "... wenn verfügbar ..."
Phil
7

nute & James Westgate haben Recht, wenn sie auf die spätere Antwort eingehen.

Wenn wir uns die verschiedenen externen Javascript-Includes in Industriequalität ansehen, verwenden die erfolgreichen sowohl das Sniffing von document.location.protocol als auch die Injektion von Skriptelementen, um das richtige Protokoll zu verwenden.

Sie könnten also etwas verwenden wie:

<script type="text/javascript">
  var protocol = (
      ("https:" == document.location.protocol) 
      ? "https" 
      : "http"
  );
  document.write(
      unescape(
          "%3Cscript"
              + " src='"
                  + protocol 
                  + "://"
                  + "your.domain.tld"
                  + "/your/script.js"
              + "'"
              + " type='text/javascript'
          + "%3E"
          + "%3C/script%3E"
      ) // this HAS to be escaped, otherwise it would 
        // close the actual (not injected) <script> element
  );
</script>

Gleiches gilt für externe CSS-Includes.

Übrigens: Achten Sie darauf, dass Sie in Ihrem CSS nur den relativen Pfad url () verwenden, falls vorhanden. Andernfalls wird möglicherweise immer noch die Warnung "Mixed Secure and Unsecure" angezeigt.

Alain BECKER
quelle
Dies ist nur etwas, das Sie berücksichtigen müssen, wenn Sie sich für eine Technologie entscheiden. Wenn Sie dies auf der Serverseite nicht tun können und zwischen Hosts wechseln müssen, haben Sie keine andere Option.
Geoff
1

Wenn Sie relative Pfade verwenden (und sich der Inhalt in derselben Domäne befindet), sollte der Inhalt das Protokoll verwenden, in dem die Seite angefordert wurde.

Wenn Sie jedoch domänenübergreifend zu einem CDN oder einer Ressourcensite wechseln oder absolute Pfade verwenden müssen, müssen Sie zum Ändern der Links ein serverseitiges Skript verwenden oder immer https: // verwenden

James Westgate
quelle
Wir gehen über Domain. Würde die Verwendung von Javascript zum Schreiben des Includes funktionieren? Wenn document.location.protocol dann ...
Nathan H
Versuchen Sie, js zu verwenden, indem Sie ein Markup in das HEAD-Tag einfügen, möglicherweise ein einfaches document.write in ein Skript-Tag. <HEAD> <SCRIPT> document.write ('<SCRIPT src =' + document.location.protocol ...
James Westgate
1
Dies ist ein Ansatz von Google Analytics-Code, bei dem lediglich ein document.write mit dem Protokoll der enthaltenen Seite erstellt wird.
Geoff
"Sie müssen ein serverseitiges Skript verwenden" - warum? Caching? XSS Bedenken? Browser?
mlhDev
Dies scheint, als hätte ich protokollbezogene Pfade gemeint, als ich die Frage beantwortete, aber ich kann nicht sicher sein. Ich weiß, dass IE8 und niedriger ein Caching-Problem mit protokollbezogenen Pfaden hat, das überprüft werden sollte. Ich würde nicht jede Ressource mit einem Skript ausschreiben, wenn Sie Wert auf Leistung legen. Dies kann alle Arten von Asynchronisierungs- und Blockierungsproblemen auslösen.
James Westgate
0

Im Gegensatz zu der maskierten Antwort (die auch funktioniert) können Sie diesen Teil überspringen und auf die richtige Weise Knoten zu Ihrem Dom-Baum hinzufügen:

<script type="text/javascript" language="javascript">
    var fileref=document.createElement('script');
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", document.location.protocol + '//www.mydomain.com/script.js');
    document.getElementsByTagName("head")[0].appendChild(fileref);
</script>

Aber der protokollbezogene Pfad wäre der richtige Weg.

gkempkens
quelle