<script src =“http : //…”>에서 http : //를 //로 바꾸는 것이 유효합니까?

다음과 같은 요소가 있습니다.

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

이 경우 사이트는 HTTPS이지만 사이트는 HTTP 일 수도 있습니다. (JS 파일은 다른 도메인에 있습니다.) 편의상 다음을 수행하는 것이 유효한지 궁금합니다.

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

나는 그것이 제거하는 유효한 있는지 궁금하네요 http:나 https:?

테스트 한 모든 곳에서 작동하는 것 같지만 작동하지 않는 경우가 있습니까?

스키마가없는 상대 URL (http : 또는 https :)은 RFC 3986에 따라 유효합니다 . "Uniform Resource Identifier (URI) : Generic Syntax", 섹션 4.2 . 클라이언트가 질식하면 RFC에 지정된 URI 구문을 준수하지 않기 때문에 클라이언트의 결함입니다.

귀하의 예는 유효하며 작동해야합니다. 트래픽이 많이 발생하는 사이트에서 상대 URL 방법을 직접 사용했으며 불만이 전혀 없었습니다. 또한 Firefox, Safari, IE6, IE7 및 Opera에서 사이트를 테스트합니다. 이러한 브라우저는 모두 해당 URL 형식을 이해합니다.

모든 주류 브라우저에서 작동하는 것이 보장됩니다 (시장 점유율이 0.05 % 미만인 브라우저는 고려하지 않습니다). Internet Explorer 3.0에서 작동합니다.

RFC 3986 은 다음 부분으로 구성된 URI를 정의합니다.

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

상대 URI를 정의 할 때 ( 섹션 5.2 ) 항상 왼쪽에서 시작하여 해당 섹션을 생략 할 수 있습니다. 의사 코드에서는 다음과 같습니다.

 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;

설명하는 URI는 구성표가없는 상대 URI입니다.

작동하지 않는 경우가 있습니까?

부모 페이지가에서로드 된 경우 file://작동하지 않을 수 있습니다 ( file://cdn.example.com/js_file.js물론 로컬로 제공 할 수있는 을 얻으려고 시도합니다 ).

많은 사람들이 이것을 프로토콜 상대 URL이라고 부릅니다.

IE 7 & 8에서 CSS 파일을 두 번 다운로드합니다 .

여기 에 HTML의 숨겨진 기능 에서 답변을 복제합니다 .

프로토콜 독립적 절대 경로 사용 :

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

브라우저가 HTTPS를 통해 SSL로 페이지를 보는 경우 https 프로토콜을 사용하여 해당 자산을 요청하고, 그렇지 않으면 HTTP를 사용하여 요청합니다.

이렇게하면 IE의 끔찍한 "이 페이지에 보안 항목과 비보안 항목이 모두 포함되어 있습니다"오류 메시지가 표시되지 않으므로 모든 자산 요청이 동일한 프로토콜 내에 유지됩니다.

주의 사항 : <link>스타일 시트를 위해 또는 @import에서 사용될 때 IE7 및 IE8 은 파일을 두 번 다운로드합니다 . 그러나 다른 모든 용도는 괜찮습니다.

프로토콜을 제거하는 것이 완벽하게 유효합니다. URL 사양은 수년 동안 매우 명확했으며 아직 이해하지 못하는 브라우저를 찾지 못했습니다. 왜이 기술이 더 잘 알려지지 않았는지 모르겠습니다. HTTP / HTTPS 경계를 넘어서는 어려운 문제에 대한 완벽한 솔루션입니다. 여기에 더 : Http-https 전환 및 상대 URL

작동하지 않는 경우가 있습니까?

로컬 서버에서 개발하는 경우 믹스에 이것을 던져 넣으면 작동하지 않을 수 있습니다. 당신은 그렇지 않으면 브라우저가 있다고 가정 할 수있다하는 방식을 지정할 필요가 src="//cdn.example.com/js_file.js"있습니다 src="file://cdn.example.com/js_file.js"로컬이 리소스를 호스팅하지 않는 때문에 휴식 것이다.

Microsoft Internet Explorer는 이것에 특히 민감한 것 같습니다.이 질문을 참조하십시오 : localhost (WAMP)의 Internet Explorer에서 jQuery를로드 할 수 없습니다

아마도 최소한의 수정만으로도 모든 환경에서 작동하는 솔루션을 찾으려고 노력할 것입니다.

HTML5Boilerplate에서 사용하는 솔루션 은 리소스가 올바르게로드되지 않은 경우 폴백을 수행하는 것이지만 확인을 통합 한 경우에만 작동합니다.

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

업데이트 : HTML5Boilerplate은 이제 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js프로토콜 상대 URL을 더 이상 사용하지 않기로 결정한 후 사용합니다. [여기] [3]를 참조하십시오.

gnud의 참조에 따라 RFC 3986 섹션 5.2 는 다음과 같이 말합니다.

스킴 구성 요소가 정의되어 참조가 스킴 이름으로 시작 함을 나타내는 참조는 절대 URI로 해석되고 완료됩니다. 그렇지 않으면 참조 URI의 체계가 기본 URI의 체계 구성 요소에서 상속됩니다 .

그래서 //맞습니다 :-)

예, RFC 3986 섹션 5.2에 설명되어 있습니다.

(편집 : 죄송합니다. RFC 참조가 오래되었습니다).

다른 답변에서 언급했듯이 실제로 맞습니다. 그러나 일부 웹 크롤러는 서버에서 로컬 URL처럼 요청하여 404를 설정합니다. 이중 슬래시는 무시하고 단일 슬래시로 취급합니다.

웹 서버에서 규칙을 설정하여 규칙을 설정하고 리디렉션 할 수 있습니다.

예를 들어 Nginx를 사용하면 다음과 같이 추가 할 수 있습니다.

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

그러나 URI에 마침표를 사용하는 경우 특이성을 높이거나 해당 페이지를 존재하지 않는 도메인으로 리디렉션하게됩니다.

또한 이것은 각 쿼리에 대해 실행되는 다소 큰 정규식입니다. 제 생각에 비 호환 브라우저는 대부분의 호환 브라우저에서 (약간) 성능에 비해 404로 비 호환 브라우저를 처벌하는 것이 좋습니다.

//somedomain.com을 JS 파일에 대한 참조로 사용할 때 로그에 404 오류가 표시됩니다.

404의 원인은 다음과 같습니다. ref :

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

404 요청 :

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

웹 서버 로그에 이러한 정보가 정기적으로 표시되면 다음과 같이 말하는 것이 안전합니다. 모든 브라우저와 봇은 RFC 3986 섹션 4.2를 준수 하지 않습니다 . 가장 안전한 방법은 가능할 때마다 프로토콜을 포함시키는 것입니다.

1. 요약

2019 년 답변 : 여전히 프로토콜 기준 URL을 사용할 수 있지만 이 기술 은 안티 패턴 입니다.

또한:

1. 개발에 문제가있을 수 있습니다.
2. 일부 타사 도구는 지원하지 않을 수 있습니다.

프로토콜 기준 URL에서 URL로 마이그레이션 https://하는 것이 좋습니다.

2. 관련성

이 답변은 2019 년 1 월과 관련이 있습니다. 향후이 답변의 데이터가 더 이상 사용되지 않을 수 있습니다.

3. 안티 패턴

3.1. 입론

폴 아일랜드어 - 프런트 엔드 엔지니어 및 개발자 구글 크롬에 대한 옹호 - 2014 년 12 월에 쓰기 :

이제 SSL이되어 모든 사람들에게 격려 와 성능 문제가없는 , 이 기술은 이제 안티 패턴이다 . 필요한 자산이 SSL에서 사용 가능한 경우 항상https:// 자산을 .

스 니펫이 HTTP를 통해 요청하도록 허용하면 최근 GitHub Man-on-the-side 공격 과 같은 공격에 대한 문이 열립니다 . 사이트가 HTTP에 있더라도 HTTPS 자산을 요청하는 것이 항상 안전하지만 그 반대 는 아닙니다 .

3.2. 다른 링크

• 프로토콜 상대 URI를 사용하여 페이지 자원을로드합니다.
• 프로토콜 기준 URL 사용 중지

3.3. 예

• 2017 년 스택 오버플로가 프로토콜 기준 URL에서 https
• 2018 년 Chrome은 암호화되지 않은 모든 웹 사이트를 '보안되지 않음'으로 표시합니다

4. 개발 과정

예를 들어 clean-console 을 사용하려고합니다 .

• 예제 파일 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>

• 산출:

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

링크 //cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js 가 유효하지만 오류가 발생합니다.

Thilo 와 bg17aw에 대한 주의를 기울이고 file://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js읽으십시오.file:// .

나는이 행동에 대해 몰랐고 왜 pageres에 대해 이와 같은 문제가 있는지 이해할 수 없었다 .

5. 타사 도구

클릭 가능한 URL Sublime Text 패키지를 사용 합니다. 그것을 사용하면 브라우저의 텍스트 편집기에서 링크를 열 수 있습니다.

예제의 두 링크 모두 유효합니다. 그러나 브라우저에서 성공적으로 열 수있는 첫 번째 링크는 클릭 가능한 URL을 사용하고 두 번째 링크는 아니요입니다. 이것은 매우 편리하지 않을 수 있습니다.

6. 결론

예:

1. Developing process항목에 문제가있는 경우 개발 워크 플로를 설정할 수 있습니다.
2. Third-party tools항목과 같이 문제가있는 경우 도구를 제공 할 수 있습니다.

그러나이 추가 문제는 필요하지 않습니다. Anti-pattern항목의 링크별로 정보를 읽습니다 . 프로토콜 기준 URL은 더 이상 사용되지 않습니다.

html5-boilerplate 에서 볼 수있는 패턴 은 다음과 같습니다.

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

이 같은 다른 제도에 원활하게 실행 http, https, file.

예를 들어 외부 도메인에 연결하는 경우 HTTPS를 사용하는 경우 외부 도메인도 SSL에 대해 설정되어 있는지 확인해야합니다. 그렇지 않으면 사용자에게 SSL 오류 및 / 또는 404 오류가 표시 될 수 있습니다 (예 : Plesk의 이전 버전은 HTTP 및 HTTPS를 별도의 폴더에 저장함). CDN의 경우 문제가되지 않지만 다른 웹 사이트의 경우 문제가 될 수 있습니다.

참고로, 오래된 웹 사이트를 업데이트하는 동안 테스트되었으며 META REFRESH의 url = 부분에서도 작동합니다.