S(GH)PA: GitHub 페이지용 단일 페이지 앱 해킹

게시 됨: 2022-03-10
빠른 요약 ↬ lorem ipsum

한동안 저는 단일 페이지 앱(SPA)으로 처리하기 위해 GitHub 페이지 웹사이트의 경로를 index.html로 라우팅하는 기능을 원했습니다. 프로젝트를 변경할 때마다 모든 경로에 동일한 파일을 복사하려는 경우가 아니라면 이러한 앱에서는 모든 요청을 하나의 HTML 파일로 라우팅해야 하기 때문에 이는 테이블 지분입니다. 현재 GitHub Pages는 경로 처리 솔루션을 제공하지 않습니다. Pages 시스템은 기본 프로젝트 콘텐츠를 제공하기 위한 단순하고 단순한 메커니즘입니다.

모르는 경우를 대비하여 GitHub는 프로젝트 웹사이트에 대한 사용자 지정 기능을 제공합니다. 404.html 파일을 추가하고 사용자 지정 오류 페이지로 사용할 수 있는 기능입니다. 나는 index.html 파일을 복제하고 복사본의 이름을 404.html 로 변경하여 SPA 해킹에 첫 번째 공격을 가했습니다. 많은 사람들이 GitHub Pages에서 동일한 문제를 경험했고 일반적인 아이디어를 좋아했습니다. 그러나 Twitter의 일부 사람들이 올바르게 제기한 문제는 404.html 페이지가 여전히 검색 엔진 크롤러에 좋지 않은 상태 코드 404와 함께 제공된다는 것입니다. 건틀렛은 던져졌고 나는 대답하기로 결정했습니다. 그리고 활기차게 대답했습니다!

한 번 더, 느낌으로

자고 난 후, 나는 속으로 생각했습니다. "자기야, 우리는 더티 핵 영역에 깊숙이 있는데, 왜 내가 이 핵을 더 더럽게 만들지 않느냐?!" 이를 위해 동일한 기능과 단순성을 제공하는 동시에 웹사이트의 크롤러 주스를 보존하는 훨씬 더 나은 해킹을 개발했습니다. 이제 index.html 파일을 복제하고 404.html 로 이름을 바꾸는 데 시간을 낭비할 필요도 없습니다. ! 다음 솔루션은 모든 최신 데스크톱 및 모바일 브라우저(Edge, Chrome, Firefox, Safari)와 Internet Explorer 10 이상에서 작동해야 합니다.

템플릿 및 데모 : 설명을 건너뛰고 상품을 받으려면 템플릿 저장소와 실제 작동을 볼 수 있는 테스트 URL이 있습니다.

점프 후 더! 아래에서 계속 읽기 ↓

그게 바로 메타야

가장 먼저 한 일은 브라우저가 index.html 페이지로 리디렉션하도록 하는 다른 옵션을 조사하는 것이었습니다. 그 부분은 꽤 직관적이었습니다. 기본적으로 서버 구성, JavaScript location 조작 또는 refresh 메타 태그의 세 가지 옵션이 있습니다. 첫 번째 것은 분명히 GitHub 페이지에 대한 금지입니다. 그리고 JavaScript는 기본적으로 새로 고침과 동일하지만 크롤러 인덱싱에 대해서는 틀림없이 더 나쁩니다. 그러면 메타 태그가 남습니다. 새로 고침 값이 0 인 메타 태그는 검색 엔진에서 301 리디렉션으로 처리되는 것으로 보이며 이는 이 사용 사례에 적합합니다.

내부에 빈 HTML 문서가 포함된 gh-pages 저장소에 404.html 파일을 추가하여 시작해야 합니다. 해당 문서 는 총 512바이트 이상이어야 합니다(아래 설명). 다음으로 404.html 페이지의 head 요소에 다음 마크업을 넣습니다.

 <script> sessionStorage.redirect = location.href; </script> <meta http-equiv="refresh" content="0;URL='/REPO_NAME_HERE'">

이 코드는 시도된 시작 URL을 표준 sessionStorage 개체의 변수로 설정하고 메타 새로 고침 태그를 사용하여 프로젝트의 index.html 페이지로 즉시 리디렉션합니다. Github Organization 사이트를 운영하고 있다면 content 속성 교체 텍스트에 repo 이름을 넣지 말고 다음과 같이 하십시오: content=“0;URL='/'”

경로 처리 사용자 정의

보다 정교한 경로 처리를 원하면 위에 표시된 script 태그에 몇 가지 추가 JavaScript 로직을 포함하기만 하면 됩니다. 다음과 같이 몇 가지를 조정할 수 있습니다. index.html 페이지에 전달하는 href 의 구성; 404 페이지에 남아 있어야 하는 페이지(메타 태그의 동적 제거를 통해) 인바운드 경로를 기반으로 표시되는 콘텐츠를 지정하기 위해 배치하려는 기타 논리.

512 매지컬 바이트

이것은 내가 웹 개발에서 만난 가장 이상한 단점 중 하나입니다. 404.html 페이지의 총 크기가 512바이트보다 큰지 확인해야 합니다. 그렇지 않은 경우 Internet Explorer는 이를 무시하고 대신 일반 브라우저 404 페이지를 표시하기 때문입니다. 마침내 이것을 알아냈을 때 나는 걸리는 시간에 대처하기 위해 맥주를 개봉해야 했습니다.

역사를 만들자

사용자가 처음 탐색한 URL을 캡처하고 복원하려면 다른 JavaScript가 페이지의 현재 상태에서 작동 하기 전에 index.html 페이지의 head 에 다음 script 태그를 추가해야 합니다.

 <script> (function(){ var redirect = sessionStorage.redirect; delete sessionStorage.redirect; if (redirect && redirect != location.href) { history.replaceState(null, null, redirect); } })(); </script>

이 JavaScript 비트는 404.html 페이지의 sessionStorage 에 캐시된 URL을 검색하고 현재 history 항목을 해당 URL로 바꿉니다. 여기에서 어떻게 처리할지 선택하는 것은 당신에게 달려 있지만, 내가 당신이라면 popstate 와 hashchange 를 사용할 것입니다.

자, 여러분, 그게 다입니다. 이제 GitHub 페이지에 단일 페이지 앱을 작성하여 축하하러 가십시오!

이 기사는 Microsoft Edge 브라우저를 포함하여 실용적인 JavaScript 학습, 오픈 소스 프로젝트 및 상호 운용성 모범 사례에 대한 Microsoft 기술 전도사 및 엔지니어의 웹 개발 시리즈의 일부입니다.

F12 개발자 도구를 포함하여 dev.microsoftedge.com에서 무료 도구를 사용하여 브라우저 및 장치(Microsoft Edge 포함 - Windows 10용 기본 브라우저)에서 테스트할 것을 권장합니다. 웹 페이지 속도를 높입니다. 또한 Edge 블로그를 방문하여 Microsoft 개발자 및 전문가의 최신 정보를 얻으십시오.

SmashingMag에 대한 추가 정보:

  • 개발에서 배포까지의 간단한 워크플로
  • Foundation For Apps에서 완전한 웹 앱 만들기
  • Jekyll 및 GitHub 페이지로 블로그 구축