Discord를 통해 Discord 활동을 실행할 때 콘텐츠 보안 정책(CSP) 문제가 발생할 수 있습니다. 네트워크 요청이 Discord 프록시 규칙을 따르도록 하여 이 문제를 해결할 수 있습니다.

이 작업은 수동으로 수행할 수 있습니다... 또는 @robojs/patch가 처리하도록 할 수 있습니다.

CSP란 무엇입니까?

콘텐츠 보안 정책(CSP)은 교차 사이트 스크립팅(XSS) 공격을 방지하는 데 도움이 되는 보안 표준입니다. 페이지가 로드할 수 있는 리소스와 데이터를 보낼 수 있는 위치를 제어합니다.

Discord에서 Discord 활동을 실행하면 실제로 Discord 프록시를 중개자로 사용하게 됩니다. 즉, 자체적으로 를 설정한다는 의미입니다. CSP 규칙. 네트워크 요청이 이러한 규칙을 따르지 않으면 차단됩니다.

• /api/token과 같은 상대 요청은 /.proxy라는 접두사가 붙지 않으면 차단됩니다.
• https://example.com/api/token과 같은 외부 요청은 매핑하거나 프록시로 설정하지 않는 한 차단됩니다.

CSP 위반 해결

위에 언급한 대로, 여러분이 해야 할 일은 네트워크 요청이 Discord 프록시 규칙을 따르는지 확인하는 것뿐입니다. 어떤 경우에는 요청 경로 시작 부분에 /.proxy를 추가하는 것이 포함됩니다.

// Before
fetch('/api/token')

// After
fetch('/.proxy/api/token')

그러나 WebSocket은 조금 더 까다로울 수 있습니다. 특히 Vite와 같은 활동 전에 로드되는 핫 모듈 교체(HMR)에 의존하는 경우에는 더욱 그렇습니다. 그래서 우리는 모든 것을 처리하기 위해 @robojs/patch를 만들었습니다.

활동 패치

@robojs/patch는 Discord Proxy 규칙을 따르도록 네트워크 요청을 패치하는 경량 패키지입니다. 이는 fetch 및 WebSocket 전역
을 업데이트하여 작동합니다.

npm install @robojs/patch

프로젝트 설정에 따라 이 패치를 적용하는 방법이 다릅니다.

방법 1: Vite 플러그인(권장)

Vite를 사용하는 경우 Vite 구성 파일에 패치를 플러그인으로 적용할 수 있습니다.

import { DiscordProxy } from '@robojs/patch'
import { defineConfig } from 'vite'

export default defineConfig({
    plugins: [DiscordProxy.Vite()]
})

이 방법을 사용하면 Vite의 HMR 클라이언트 이전에 패치를 실행하여 올바르게 작동할 수 있으므로 권장됩니다.

방법 2: 함수 호출

Vite를 사용하지 않는 경우 함수를 직접 호출하여 패치를 적용할 수 있습니다.

import { DiscordProxy } from '@robojs/patch'

DiscordProxy.patch()

다른 스크립트가 로드되기 전, 프로젝트 시작 부분에서 이를 호출해야 합니다. (예: index.js 파일 상단)

➞ ? 문서: @robojs/patch

외부 요청

이는 외부 URL에 대한 요청에는 영향을 미치지 않습니다. CSP 문제가 있는 경우 자신만의 프록시를 생성하거나 Discord 개발자 포털에서 매핑하여 문제를 해결할 수 있습니다.

➞ ? 튜토리얼: 프록시를 사용하여 CSP 문제 해결

Node.js 프록시를 사용하여 Discord 활동의 콘텐츠 보안 정책(CSP) 문제 해결

WavePlay 직원 ・ 6월 17일

#불화 #프로그램 작성 #마디 #자바스크립트

Discord 활동에 관심이 있으신가요?

Robo.js는 Discord 활동을 쉽게 구축할 수 있는 강력한 프레임워크입니다. 멋진 Discord 경험을 만드는 데 도움이 되는 다양한 기능과 도구를 제공합니다!

Discord 서버에 가입하여 다른 개발자와 채팅하고, 질문하고, 프로젝트를 공유하세요. 우리는 친절하고 항상 기꺼이 도와드립니다! 또한, 우리의 AI 로봇인 세이지가 귀하의 모든 질문에 도움을 드릴 것입니다.

➞ ? 커뮤니티: Discord 서버에 가입하세요

➞ ? 튜토리얼: Robo.js를 사용하여 몇 초 만에 Discord 활동 만들기

로봇 - 마법을 상상해 보세요

간편한 활동, 봇, 서버 등을 통해 Discord를 강화하세요! ⚡ | 회원수 83명

discord.com

Robo.js를 사용하여 몇 초 만에 Discord 활동 만들기

WavePlay 직원 ・ 4월 9일

#불화 #sdk #자바스크립트 #봇