Comment inclure des fichiers CSS et JS via HTTPS en cas de besoin?

Question

J'ajoute un fichier CSS externe et un fichier JS externe à mes en-têtes et pieds de page. Lors du chargement d'une page HTTPS, certains navigateurs se plaignent du chargement de contenu non sécurisé.

Existe-t-il un moyen simple de faire en sorte que le navigateur charge le contenu externe via HTTPS lorsque la page elle-même est en HTTPS?

Answer 1

Utilisez des chemins relatifs au protocole.

Donc pas

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

mais alors

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

alors il utilisera le protocole de la page parente.

Answer 2

nute & James Westgate raison quand comenting sur le tard répondre.

Si nous prenons un coup d'oeil à miscelanous industrie-grade javascript externe comprend, le succès de ceux utiliser à la fois le document.emplacement.protocole de renifler et de l'élément de script injection tu utiliser le protocole approprié.

Vous pouvez utiliser quelque chose comme :

<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>

La même chose peut être fait pour CSS externe comprend.

Et en passant: veillez à n'utiliser l'url relative() chemin d'accès dans votre CSS, le cas échéant, sinon vous pourriez encore avoir de la "mixtes sécurisés et non sécurisés" alerte....

Answer 3

Si vous utilisez des chemins relatifs (et que le contenu se trouve sur le même domaine), le contenu doit utiliser le protocole dans lequel la page a été demandée.

Toutefois, si vous passez d'un domaine à un autre CDN ou à un site de ressources, ou si vous devez utiliser des chemins absolus, vous devrez utiliser un script côté serveur pour modifier les liens ou toujours utiliser https: //.

Answer 4

En contradiction avec la réponse échappée (qui fonctionnera également), vous pouvez ignorer cette partie et utiliser la méthode correcte pour ajouter des nœuds à votre arborescence dom:

 <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>
 

Mais le chemin relatif au protocole serait la voie à suivre.