Ist es gültig, http: // in einem <script src = “http: //…”> durch // zu ersetzen?

Ich habe folgendes Element:

<script type="text/javascript" src="https://cdn.example.com/js_file.js"></script>

In diesem Fall ist die Site HTTPS, aber die Site kann auch nur HTTP sein. (Die JS-Datei befindet sich in einer anderen Domäne.) Ich frage mich, ob es aus praktischen Gründen gültig ist, Folgendes zu tun:

<script type="text/javascript" src="//cdn.example.com/js_file.js"></script>

Ich frage mich, ob es gültig ist, das http:oder zu entfernen https:?

Es scheint überall zu funktionieren, wo ich es getestet habe, aber gibt es Fälle, in denen es nicht funktioniert?

Eine relative URL ohne Schema (http: oder https :) ist gemäß RFC 3986 gültig : "URI (Uniform Resource Identifier): Generic Syntax", Abschnitt 4.2 . Wenn ein Client daran erstickt, ist dies die Schuld des Clients, da er die im RFC angegebene URI-Syntax nicht einhält.

Ihr Beispiel ist gültig und sollte funktionieren. Ich habe diese relative URL-Methode selbst auf stark frequentierten Websites verwendet und hatte keine Beschwerden. Außerdem testen wir unsere Websites in Firefox, Safari, IE6, IE7 und Opera. Diese Browser verstehen alle dieses URL-Format.

Es funktioniert garantiert in jedem Mainstream-Browser (ich berücksichtige keine Browser mit einem Marktanteil von weniger als 0,05%). Heck, es funktioniert in Internet Explorer 3.0.

RFC 3986 definiert einen URI aus folgenden Teilen:

     foo://example.com:8042/over/there?name=ferret#nose
     \_/   \______________/\_________/ \_________/ \__/
      |           |            |            |        |
   scheme     authority       path        query   fragment

Wenn Sie relative URIs definieren ( Abschnitt 5.2 ), können Sie jeden dieser Abschnitte weglassen, immer von links beginnend. Im Pseudocode sieht es so aus:

 result = ""

  if defined(scheme) then
     append scheme to result;
     append ":" to result;
  endif;

  if defined(authority) then
     append "//" to result;
     append authority to result;
  endif;

  append path to result;

  if defined(query) then
     append "?" to result;
     append query to result;
  endif;

  if defined(fragment) then
     append "#" to result;
     append fragment to result;
  endif;

  return result;

Der von Ihnen beschriebene URI ist ein schemaloser relativer URI.

Gibt es Fälle, in denen es nicht funktioniert?

Wenn die übergeordnete Seite von geladen wurde file://, funktioniert sie wahrscheinlich nicht (es wird versucht, sie abzurufen file://cdn.example.com/js_file.js, was Sie natürlich auch lokal bereitstellen können).

Viele Leute nennen dies eine protokollrelative URL.

Dies führt zu einem doppelten Download von CSS-Dateien in IE 7 und 8 .

Hier dupliziere ich die Antwort in Versteckte Funktionen von HTML :

Verwenden eines protokollunabhängigen absoluten Pfads:

<img src="//domain.com/img/logo.png"/>

Wenn der Browser eine Seite in SSL über HTTPS anzeigt, fordert er dieses Asset mit dem https-Protokoll an, andernfalls fordert er es mit HTTP an.

Dies verhindert, dass die schreckliche Fehlermeldung "Diese Seite enthält sowohl sichere als auch nicht sichere Elemente" im IE alle Ihre Asset-Anforderungen innerhalb desselben Protokolls hält.

Vorsichtsmaßnahme: Bei Verwendung auf einem <link>oder @import für ein Stylesheet, IE7 und IE8 die Datei zweimal herunter . Alle anderen Verwendungen sind jedoch in Ordnung.

Es ist absolut gültig, das Protokoll wegzulassen. Die URL-Spezifikation ist seit Jahren sehr klar, und ich habe noch keinen Browser gefunden, der sie nicht versteht. Ich weiß nicht, warum diese Technik nicht besser bekannt ist. Es ist die perfekte Lösung für das heikle Problem, HTTP / HTTPS-Grenzen zu überschreiten. Mehr hier: HTTP-https-Übergänge und relative URLs

Gibt es Fälle, in denen es nicht funktioniert?

Nur um dies in den Mix zu werfen, wenn Sie auf einem lokalen Server entwickeln, funktioniert es möglicherweise nicht. Sie benötigen ein Programm angeben, sonst wird der Browser davon ausgehen kann , dass src="//cdn.example.com/js_file.js"ist src="file://cdn.example.com/js_file.js", was zu brechen , da Sie nicht auf diese Ressource lokal Hosting.

Microsoft Internet Explorer scheint hierfür besonders sensibel zu sein. Siehe folgende Frage: jQuery kann nicht in Internet Explorer auf localhost (WAMP) geladen werden.

Sie würden wahrscheinlich immer versuchen, eine Lösung zu finden, die in all Ihren Umgebungen mit den geringsten erforderlichen Änderungen funktioniert.

Die von HTML5Boilerplate verwendete Lösung besteht darin, einen Fallback zu haben, wenn die Ressource nicht korrekt geladen ist. Dies funktioniert jedoch nur, wenn Sie eine Prüfung einbinden :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- If jQuery is not defined, something went wrong and we'll load the local file -->
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

UPDATE: HTML5Boilerplate wird jetzt verwendet, <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.jsnachdem entschieden wurde, protokollbezogene URLs zu verwerfen (siehe [hier] [3]).

In Anlehnung an den Gnud-Verweis heißt es in Abschnitt 5.2 des RFC 3986 :

Wenn die Schemakomponente definiert ist und angibt, dass die Referenz mit einem Schemanamen beginnt, wird die Referenz als absoluter URI interpretiert und wir sind fertig. Andernfalls wird das Schema des Referenz-URI von der Schemakomponente des Basis-URI geerbt .

Also //ist richtig :-)

Ja, dies ist in RFC 3986 , Abschnitt 5.2 dokumentiert :

(Bearbeiten: Ups, meine RFC-Referenz war veraltet).

Es ist in der Tat richtig, wie andere Antworten angegeben haben. Sie sollten jedoch beachten, dass einige Webcrawler 404s für diese auslösen, indem sie sie auf Ihrem Server wie eine lokale URL anfordern. (Sie ignorieren den doppelten Schrägstrich und behandeln ihn als einfachen Schrägstrich).

Möglicherweise möchten Sie auf Ihrem Webserver eine Regel einrichten, um diese abzufangen und umzuleiten.

Mit Nginx würden Sie beispielsweise Folgendes hinzufügen:

location ~* /(?<redirect_domain>((([a-z]|[0-9]|\-)+)\.)+([a-z])+)/(?<redirect_path>.*) {
  return 301 $scheme:/$redirect_domain/$redirect_path;
}

Beachten Sie jedoch, dass Sie, wenn Sie Punkte in Ihren URIs verwenden, die Spezifität erhöhen müssen, da diese Seiten sonst in nicht vorhandene Domänen umgeleitet werden.

Dies ist auch ein ziemlich massiver Regex, der für jede Abfrage ausgeführt werden muss. Meiner Meinung nach lohnt es sich, nicht konforme Browser mit 404s zu bestrafen, wenn die meisten kompatiblen Browser einen (leichten) Leistungseinbruch erleiden.

Wir sehen 404 Fehler in unseren Protokollen, wenn wir //somedomain.com als Verweise auf JS-Dateien verwenden.

Die Referenzen, die die 404s verursachen, sehen folgendermaßen aus: ref:

<script src="//somedomain.com/somescript.js" />

404 Anfrage:

http://mydomain.com//somedomain.com/somescript.js

Da diese regelmäßig in unseren Webserver-Protokollen angezeigt werden, kann man mit Sicherheit sagen: Alle Browser und Bots berücksichtigen RFC 3986, Abschnitt 4.2, NICHT . Am sichersten ist es, wenn möglich, das Protokoll einzuschließen.

1. Zusammenfassung

Antwort für 2019: Sie können weiterhin protokollbezogene URLs verwenden, diese Technik ist jedoch ein Anti-Pattern .

Ebenfalls:

1. Möglicherweise haben Sie Probleme bei der Entwicklung.
2. Einige Tools von Drittanbietern unterstützen sie möglicherweise nicht.

Eine Migration von protokollbezogenen URLs zu https://diesen wäre schön.

2. Relevanz

Diese Antwort ist für Januar 2019 relevant. In Zukunft sind die Daten dieser Antwort möglicherweise veraltet.

3. Anti-Muster

3.1. Argumentation

Paul Irish - Front-End-Ingenieur und Entwickleranwalt für Google Chrome - schreibt im Dezember 2014 :

Jetzt, da SSL für alle empfohlen wird und keine Leistungsbedenken hat , ist diese Technik jetzt ein Anti-Pattern . Wenn das benötigte Asset über SSL verfügbar ist, verwenden Sie das https://Asset immer.

Das Zulassen, dass das Snippet über HTTP angefordert wird, öffnet die Tür für Angriffe wie den jüngsten GitHub Man-on-the-Side-Angriff . Es ist immer sicher, HTTPS-Assets anzufordern, auch wenn sich Ihre Site unter HTTP befindet. Das Gegenteil ist jedoch nicht der Fall .

3.2. Ein weiterer Link

• Lädt Seitenressourcen mithilfe protokollrelativer URIs
• Verwenden Sie keine protokollbezogenen URLs mehr

3.3. Beispiele

• Im Jahr 2017 wechselte Stack Overflow von protokollbezogenen URLs zu https
• Im Jahr 2018 wird Chrome alle unverschlüsselten Websites als "nicht sicher" kennzeichnen.

4. Entwicklungsprozess

Zum Beispiel versuche ich, Clean-Console zu verwenden .

• Beispieldatei KiraCleanConsole__cdn_links_demo.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clean-console without protocol demonstration</title>
    <!-- Really dead link -->
    <script src="https://unpkg.com/bowser@latest/bowser.min.js"></script>
    <!-- Package exists; link without “https:” -->
    <script src="//cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
    <!-- Package exists: link with “https:” -->
    <script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.js"></script>
</head>
<body>
    Kira Goddess!
</body>
</html>

• Ausgabe:

D:\SashaDebugging>clean-console -i KiraCleanConsole__cdn_links_demo.html
checking KiraCleanConsole__cdn_links_demo.html
phantomjs: opening page KiraCleanConsole__cdn_links_demo.html

phantomjs: Unable to load resource (#3URL:file://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js)


phantomjs:   phantomjs://code/runner.js:30 in onResourceError
Error code: 203. Description: Error opening //cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js: The network path was not found.

  phantomjs://code/runner.js:31 in onResourceError

phantomjs: Unable to load resource (#5URL:https://unpkg.com/bowser@2.1.0/bowser.min.js)


phantomjs:   phantomjs://code/runner.js:30 in onResourceError
Error code: 203. Description: Error downloading https://unpkg.com/bowser@2.1.0/bowser.min.js - server replied: Not Found

  phantomjs://code/runner.js:31 in onResourceError

phantomjs: Checking errors after sleeping for 1000ms
2 error(s) on KiraCleanConsole__cdn_links_demo.html

phantomjs process exited with code 2

Verknüpfung //cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js ist gültig, aber ich erhalte eine Fehlermeldung.

Achten Sie auf file://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.jsund lesen Thilo und bg17aw Antworten zufile:// .

Ich wusste nichts über dieses Verhalten und konnte nicht verstehen, warum ich solche Probleme für Pager habe .

5. Tools von Drittanbietern

Ich verwende Clickable URLs Sublime Text-Paket. Verwenden Sie es, ich kann einfach Links aus meinem Texteditor im Browser öffnen.

Beide Links im Beispiel sind gültig. Aber der erste Link, den ich erfolgreich im Browser öffnen kann, verwendet klickbare URLs, der zweite Link - nein. Dies ist möglicherweise nicht sehr praktisch.

6. Fazit

Ja:

1. Wenn Sie Probleme wie im Developing processArtikel haben, können Sie Ihren Entwicklungsworkflow festlegen.
2. Andernfalls haben Sie Probleme wie im Third-party toolsArtikel, können Sie Werkzeuge beitragen.

Diese zusätzlichen Probleme benötigen Sie jedoch nicht. Lesen Sie Informationen über Links im Anti-patternElement: Protokollbezogene URLs sind veraltet.

Das Muster, das ich auf HTML5-Boilerplate sehe, ist:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

Es läuft auf verschiedenen Systemen wie http, https, file.

Da Ihr Beispiel die Verknüpfung mit einer externen Domäne ist, sollten Sie bei Verwendung von HTTPS überprüfen, ob die externe Domäne auch für SSL eingerichtet ist. Andernfalls werden Ihren Benutzern möglicherweise SSL- und / oder 404-Fehler angezeigt (z. B. speichern ältere Versionen von Plesk HTTP und HTTPS in separaten Ordnern). Für CDNs sollte es kein Problem sein, aber für jede andere Website könnte es sein.

Nebenbei bemerkt, getestet während der Aktualisierung einer alten Website und funktioniert auch im url = Teil eines META REFRESH.