외부 사이트의'js 태그 삽입'을 만들 때 주의해야 할 것

버튼이나 LTGM 버튼과 같은 블로그 부품, 작은 도구 등
자신이 만든javascript 라벨을 다른 사이트에 끼워서 사용할 때 걱정되는 일이 많습니다.

그때 내가 주의한 일은 매우 두루뭉술하게 썼다.
※ Advent 캘린더가 처음 투고됩니다.사정을 봐주다.땀이 나서 미끄러져 들어가는 건 아니지만,,!

단도직입적으로 주의하고 있는 일...


업데이트 가능


외부 사이트에 js를 삽입한 후
"아이고...이건 외부 사이트의 태그 자체를 수정해야 한다"
이렇게 되지 않도록 서버에서 수정할 수도 있습니다.
GA 태그 등을 참조하여 서버에서 업데이트할 수 있습니다.
site.html
<!-- 埋め込みjsタグ -->
<script async src="https://example.jp/jstag?id=12345"></script>
<script type='text/javascript'>
hogetag('config', 'ABCDE')
</script>
※ 개인 기재script type="text/javascript"라면 안심할 수 있지만, html5에서 기재하지 않아도 기본 설정이기 때문에 이번에는 기재하지 않습니다.
여기서 js의 읽기 시기를 주의해야 한다.async 비동기식 읽기 가능defer에서 html를 완전히 읽고 실행합니다.
아니면 js 라벨이 있는 임의의 시간 등등.
여기 기사가 매우 알기 쉬워졌으니 참고하십시오.

제작된 js 태그가 외부 사이트에 폐를 끼치지 않도록


다른 라이브러리에 의존하지 않고 순수한javascript로 쓰기, 예를 들어 jQuery


jquery를 자주 사용합니다. jquery 라이브러리와 다른 js 라이브러리가 없어도
나는 네가 순수한 js로 써서 그것을 움직이게 할 것을 건의한다.
만약 다른 프로그램 라이브러리 등을 사용한다면, 이 프로그램 라이브러리도 업데이트성을 의식해야 한다.

작용역을 사용하면 삽입된 사이트의 변수와 함수 등과 충돌하지 않도록 주의하세요


만약 작용역을 추가하지 않고 check() 등 함수 이름을 만들면, 이 함수는 이미 외부 사이트에서 사용된다
js 오류 같은 것도 있고.땀
최초의 예에서 hogetag () 라는 이름으로 만들어진 것이다
실시간 함수로 절대 구역을 만들 수 있으며 함수 내에서만 조작할 수 있다.
바로 끼워넣은 js 태그 때문!이렇게 생각하다.
server.js
(function () {
    //jsタグのメイン処理等
}());
js 실시간 함수여기에 관한 글은 매우 참고 가치가 있다.
※ 자바스크립트의 예약어도 주의해야 합니다.→ 참고 자료

안전 여부

  • 물론 통신은 https(https://의 외부 사이트에 http://의 js 태그와 이미지가 있으면 오류가 발생합니다.)
  • 브라우저가 볼 수 있는 범위 내에서 변경할 수 있는 중요한 조회를 넣었는지 등이다.(서버 측의 php 등이 중요한 곳을 보지 못하게 하는 등)
  • 읽는 데 시간이 걸리지 않도록.

  • 큰 그림을 읽었는지 여부
  • css 파일이 심각하게 처리되었는지 여부
  • aax통신 등 요청수가 많은지 여부.
  • 캐시 등을 잘 사용하는지(쿼리에 가입시간?t=1608562686 등 현지 캐시 업데이트 등에 적합한지
  • js 라벨로 생성된 node(html 라벨) 등이 적절한지 여부


    W3C 등의 참고로 먼저 div 등이 되는지.

    혼동과 경량화


    js 태그가 어느 정도 완성되면
    난독화된 역방향 공사 대책
    js 라벨의 읽기 속도를 높이기 위해 경량화를 연구해 보는 것이 어떻습니까?
    그리고 Copyright를 멋지게 끼세요.
    사이트 설명
  • https://obfuscator.io/
  • https://tools.arashichang.com/html_pack.html
  • 브라우저에서 확인


    나는 아래의 유명한 조회 검사 도구를 사용하면 매우 수월할 것이라고 생각한다.
    ※ 무료 버전과 유료 버전이 있습니다.
  • BrowserStack https://www.browserstack.com/
  • Browserling https://www.browserling.com/
  • 또 스마트폰을 위한 경우 xcode의 iOS 시뮬레이터와 안드로이드 시뮬레이터도 테스트할 수 있다
    실기와 js의 행동이 달라지기 때문에 실기로 테스트하는 것을 추천합니다.
    끝까지 읽어주셔서 감사합니다!

    좋은 웹페이지 즐겨찾기