Postman Visualizer에서 Alpine.js CSP 빌드를 사용하는 JSONPath

JSON 경로로 JSON 응답 쿼리

Postman JSON 결과로 더 쉽게 작업하기 위해 JSONPath에서 Postman Visualizer을 구현하여 결과를 쿼리했습니다.

JSONPath는 XML에 대한 XPath와 같은 JSON에 대한 것이며 큰 중첩 개체에 들어가 찾고 있는 것을 더 빨리 찾는 데 도움이 됩니다.

처음에는 예제에서 찾을 수 있고 제대로 작동하는 jQuery 버전만 사용하고 있었습니다. ( JSONpath Visualizer | Postman Team Collections | Postman API Network )

그런 다음 나는 이것이 똑똑한 엉덩이가 될 좋은 기회라고 생각하고 그것을 Alpine.js로 구현했고 그것은 단지 엉망이었습니다. 그러나 몇 가지를 알아 냈습니다.

가장 큰 걸림돌은 변경할 수 없는 Postman의 Content-Security-Policy에 대해 알아내는 것이었고, 이는 Alpine에서 내부적으로 발생하는 HTML 속성의 JavaScript를 허용하지 않습니다.

alpinejs:5 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src http: https: 'unsafe-inline'".

Postman이 CSP를 처리하는 방법에 대한 더 많은 통찰력이 있습니다: https://community.postman.com/t/render-pdf-in-visualizer/9193/4 및 이 비디오: https://youtu.be/6ajkO9JETDs?t=275 - 짧은 버전은 Postman이 temp 디렉토리에 html 파일을 생성하고 이 파일은 CSP 메타 태그와 함께 제공된다는 것입니다. 덮어쓸 수 없으므로 하나가 붙어 있습니다.

다행스럽게도 Alpine.js는 보다 제한적인 환경에서 작동하는 버전을 제공합니다. 해당 버전은 CDN에 없으며 직접 빌드해야 했습니다. 이로 인해 모든 Node 및 NPM 항목을 업데이트해야 했습니다. 이는 완전히 엉망이었지만 결국에는 작동하는 CSP 버전을 얻었습니다.

물론 CDN에서 파일을 링크하는 것이 더 좋기 때문에 gist를 만들고 거기에서 파일을 제공하기 위해 https://raw.githack.com/을 사용합니다.

The whole gist

어떻게:

Postman의 "Test"영역에 다음 코드를 붙여넣고 호출을 시작합니다.

JSON Path with Alpine.js CSP build in Postman Visualizer by Marcus Obst