web-dev-qa-db-fra.com

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

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 que je charge du 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 HTTPS?

javascripthtmlcsshttps
77
Nathan H

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="//example.com/style.css">
<script src="//example.com/script.js"></script>

il utilisera ensuite le protocole de la page parent.

122
BalusC

nute et James Westgate ont raison lorsqu'ils se prononcent sur la réponse ultérieure.

Si nous jetons un coup d'œil aux inclusions javascript externes de qualité industrielle, celles qui réussissent utilisent à la fois le reniflement document.location.protocol et l'injection d'éléments de script pour utiliser le protocole approprié.

Vous pouvez donc 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 faite pour les inclusions CSS externes.

Et au fait: faites attention à n'utiliser que le chemin relatif d'url () dans votre CSS, le cas échéant, sinon vous pourriez toujours recevoir l'avertissement "mixte sécurisé et non sécurisé" ....

7
Alain BECKER

En contradiction avec la réponse échappée (qui fonctionnera également), vous pouvez ignorer cette partie et utiliser la bonne façon d'ajouter des nœuds à votre arbre 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.

0
gkempkens

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

Cependant, si vous traversez un domaine vers un 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: //

0
James Westgate